目录
1.什么是Vue
2.vue的设计思想MVVM
2.1快速入门抓包处理
2.2注意事项及其说明
3.数据单/双向渲染技术
3.1数据单向渲染
3.2数据双向渲染
3.2.1数据双向渲染练习题
4.事件绑定机制
4.1演示案例
4.2抓包处理
4.3注意事项
4.4事件绑定机制的练习题
5.修饰符
6.条件渲染(v-if/v-else-if/v-else/v-show)
6,1 用例题帮大家理解
6.2 v-if 和v-else的区别
6.3 相关案例练习(有兴趣可以试试看)
7.列表渲染 (v-for)
7,1 列表渲染相关方法
7.2列表渲染应用实例
8.组件化编程
8.1 全局组件
编辑
8.2局部组件
8.3注意事项
9.生命周期和钩子函数
对重要阶段的钩子函数进行案例分析
10.vue Cli脚手架模块化开发
10.1用webpack来创建vue Cli脚手架项目
编辑10.2 Vue Cli中项目结构的分析 (如图所示)
!!!10.3Vue请求页面的执行流程
11. vue-ElementUI
11.1安装Element-ui的指令
10.2初步使用Element-UI应用实例
希望小伙伴多多关注！
本文章-由韩顺平教育视频学习所得。供大家一起学习进步 ！
1.什么是Vue
就是渐进式的JavaScript！
1. Vue(读音/vju:/,类似于 view)是一个前端框架,易于构建用户界面。
2.Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合。
3.支持和其它类库结合使用。
4.开发复杂的单页应用非常方便。
5.Vue是Vue.js的简称。
官网文档：https://cn.vuejs.org/v2/guide/index.html
Git下载 : https://cn.vuejs.org/v2/guide/installation.html2.vue的设计思想MVVM
-M∶即Model，模型，包括数据和一些基本操作
-V:即View,视图,页面渲染结果
·VM∶即View-Model，模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作 Model 渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据, 然后同步到Model中。
-而MVM中的VM要做的事情就是把DOM操作完封装起来,开发人员不用再关心 Model和View之间是如何互相影响的
-只要我们Model发生了改变,View上自然就会表现出来
-用户修改了View，Model中的数据也会跟着改变。。
·结果:把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上,大大提高开发效率
实现的数据和显示分离的技术，比JQuery更加的简洁！
2.1快速入门抓包处理
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue快速入门</title> </head> <body> <!-- 1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div 2. 因为div更加适合做布局 3. id 不是必须为app , 是程序员指定,一般我们就使用app --> <div id="app"> <!-- 1. {{message}} : 插值表达式 2. message 就是从model的data数据池来设置 3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换 , 如果没有匹配上, 就是输出空 --> <h1>欢迎你{{message}}-{{name}}</h1> </div> <!--引入vue.js--> <script src="vue.js"></script> <script> //创建Vue对象 /** * 1. 创建Vue对象实例 * 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners) * */ let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "Hello-Vue!", name: "小明" } }) console.log("vm=>", vm); console.log(vm._data.message); console.log(vm._data.name); console.log(vm.name); console.log(vm.message); </script> </body> </html>
结果展示：
抓包分析：
改变Model的数据改变可直接修改前端
2.2注意事项及其说明
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div。
2. 因为div更加适合做布局容器。
3. id 不是必须为app , 是程序员指定,一般我们就使用app
4.注意代码的顺序，我们要求div在前，script在后，否则无法进行一个绑定。
5.Vue.js采用简洁的模板语法来声明式地将数据渲染进 DOM的系统,做到数据和显示分离
6. Vue没有繁琐的 DOM操作，如果使用jQuery，我们需要先找到 div节点，获取到 DOM 对象,然后进行节点操作,显然Vue更加简洁
3.数据单/双向渲染技术
1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
2. v-model指令 是数据的双向渲染,
(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
3.1数据单向渲染
1.v-bind指令可以用来绑定元素的属性
2.v-bind指令可以完成基本的数据渲染和绑定
3.v-bind指令的简写形式就是一个冒号(:)
举例：
<!DOCTYPE html> <head xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <meta charset="UTF-8"> <title>单向数据渲染</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <!-- 1. 使用插值表达式引用 data数据池数据是在标签体内 2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式 3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析 4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind --> <!--<img src="{{img_src}}">--> <img v-bind:src="img_src" v-bind:width="img_width"> <img :src="img_src" :width="img_width"> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "hello, 你好呀", img_src: "1.jpg", img_width: "200px" } }) console.log("vm=>", vm); </script> </body> </html>
前端结果展示：
3.2数据双向渲染
代码展示：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>双向数据渲染</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <!-- 1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view 2. v-model="hobby.val" 是数据的双向渲染, (1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】 (2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】 --> <input type="text" v-model="hobby.val"><br/><br/> <input type="text" :value="hobby.val"><br/><br/> <p>你输入的爱好是: {{hobby.val}}</p> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "hi, 输入你的爱好", hobby: { val: "吃饭" } } }) console.log("vm=>", vm); </script> </body> </html>
3.2.1数据双向渲染练习题
要求：当在输入框中输入1.jpg/2.jpg/3.jpg的时候会显示不同的图片，用到数据绑定机制来实现
代码展示
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>数据双向绑定机制练习题</title> <script src="vue.js"></script> </head> <body> <div id="app"> 请输入图片编号：<input type="text" v-model="id"><br> <img v-bind:src="id"> </div> <script> let vm = new Vue({ el:"#app", data:{ id:"1.jpg" } }) </script> </body> </html>
4.事件绑定机制
使用v-on进行事件处理,比:v-on:click表示处理鼠标点击事件。
事件调用的方法定义在vue对象声明的 methods节点中。
v-on:事件名可以绑定指定事件。
4.1演示案例
要求点击不同按钮，在控制台输出不同的信息 ，如下图
代码展示：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>事件处理</title> </head> <body> <!--视图--> <div id="app"> <h1>{{message}}</h1> <!-- 1. v-on:click 表示我们要给button元素绑定一个click的事件 2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的 3. 底层仍然是dom处理 4. 如果方法不需要传递参数，可以省略() 5. v-on:click可以简写@, 但是需要浏览器支持 --> <button v-on:click="sayHi()">点击输出</button> <button v-on:click="sayOk()">点击输出</button> <button v-on:click="sayHi">点击输出</button> <button @click="sayOk">点击输出</button> </div> <!--引入我们的vue.js--> <script src="vue.js"></script> <!--创建一个vue实例,并挂载到id=app的div--> <script> //这里创建的Vue实例, 你可以不去接收, 也可以接收 //方便我们调试信息 let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写 data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "Vue事件处理的案例", name: "小名" }, // // 1. 是一个methods属性, 对应的值是对象{} // 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池 // 3. 这里需要小伙伴有js的基础=>java web第4章 methods: { sayHi() { console.log("hi, 111"); }, sayOk() { console.log("ok, 222"); } } }) </script> </body> </html>
4.2抓包处理
我们上述案例中通过按钮，可以在控制台输出不同的内容，那么他和我们的传统js编程有什么区别呢？其实不然，他的核心底层依然是用传统的JavaScript实现的，不过不需要我们程序员去操作。下面我带大家去分析抓包处理一下。
控制台输入vm对象，可以看到vm对象的所有内容
4.3注意事项
如果方法没有参数,可以省略()[需要浏览器支持]
v-on指令的写形式@[需要览器支持]
去相应挂载的vue实例下，查看可以绑定的事件
4.4事件绑定机制的练习题
代码展示
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <button v-on:click="add1()">增加1</button> <button v-on:click="add2()">增加2</button> <h2>你的按钮被点击了{{count}}次了</h2> </div> <script> let vm = new Vue({ el:"#app", data:{ count:0 }, methods:{ add1:function (){ this.count+=1 }, add2(){ this.count+=2 } } }) </script> </body> </html>
题目2:当点击按钮过后，会弹窗出对应的书名：运用到双向绑定。
代码如下：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue时间处理2</title> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> <input placeholder="请输入书名" v-model="bookName"> <button v-on:click="show()">显示{{bookName}}</button> </div> <script> let vm = new Vue({ el:"#app", data:{ bookName:"开心超人", message:"Vue的事件绑定" }, methods:{ show(){ alert("显示书名："+this.bookName); } } }) </script> </body> </html>
5.修饰符
对于事件修饰符的详细信息请按官网查看
1.修饰符(Modifiers)是以(.)指明的后缀,指出某个指令以特殊方式绑定。
2.例如, .prevent修饰符告诉 v-on指令对于触发的事件调用 event.preventDefault()即阻 止事件原本的默认行为
例如：
.stop 组织事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进 行处理
.self 当在 event.target当前元素自身时触处理函数
.once 事件将会触一次
.passive 告诉浏览器你不想阻止事件的默认行为
案例：
演示 v-on:submit.prevent 的使用, 如果没有输入名字，控制台输出 "请输入名
字"，否则输出 "提交表单"
代码展示：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue修饰符使用</title> </head> <body> <div id="app"> <!-- 1. 修饰符用于指出一个指令应该以特殊方式绑定。 2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为 3. 执行 程序员指定的方法 --> <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit"> 妖怪名: <input type="text" v-model="monster.name"><br/><br/> <button type="submit">注册</button> </form> <p>服务返回的数据是{{count}}</p> <h1>修饰符扩展案例</h1> <button v-on:click.once="onMySubmit">点击一次</button><br/> <input type="text" v-on:keyup.enter="onMySubmit"> <input type="text" v-on:keyup.down="onMySubmit"> <input type="text" v-model.trim="count">//将前后默认的空格拿掉,比较实用 </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data: {//数据池 monster: {//monster数据(对象)的属性, 可以动态生成 }, count: 0 }, methods: {//方法池 onMySubmit() { //console.log("我们自己的表单提交处理..."); //"", null, undefined都是false if(this.monster.name) { console.log("提交表单 name=", this.monster.name); //这里，程序员就可以根据自己的业务发出ajax请求到后端 //得到数据后，在进行数据更新 this.count = 666; } else { console.log("请输入名字.."); } } } }) </script> </body> </html>
6.条件渲染(v-if/v-else-if/v-else/v-show)
6,1 用例题帮大家理解
解释一下条件渲染： v-if="awesome" 的时候，会去挂载到这个容器的vue的实例，去对应的数据池里面寻找awesome是否为真，如果为真就会显示h1标签相应的内容。就是我们编程中的if-else语句。
注意！在js中，false的情况有：0 undifine null “” 这些都是为false的情况。
写一个案例：
当点击或不点击复选框的时候，会显示出不同的内容。
代码展示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" v-model="sel">是否同意该条款<br> <h1 v-if="sel">同意该条款</h1> <h1 v-else>不同意该条款</h1> </div> <script> let vm = new Vue({ el:"#app", data:{ sel:"fasle" } }) </script> </body> </html>
如果将v-if 用v-show去实现，如下代码所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-show</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" v-model="sel">是否同意该条款<br> <h1 v-show="sel">同意该条款</h1> <h1 v-show="!sel">不同意该条款</h1> </div> <script> let vm = new Vue({ el:"#app", data:{ sel:"fasle" } }) </script> </body> </html>
6.2 v-if 和v-else的区别
1、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
2、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
3、使用建议：如果要频繁地切换，建议使用 v-show ；如果运行时条件很少改变，使用 v-if 较好
下面对我们的区别进行抓包的详细解释：
对于v-if是真正的实现组件的销毁和重建，所消耗的性能比较大【只有一个h1标签】
对于v-show 仅仅就是css样式的改变(也可以调用相应的vue实例去看底层的属性，加强理解)
【这里有两个h1标签】
6.3 相关案例练习(有兴趣可以试试看)
输入不同的成绩显示不同的优秀程度，并且当超出输入值的范围，进行文本框中的值进行修改
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>练习题</title> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> 请输入1-100的成绩：<input v-on:blur="s" type="text" v-model="score"><br> <p>您输入的成绩是{{score}}</p> <span v-if="score>=90">优秀</span> <span v-else-if="score>=80">良好</span> <span v-else-if="score>=70">中</span> <span v-else-if="score>=60">及格</span> <span v-else-if="score<60">不及格</span> </div> <script> let vm = new Vue({ el:"#app", data:{ message:"条件渲染案例", score:0 }, methods:{ s(){ if(this.score > 100) { this.score = 100; } if(this.score < 0) { this.score = 0; } } } }) </script> </body> </html>
7.列表渲染 (v-for)
这里我们会去官网上查看
列表渲染官方文档
7,1 列表渲染相关方法
7.2列表渲染应用实例
1.输出列表相应的值，包括索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> <script src="vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in array"> {{item.message}}--{{index}} </li> </ul> </div> <script> let vm = new Vue({ el:"#app", data:{ mes:"列表渲染技术", array:[ {message:1}, {message:2}, {message:3} ] } }) </script> </body> </html>
2.遍历输出数组中各个对象的属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> <script src="vue.js"></script> </head> <body> <div id="app"> <table width="400px" border="1=px"> <tr v-for="item in array"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> </tr> </table> </div> <script> let vm = new Vue({ el:"#app", data:{ mes:"列表渲染技术", array:[ {id:1,name:"小王",price:200}, {id:2,name:"小红",price:400}, {id:3,name:"小明",price:300} ] } }) </script> </body> </html>
8.组件化编程
1. 在大型应用开发的时候，页面可以划分成很多部分，往往不同的页面，也会有相同的部 分。例如可能会有相同的头部导航。 2. 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不 同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发 组件 (Component) 是 Vue.js 最强大的功能之一 ( 可以提高复用性 [1. 界面 2. 业务处理 ]) 组件也是一个 Vue 实例，也包括∶ data 、 methods 、生命周期函数等 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 对于全局组件，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件 data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象 / 数据
8.1 全局组件
全局组件就相当于java中的一个类，当你用到该组件的时候，就相当于创建了一个实例，里面的数据是独占的，不是共享的，用的vue实例的数据池是共享的。
有许多微小的差别具体代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件化编程-全局组件</title> </head> <body> <div id="app"> <h1>组件化编程-全局组件</h1> <!--使用全局组件--> <counter></counter> <br/> <counter></counter> </div> <script src="vue.js"></script> <script> //1、定义一个全局组件, 名称为 counter //2. {} 表示就是我们的组件相关的内容 //3. template 指定该组件的界面, 因为会引用到数据池的数据，所以需要是模板字符串 //4. 要把组件视为一个Vue实例，也有自己的数据池和methods //5. 对于组件，我们的数据池的数据，是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式 //6. 这时我们达到目前，界面通过template实现共享,业务处理也复用 //7. 全局组件是属于所有vue实例，因此，可以在所有的vue实例使用 Vue.component("counter", { template: `<button v-on:click="click()">点击次数= {{count}} 次【全局组件化】</button>`, data() {//这里需要注意，和原来的方式不一样!!!! return { count: 10 } }, methods: { click() { this.count++; } } }) //创建Vue实例，必须有 let vm = new Vue({ el: "#app"//Vue实例的挂载点 }) </script> </body> </html>
8.2局部组件
局部组件：不同于全局组件，局部组件是要引入到某个vue实例中，由挂载了这个vue实例的容器去使用（可以将局部组件放入到js文件中，当我们要用到该组件的时候就导入包即可）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件化编程-局部组件</title> </head> <body> <div id="app"> <h1>组件化编程-局部组件</h1> <!--使用局部组件 ,该组件是从挂载到app的vue中的--> <my_counter></my_counter><br/> <my_counter></my_counter><br/> <my_counter></my_counter><br/> </div> <script src="vue.js"></script> <script> //定义一个组件, 组件的名称为 buttonCounter //1. 可以把常用的组件，定义在某个commons.js中 export //2. 如果某个页面需要使用， 直接import const buttonCounter = { template: `<button v-on:click="click()">点击次数= {{count}} 次【局部组件化】</button>`, data() {//这里需要注意，和原来的方式不一样!!!! return { count: 10 } }, methods: { click() { this.count++; } } } //创建Vue实例，必须有 let vm = new Vue({ el: "#app",//Vue实例的挂载点 components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vue 'my_counter': buttonCounter } }) </script> </body> </html>
8.3注意事项
1. 如果方法体 , 只有简单的语句 , 比如 count++, 那么可以进行简写 如： < button v-on :click ="count++" > 点 击 次 数 = {{count}} 次< button> 2. 组件定义需要放置在 new Vue() 前，否则组件注册会失败 3. 组件也是一个 Vue 实例，因此它的定义是也存在∶ data、methods、生命周期函数等
4. data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据
5. 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 6. 全局组件是属于所有vue实例，因此，只有被vue实例挂载了过后才能使用全局组件
9.生命周期和钩子函数
1. Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载 DOM 、渲染 - 更新 - 渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期 2. 钩子函数 ( 监听函数 ): Vue 实例在完整的生命周期过程中 ( 比如设置数据监听、编译模 板、将实例挂载到 DOM 、在数据变化时更新 DOM 等 ), 也会运行叫做生命周期钩子的函 数 3. 钩子函数的作用 就是在某个阶段 , 给程序员一个做某些处理的机会
vue实例的生命周期图
解释生命周期图：
1 在new vue()的时候，vue实例被创建，他会在内存里面维护一个编译模版。此时在beforeCreate只有比如data数据池，methods方法池的加载，但此时并没有具体数据的初始化。
2 在created的时候里面的数据才被真正的初始化
3 接下来判断vue实例是否有el属性，并且有template模版，有的话，在内存的编译模版里面，先将template模版进行解析，形成内存编译模版结构，也就是vue在内存里面维护了一个这样的模版，但是此时并没有将内存模版挂载到div上所以用户看不到。
如果没有template就会编译一些vue的一些基础的属性。
在beforeMount前都没有挂载到div上，前端界面看不到，但是在内存里面已经编译好了
4 在Mount过后，将内存的模版挂载到前端界面，此时用户看到了渲染后的结果
5. 在Mount时，会时刻监听vue实例中的数据池是否发生变化，如果发生变化在beforeUpdate函数中，就会将内存中的数据加以改变，在重新将模版挂载到div上，updated函数进行更新渲染。
6.就是实例销毁时，调用beforeDestory，和destory函数。
以上就是一个完整的vue的生命周期，请参照链接的图理解，讲的不好，多多指教！
下面是老师解读！
1) new Vue()
new 了一个 Vue 的实例对象，此时就会进入组件的创建过程。
2) Init Events & Lifecycle
初始化组件的事件和生命周期函数
3) beforeCreate
组件创建之后遇到的第一个生命周期函数，这个阶段 data 和 methods 以及 dom 结构都未
被初始化，也就是获取不到 data 的值，不能调用 methods 中的函数
4) Init injections & reactivity
这个阶段中, 正在初始化 data 和 methods 中的方法
5) created
- 这个阶段组件的 data 和 methods 中的方法已初始化结束，可以访问，但是 dom 结构未
初始化，页面未渲染
- 老师说明：在这个阶段，经常会发起 Ajax 请求
6) 编译模板结构(在内存)
7) beforeMount
当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据
8) Create vm.$el and replace ‘el’ with it
这一步，再在把内存中渲染好的模板结构替换至真实的 dom 结构也就是页面上
9) mounted
此时，页面渲染好，用户看到的是真实的页面数据， 生命周期创建阶段完毕，进入到了运
行中的阶段
10) 生命周期运行中
10.1 beforeUpdate
当执行此函数，数据池的数据新的，但是页面是旧的
10.2 Virtual DOM re-render and patch
根据最新的 data 数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面
上
10.3 updated
页面已经完成了更新，此时，data 数据和页面的数据都是新的
11) beforeDestroy
当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的 data、methods
数据或方法 还可被调用
12) Teardown…… 注销组件和事件监听
13) destroyed
组件已经完成了销毁
对重要阶段的钩子函数进行案例分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--这里可以视为用户看到的页面-对应前面讲解的页面dom--> <div id="app"> <span id="num">{{num}}</span> <button @click="num++">赞！</button> <h2>{{name}}，有{{num}}次点赞</h2> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", data: {//数据池 name: "kristina", num: 0 }, methods: { show() { return this.name; }, add() { this.num++; } }, beforeCreate() {//生命周期函数-创建vue实例前 console.log("=============beforeCreate=========="); console.log("数据模型/数据池的数据是否加载/使用?[no]", this.name, " ", this.num); //console.log("自定义方法是否加载/使用?[no]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText); }, created() {//生命周期函数-创建vue实例 console.log("=============created=========="); console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num); console.log("自定义方法是否加载/使用?[yes]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText); //可以发出Ajax //接收返回的数据 //再次去更新data数据池的数据 //编译内存模板结构 //..... }, beforeMount() {//生命周期函数-挂载前 console.log("=============beforeMount=========="); console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num); console.log("自定义方法是否加载/使用?[yes]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText); }, mounted() {//生命周期函数-挂载后 console.log("=============mounted=========="); console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num); console.log("自定义方法是否加载/使用?[yes]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom是否被渲染?[yes]", document.getElementById("num").innerText); }, beforeUpdate() {//生命周期函数-数据池数据更新前 console.log("=============beforeUpdate=========="); console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num); console.log("自定义方法是否加载/使用?[yes]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom数据是否被更新?[no]", document.getElementById("num").innerText); //验证数据==>修正 // if(this.num < 10 ) { // this.num = 8; // } }, updated() {//生命周期函数-数据池数据更新后 console.log("=============updated=========="); console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num); console.log("自定义方法是否加载/使用?[yes]", this.show()); console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num")); console.log("用户页面dom数据是否被更新?[yes]", document.getElementById("num").innerText); } }) </script> </body> </html>
抓包分析
10.vue Cli脚手架模块化开发
目前开发模式的问题 1. 开发效率低 2. 不够规范 3. 维护和升级 , 可读性比较差 vue Cli脚手架可以帮我们搭建框架，程序员只需要将框架的内容写完就好了。易于开发和维护。
10.1用webpack来创建vue Cli脚手架项目
最后看到的界面如下所示：
10.2 Vue Cli中项目结构的分析 (如图所示)
!!!10.3Vue请求页面的执行流程
由上述三个图片，可以了解vue Cli脚手架请求页面的流程：
首先就是main,js是程序的入口，创建了一个vue的实例，并将该实例挂载到id=app的容器中。
再去router路由找到目录router/index,js：上面导出默认的路由（可以看成组件默认导出），路由中的component组件去HelloWord.vue中寻找里面就是对文字及其内容的一个渲染、。最后渲染后的路由界面，会以路由视图的形似返回到vue实例中。
vue实例中的component和template模版是这个vue实例的渲染模版，在里面就是一张图片。当vue实例在内存中维护的编译模版完成后，将vue实例挂载到index.html前端界面中进行挂载。
11. vue-ElementUI
Element-UI的官网
ElementUI 是组件库，网站快速成型工具
11.1安装Element-ui的指令
安装 element-ui 组件库, cmd 下进入到项目，指令 npm i element-ui@2.12.0
10.2初步使用Element-UI应用实例
1. 首先第一步，要引入Element-UI
2. 比如我要引用提供的icon图标
3. 在vue组件的代码中引入上述代码运行即可得到
希望小伙伴多多关注！
