vue 初始框架

VueJs讲解初始框架

一、启动项目

第一步:cmd进入项目文件里,运行npm run dev 启动项目 这里说明启动端口号是8080
在这里插入图片描述
第二步:往页面输入:localhost:8080
在这里插入图片描述

二、解析渲染步骤

先看整体框架样式和index.html:
在这里插入图片描述
从上面我们可以看出,index的body中只有一个id为app的div,那是如何被渲染的呢。一步一步寻找
第一步:main.js

main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件。
在这里插入图片描述
这里new Vue代表新建vue对象

el官方解释:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。

这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

components:代表组件。这里是’App’,这说明。首先页面肯定有<app></app>这样的标签,同时有个组建为‘App.Vue‘文件

这个地方我思考好久,才明白,首先App.vue是有的,因为上面已经import导入了,但index.html中并没有<app></App>标签

template:代表模板。官方解释:模板将会替换挂载的元素。挂载元素的内容都将被忽略。

也就是说:template: ‘<App/>’ 表示用<app></app>替换index.html里面的<div id="app"></div>

那到底是不是这样,我们先把main中components这行注释掉:
在这里插入图片描述
再看页面:发现里面就有一个标签。这样那么逻辑就通了。
在这里插入图片描述
这样mian.js就通了,那通过components: { App },我们来看App.vue
第二步:App.vue
首先一个正常的vue结尾的文件里,一般包含三部分:<template>,<script>,<style>
在这里插入图片描述
这里面的<img>标签,就代表页面的vue的logo,它下面又有一个组件<HellWord>

我们只要在进入到HellWord.vue中明白了。
第三步:HellWord.vue
在这里插入图片描述
这样一来,页面所渲染的东西都找到了,其实并不复杂,只是在main.js稍微绕了个弯。

自己也是一边学一边写,有错的地方或者有更好的解释也希望大家予以指点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Country Road Aizu - 2104

题目链接&#xff1a; https://vjudge.net/problem/Aizu-2104 题解&#xff1a; 咋说啊&#xff0c;一言难尽&#xff0c;花了半小时写出来的&#xff0c;卡了十分钟才恍然大明白是排序。 具体就是让每个村子都通上电&#xff0c;变压器在的村子&#xff0c;与变压器连线点线长…

IdentityServer4【QuickStart】之使用asp.net core Identity

使用asp.net core Identity IdentityServer灵活的设计中有一部分是可以将你的用户和他们的数据保存到数据库中的。如果你以一个新的用户数据库开始&#xff0c;那么&#xff0c;asp.net core Identity是一个选择。这个示例演示了如何在IdentityServer中使用asp.net core Ientit…

vue demo1

1.开发工具 试过sublime&#xff0c;现在转战vscode&#xff0c;觉得很顺手&#xff0c;总之啥工具习惯就好。 vscode用着不错的插件&#xff0c;推荐安装。 2.项目目录介绍 vue-cli生成的项目目录有点多&#xff0c;初看有点懵&#xff0c;梳理一下会好很多。 ├── ind…

CentOS下防御或减轻DDoS攻击方法(转)

查看攻击IP 首先使用以下代码&#xff0c;找出攻击者IP netstat -ntu | awk {print $5} | cut -d: -f1 | sort | uniq -c | sort -n 将会得出类似如下的结果&#xff1a; 1 114.226.9.132 1 174.129.237.157 1 58.60.118.142 1 Address 1 servers) 2 118.26.131.78 3 123.125.1…

vscode - 添加背景图片

首先&#xff0c;CtrlShiftP安装backround &#xff0c; 而后重启vscode会有默认的背景图片 修改背景图&#xff0c;可自定义三张 具体请看gif图 最开始时&#xff0c;发现png根本不是全透明&#xff0c;用ps处理了一下&#xff08;下列所有操作均字母组合&#xff09; 1.1 Ctr…

关于Vue.use()详解

问题 相信很多人在用Vue使用别人的组件时&#xff0c;会用到 Vue.use() 。例如&#xff1a;Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时&#xff0c;就不需要用 Vue.use(axios)&#xff0c;就能直接使用。那这是为什么呐&#xff1f; 答案 因为 axios 没有 install。…

分布式工具的一次小升级⏫

前言 之前在做 秒杀架构实践 时有提到对 distributed-redis-tool 的一次小升级&#xff0c;但是没有细说。 其实主要原因是&#xff1a; 秒杀时我做压测&#xff1a;由于集成了这个限流组件&#xff0c;并发又比较大&#xff0c;所以导致连接、断开 Redis 非常频繁。 最终导致获…

浅谈vue $mount()

Vue 的$mount()为手动挂载&#xff0c;在项目中可用于延时挂载&#xff08;例如在挂载之前要进行一些其他操作、判断等&#xff09;&#xff0c;之后要手动挂载上。new Vue时&#xff0c;el和$mount并没有本质上的不同。 具体见代码&#xff1a; 顺便附上vue渲染机制流程图&a…

论一个程序员的自我修养-从一张图片说起

故事起源 本来今天想写.NET Core实战之CMS系统第十五篇文章的。哈&#xff0c;奈何今天在新生命人脉群里面看到石头哥分享的一张图片&#xff0c;然后大家就议论了起来&#xff0c;不过我看的很懵逼&#xff0c;这图什么意思啊&#xff1f;当一个朋友讲述了这个图片背后的故事的…

c/c++ 继承与多态 文本查询的小例子(非智能指针版本)

问题&#xff1a;在上一篇继承与多态 文本查询的小例子&#xff08;智能指针版本&#xff09;在Query类里使用的是智能指针&#xff0c;只把智能指针换成普通的指针&#xff0c;并不添加拷贝构造方法&#xff0c;会发生什么呢&#xff1f; 执行时&#xff0c;代码崩掉。 分析下…

HTML渲染过程详解

由于本人对http协议以及dns对url的解析问题并不了解&#xff0c;所以这里之探讨url请求加载到浏览器端时&#xff0c;浏览器对html的解析到呈现过程&#xff0c;后来经过几位道友分享&#xff0c;整理了一下url解析的过程&#xff0c;如下&#xff1a; 用户输入url地址&#x…

vue之router-view组件的使用

开发的时候有时候会遇到一种情况&#xff0c;比如 &#xff1a;点击这个链接跳转到其他组件的情况&#xff0c;通常会跳转到新的页面&#xff0c;蛋是&#xff0c;我们不想跳转到新页面&#xff0c;只在当前页面切换着显示&#xff0c;那么就要涉及到路由的嵌套了&#xff0c;也…

go 区分指针

先看一段代码 先放一段代码&#xff0c;人工运行一下&#xff0c;看看自己能做对几题&#xff1f; package mainimport "fmt"func main() {var a int 1 var b *int &a var c **int &b var x int *b fmt.Println("a ",a) fmt.Println("&a…

ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: POST,url: url,data: data,dataType: dataType,success: function () {},error: function () {} });传统 Ajax 指的是 XMLHttpRequest&#xff08;XHR&#xff09;&#xff0c; 最早出现的发送后端请求技术&#xff0c;隶属于原始js中&#xff0c…

函数函数sigaction、signal

函数函数sigaction 1. 函数sigaction原型&#xff1a; int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析&#xff1a; 参数 signum &#xff1a;要捕获的信号。参数act&#xff1a;truct sigaction 结构体&#xff0c;后面具体讲解传入…

关于固件

固件(Firmware)就是写入EROM或EPROM(可编程只读存储器)中的程序&#xff0c;通俗的理解就是“固化的软件”&#xff0c;台港澳称为“韧体”。更简单的说&#xff0c;固件就是BIOS的软件&#xff0c;但又与普通软件完全不同&#xff0c;它是固化在集成电路内部的程序代码&#x…

vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目&#xff0c;我准备把项目放在e盘下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行进入这个目录&#xff1a; 创…

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

vscode配置vue环境

一、安装VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打开VSCode&#xff0c;安装常用插件 如图所示&#xff08;安装后重新加载即可&#xff09;: 三、项目中添加.vscode文件夹&#xff0c;文件夹中添…

vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试

关于它是怎么调用运作的&#xff1a;https://mp.csdn.net/postedit/86134414 一. 准备工作&#xff1a; 1.下载webstorm&#xff0c;安装vue。 2.创建项目&#xff0c;cd到要放项目的文件夹下 vue init webpack vue_test 3.安装各种包 npm install 4.运行 cd vue_test …