Vue从入门到精通（第一章 vue核心）

第一章 Vue核心
1. Vue简介
- 1.1 Vue是什么？
- 1.2 Vue的作者以及迭代版本
- 1.3 Vue的特点
2. 搭建Vue开发环境
- 2.1 安装Vue的方式
- - 2.1.1 第一种安装方式：直接使用script标签引入
  - 2.1.2 第二种安装方式：使用NPM
- 2.2 Vue小案例
- 2.3 总结
3. Vue模板语法
4. el和data的两种写法
- 4.1 el的两种写法
- 4.2 data的两种写法
5. 数据绑定
6. MVVM模型
7. 数据代理
- 7.1 Object.definedProperty
- - 7.1.1 definedProperty 方法中的配置项
  - 7.1.2 definedProperty 方法中的getter/setter
- 7.2 何为数据代理
- 7.3 Vue中的数据代理
8. 事件处理
- 8.1事件的基本使用
- 8.2 事件修饰符
- - 8.2.1 阻止默认事件
  - - 8.2.1.1 传统方式使用event.preventDefault()阻止默认事件
    - 8.2.1.2 使用Vue提供的事件修饰符阻止默认事件
  - 8.2.2 阻止事件冒泡
  - - 8.2.2.1 传统阻止事件冒泡方式
    - 8.2.2.2 Vue中阻止事件冒泡方式(stop)
  - 8.2.3 事件只触发一次
- 8.3 键盘修饰符
9. 计算属性与监视属性
- 9.1 计算属性
- - 9.1.1 姓名案例--插值语法实现
  - 9.1.2 姓名案例--methods实现
  - 9.1.3 计算属性实现
  - - 9.1.4 计算属性的简写形式
- 9.2 监视属性
- - 9.2.1 天气案例
  - 9.2.2 天气案例—监视属性
  - 9.2.3 天气案例--深度监视
  - 9.2.4 监视的简写形式
- 9.3 watch与computed的比较
10. class与style绑定
11. 条件渲染
12. 列表渲染
- 12.1 列表渲染简介
- 12.2 key的作用与原理
- - 12.2.1 遍历列表时index作为key
  - 12.2.2 遍历时使用id作为key
- 12.3 列表过滤
- 12.3 列表排序
- 12.4 更新数据出现的问题
- 12.5 模拟一个数据检测
- - 12.6 Vue.set()
  - 12.7 Vue监视数据总结
- 13. 收集表单数据
- 14 过滤器
- 15.内置指令
- - 15.1 v-text指令
  - 15.2 v-html指令
  - 15.3 v-cloak指令
  - 15.4 v-once指令
  - 15.5 v-pre指令
  - 15.6 自定义指令-函数式
  - 15.7 自定义指令-对象式
  - 15.8 自定义指令总结
  - - 15.8.1 自定义指令命名过长问题
    - 15.8.2 自定义指令中this问题
- 16.Vue实例生命周期
- - 16.1 引出生命周期
  - 16.2 Vue生命周期

第一章 Vue核心

1. Vue简介

1.1 Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：将数据变成用户可以看到的界面
渐进式：是指Vue可以自底向上逐层的应用
- 对于简单应用，只需要轻量小巧的核心库
- 对于复杂应用，可以引入各种Vue插件

1.2 Vue的作者以及迭代版本

1.3 Vue的特点

采用组件化的模式，提高代码复用率，并且让代码更好的维护

Vue将相近的部分封装成一个模块，一个模块中包含html，css，js代码，模块可以在任何地方复用，若修改模块中的内容不会影响其他模块

声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM + Diff算法，尽可能复用DOM节点

原生js实现数据更新时会覆盖原来的数据，效率较低

Vue会将数据先变成虚拟DOM，这样如果数据有变换时，使用Diff算法进行比较，如果新的虚拟DOM与旧的虚拟DOM中有相同的DOM，那么直接复用，能够极大的提升效率

2. 搭建Vue开发环境

2.1 安装Vue的方式

2.1.1 第一种安装方式：直接使用script标签引入

使用本地文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue之后，浏览器中会存在Vue构造函数，可在控制台输入Vue进行验证--><script src="./vue.js"></script><!-- 使用vue开发版本时，浏览器会有相关提示,提示如下，关闭可使用以下代码You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.htmlVue.config 是一个对象，包含Vue的全局配置，一次修改，处处可用，可以在启动应用之前修改相关属性--><script>Vue.config.productionTip = false;</script>
</head>
<body></body>
</html>

使用CDN

xxxxxxx

2.1.2 第二种安装方式：使用NPM

XXXX

2.2 Vue小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head>
<body><!-- 准备一个容器 --><div id="root"><h1>{{ name }}</h1></div><script>Vue.config.productionTip = false;   // 阻止浏览器生成生产提示/*  创建Vue实例，new的时候只传入一个参数，并且这个参数是一个对象，此对象称为配置对象配置对象中的key是固定的，value值也是固定的数据类型*/const x = new Vue({// el是element的简称，它用于指定当前的Vue实例为哪个容器服务，值通常为css选择器字符串// 也可用为 el:document.getelementById('root')el:"#root",   // data中用于存储数据，数据供el所指定的容器使用，其他容器不能使用data:{name:'玉米'}})</script>
</body>
</html>

2.3 总结

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
2.js代码(语句)
(1). if(){}
(2). for(){}

3. Vue模板语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板语法</title><!-- 第一步：引入vue --><script src="./vue.js"></script>
</head><body><!-- Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。2.指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。--><!-- 准备一个容器 --><div id="root"><h1>插值语法</h1><h1>Hello {{ name }}</h1><hr><h1>指令语法</h1><!-- 1. a标签中href变成v-bind:href后，vue会将后面引号中的内容当作js表达式执行2. v-bind可以给标签中的任何属性动态绑定值   例如 <a v-bind:href="url" v-bind:x = "hello">点击跳转</a>3. v-bind可简写为：   例如 v-bind:href 可简写为 :href4. v-bind数据绑定为单向的，vue实例中数据的变化会影响页面，反之不会影响--><a v-bind:href="web.url">点击跳转到 {{ web.name }}</a></div><script>new Vue({el: "#root",data: {name: 'zhangsan',web:{name:"baidu",url: "www.baidu.com"}  }})</script>
</body>
</html>

4. el和data的两种写法

4.1 el的两种写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><!-- 第一步：引入vue --><script src="./js/vue.js"></script>
</head>
<body><!-- 准备一个容器 --><div id="root"><h1>{{ name }}</h1></div><script>/*第一种el的写法，也是初学时最常使用的方式这种方式实现时是在实例化vue的时候就指定所服务的容器，以达到vue实例与容器关联的目的  */// new Vue({//     el:"#root",//     data:{//         name:"zhangsan"//     }// })/*第二种el的写法1. 首先声明一个变量，保存vue实例，然后输出，查看实例的具体内容，如下图所示2. 在下图中第一个框中以$符开头的是vue为开发人员提供的，其他不以$开头的不是直接为开发人   员使用的，vue底层会调用。3. 下图中第二个框中是vue原型对象中的方法(详细内容可见第二幅图)，在其原型对象中有一个$mount方法，使用$mount("#root")也可实现el:"#root"同样的功能，而且更加灵活，可以在任何需要的时刻指定容器*/const v = new Vue({data:{name:"zhangsan"}})console.log(v)// 将v.$mount("#root")放到定时器中，使其经过2秒中再关联容器setInterval(() => {v.$mount("#root")}, 2000);</script>
</body>
</html>

4.2 data的两种写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><!-- 第一步：引入vue --><script src="./js/vue.js"></script>
</head><!-- data与el的2种写法1.el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。2.data有2种写法(1).对象式(2).函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。3.一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。--><body><!-- 准备一个容器 --><div id="root"><h1>{{ name }}</h1></div><script>// data的第一种写法：对象式// new Vue({//     el:"root",//     data:{//         name:"zhangsan"//     }// })// data的第二种写法：函数式/* 此写法要求必须返回一个对象，对象中的数据，就是运行中所使用的数据使用组件时，必须使用函数式写法*/new Vue({el: "#root",// 普通函数式写法// data:function(){//     // 这种写法中，this是Vue实例//     return {//         name:"zhangsan"//     }// }// 简单函数式写法// data() {//     // 这种写法中，this是Vue实例//     return {//         name: "zhangsan"//     }// }// data:()=>{//     // 如果使用箭头函数，this则是window，一定不能使用箭头函数//     return {//         name:"zhangsan"//     }// }})</script>
</body>
</html>

5. 数据绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据绑定</title><!-- 第一步：引入vue --><script src="./js/vue.js"></script>
</head><body><!-- Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面。2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：1.双向绑定一般都应用在表单类元素上（如：input、select等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。--><div id="root"><!-- 普通写法 --><!-- 单向数据绑定 <input type="text" v-bind:value="name"><br>双向数据绑定 <input type="text" v-model:value="name"> --><!-- 简单写法 -->单向数据绑定 <input type="text" :value="name"><br>双向数据绑定 <input type="text" v-model="name"><!-- 如下代码式错误的，因为v-model只能应用在表单类元素(输入类元素)上简单理解就是元素要有value属性才能使用v-model--><h2 v-model:x="name">hello</h2></div><script>new Vue({el: "#root",data: {name: "zhangsan"}})</script>
</body></html>

6. MVVM模型

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>理解MVVM</title><!-- 引入Vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><!-- MVVM模型1. M：模型(Model) ：data中的数据2. V：视图(View) ：模板代码3. VM：视图模型(ViewModel)：Vue实例观察发现：1.data中所有的属性，最后都出现在了vm身上，如下图中红色框所示。2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用，如容器中测试所见。--><!-- 准备好一个容器--><div id="root"><h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1><!-- <h1>测试一下1：{{1+1}}</h1><h1>测试一下2：{{$options}}</h1><h1>测试一下3：{{$emit}}</h1><h1>测试一下4：{{_c}}</h1> --></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'baidu',address:'北京',}})console.log(vm)</script>
</html>

7. 数据代理

7.1 Object.definedProperty

definedProperty 方法作用是给一个对象添加属性

7.1.1 definedProperty 方法中的配置项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let num = 18;let person = {name:"zhangsan",sex:"nan"}// 需求：给person对象添加一个属性age，值为18/*参数一：操作的对象参数二：要添加的属性明参数三：配置项*/Object.defineProperty(person, 'age',{value:18,/*enumerable控制属性是否可以枚举，默认为false，表示不可枚举 例如：1.如果此属性的值为false，那么使用console.log(person)输出时会看到age与其他的属性值呈现出不同的颜色2. 如果使用console.log(Object.keys(person))遍历时，不能遍历到age属性*/enumerable:true,/* 控制属性是否可以被修改，默认为false，表示不能被修改  例如：如果在控制台使用person.age = 19 修改age的值时，会发现虽然控制台返回19，但是实际上person中age的值仍为18*/writable:true,    /*控制属性是否可以被删除，默认值为false，表示不可被删除例如：在控制台中使用delete person.age 删除age属性时，会返回false*/configurable:true,})console.log(person)</script>
</body>
</html>

7.1.2 definedProperty 方法中的getter/setter

注意：当definedProperty 方法的配置项中使用getter/setter方法时，不能出现value/writable 属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let num = 180;let person = {name:"zhangsan",sex:"nan"}// 需求：给person对象添加一个属性age，让其值为num的值/*参数一：操作的对象参数二：要添加的属性明参数三：配置项*/Object.defineProperty(person, 'age',{// 当有人读取person的age属性时，get函数(也称为getter)就会被调用，并且返回就是age的值// get:function(){get(){  //get:function() 可简写为 get()console.log("person.age被读取了");return num;},// 当有人修改person的age的属性时，set函数(setter)就会被调用，且会收到修改的具体值set(value){console.log("person.age被修改了, 新值为：",value);num = value;}})console.log(person)</script>
</body>
</html>

7.2 何为数据代理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>何为数据代理</title>
</head>
<body><!-- 数据代理：通过一个对象代理对另一个对象属性的操作(读或者写) --><script>// 定义两个对象 obj1 和 obj2let obj1 = {x:100};let obj2 = {y:100};// 给defineProperty函数中设置的操作对象为obj2，操作属性为xObject.defineProperty("obj2", "x", {// 当获取x的值时实际上返回的是obj1.x的值get(){return obj1.x;},// 当设置x的值时实际上设置的是obj1.x的值set(value){obj1.x = value;}})</script>
</body>
</html>

7.3 Vue中的数据代理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue中的数据代理</title><script src="./js/vue.js"></script>
</head><body><!-- 1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。--><!-- 准备好一个容器--><div id="root"><h1> {{ name }}</h1><h2>{{ address }}</h2></div><!-- 第一层理解：在vue实例中data属性里存在的数据会被添加到vue实例中，成为vue实例中的属性在控制台中输入vm并回车可看到下图所示，1，3号框为添加到vue实例中的属性，当鼠标放到2，4号框时会显示调用属性getter，这表明，name和address中的值是从别的地方获取到的vue实例中添加的name和address属性有相应的getter和setter为其服务，具体见图2通过vm读取data中的属性，是使用对应的getter方法，修改data中的属性，也是使用对应的setter方法，此为数据代理第二层理解：vue中传入的data属性并不能在实例中直接看到，其中的数据以_data属性存储，即vm._data === data但是如果直接按照以前的方式写是不能访问到的，因此将里面的数据存入到一个对象中，将此对象传给data如下这种方式：<script>let data = {name:"zhangsan",address:"beijing"}const vm = new Vue({el:"#root",data:data})</script>new vue时传入的配置对象可称为options，因此vm._data === optinos.data === data--><script>let data = {name: "zhangsan",address: "beijing"}const vm = new Vue({el: "#root",data: data})</script>
</body></html>

当编写完vue代码之后 (如下图左上角)，会生成一个vue实例 (如下图左下角)，在vue实例中会将原始代码中的数据完整的复制到_data属性中，截至到这里并没有数据代理的影子，随后使用Object.defineProerty方法向vm实例中添加属性，属性的来源为_data中的属性以及值，当读取或者修改vm对象中的name或address时，实际上是通过数据代理修改vm内部中_data中的name和address，因此下图中右下角紫色和橘色的线才是数据代理，这种数据代理的实现方式目的是为了让编码更方便，否则在页面中就要使用{{ _data.name }} 来展示数据，有了数据代理之后就可以使用 {{ name }} ，本质是读取_data中的name值

8. 事件处理

8.1事件的基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的基本使用</title><script src="./js/vue.js"></script>
</head><body><!-- 事件的基本使用：1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；--><div id="root"><h1>{{name}}</h1><!-- v-on:click="showInfo1"的意思是当button元素被点击的时候执行showInfo1函数--><button v-on:click="showInfo1">点击提示信息</button><!-- @click 是 v-on:click的简写形式 --><button @click="showInfo2(123)">点击提示信息2</button></div><script>new Vue({el: "#root",data: {name: "zhangsan"},methods: {showInfo1() {alert("hello")},showInfo2(num) {console.log(event.target.innerText)  // 函数中默认会传输event对象alert(num)}}})</script>
</body></html>

8.2 事件修饰符

 <!-- Vue中的事件修饰符：1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；-->

8.2.1 阻止默认事件

8.2.1.1 传统方式使用event.preventDefault()阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><!-- 为a标签添加一个点击事件，默认情况下，点击a标签之后，就会跳转到href指定的地址，为了阻止默认事件，可在showInfo中使用event.preventDefault()--><a href="http://www.baidu.com" @click = "showInfo">点我提示信息</a></div><script>new Vue({el:"#root",methods:{showInfo(){event.preventDefault()   // 阻止默认事件发生alert("hello")}}})</script>
</body>
</html>

8.2.1.2 使用Vue提供的事件修饰符阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><!-- 在a标签中将@click变成@click.prevent即可阻止默认跳转事件的发生--><a href="http://www.baidu.com" @click.prevent = "showInfo">点我提示信息</a></div><script>new Vue({el:"#root",methods:{showInfo(){alert("hello")}}})</script>
</body>
</html>

8.2.2 阻止事件冒泡

8.2.2.1 传统阻止事件冒泡方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><!-- 外层div 和 内部的button均绑定了点击事件，当点击了内部的button时，冒泡行为会使得div也指定showInfo方法 --><div class="demo1" @click = "showInfo"><button @click = "showInfo">点我提示信息</button></div></div><script>new Vue({el:"#root",methods:{showInfo(){// 传统方式使用 event.stopPropagation();阻止事件向外冒event.stopPropagation();alert("hello")}}})</script>
</body>
</html>

8.2.2.2 Vue中阻止事件冒泡方式(stop)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><!-- 外层div 和 内部的button均绑定了点击事件，当点击了内部的button时，冒泡行为会使得div也指定showInfo方法 --><div class="demo1" @click = "showInfo"><!-- Vue中使用@click.stop阻止事件向外冒 --><button @click.stop = "showInfo">点我提示信息</button></div></div><script>new Vue({el:"#root",methods:{showInfo(){alert("hello")}}})</script>
</body>
</html>

8.2.3 事件只触发一次

<body><div id="root"><!-- Vue中使用@click.once限定button只能够点击一次 --><button @click.once="showInfo">点我提示信息</button></div><script>new Vue({el: "#root",methods: {showInfo() {alert("hello")}}})</script>
</body>

8.3 键盘修饰符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>键盘事件</title><script src="./js/vue.js"></script>
</head><body><!-- 1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名--><div id="root"><!-- v-on:keyup 这种情况下只要有键盘按下再抬起，就会执行showInfo方法 --><!-- <input type="text" placeholder="按下回车提示输入" v-on:keyup = "showInfo"> --><!-- 如果想要按下回车再执行showInfo方法，可用 v-on:keyup.enter --><input type="text" placeholder="按下回车提示输入" v-on:keyup.enter="showInfo"></div><script>new Vue({el: "#root",methods: {showInfo() {console.log(event.target.value)}}})</script>
</body></html>

9. 计算属性与监视属性

9.1 计算属性

9.1.1 姓名案例–插值语法实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_插值语法实现</title><script src="./js/vue.js"></script>
</head>
<body><div id="root">姓：<input type="text" v-model:value="firstname"><br><br>名: <input type="text" v-model= "lastname"><br><br>全名：<span>{{firstname}} - {{lastname}}</span></div><script>new Vue({el:"#root",data:{firstname:"zhang",lastname:"san"}})</script>
</body>
</html>

9.1.2 姓名案例–methods实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_插值语法实现</title><script src="./js/vue.js"></script>
</head>
<body><div id="root">姓：<input type="text" v-model:value="firstname"><br><br>名: <input type="text" v-model= "lastname"><br><br>全名：<span>{{ fullname() }}</span></div><script>new Vue({el:"#root",data:{firstname:"zhang",lastname:"san"},methods:{fullname() {// 在函数中要使用this访问vue实例中的属性，否则直接访问就会报错return this.firstname + "-" + this.lastname}}})</script>
</body>
</html>

9.1.3 计算属性实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性实现</title><script src="./js/vue.js"></script>
</head><body><!-- 计算属性：1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注：1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。--><div id="root">姓：<input type="text" v-model:value="firstname"><br><br>名: <input type="text" v-model="lastname"><br><br>全名：<span>{{ fullname }}</span></div><script>new Vue({el: "#root",data: {firstname: "zhang",lastname: "san"},/*对于Vue中的data和mothods来说，其内部的属性就是属性，内部的方法就是方法，而对于computed来说，将其内部的fullname属性放到vm上时，是调用set方法得到的返回值作为vm.fullname的值*/computed: {fullname: {/*get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值get什么时候调用？1. 初次读取fullname时2. 所依赖的数据发生变换时*/get() {// console.log(this)  // 此处的this时vmreturn this.firstname + "-" + this.lastname},// 当修改fullname的值时，就需要使用set方法set(value) {const arr = value.split("-")this.firstname = arr[0]this.lastname = arr[1]}}}})</script>
</body>
</html>

9.1.4 计算属性的简写形式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性实现</title><script src="./js/vue.js"></script>
</head><body><div id="root">姓：<input type="text" v-model:value="firstname"><br><br>名: <input type="text" v-model="lastname"><br><br>全名：<span>{{ fullname }}</span></div><script>new Vue({el: "#root",data: {firstname: "zhang",lastname: "san"},computed: {// 计算属性的完整写法// fullname: {//     get() {//         return this.firstname + "-" + this.lastname//     },//     set(value) {//         const arr = value.split("-")//         this.firstname = arr[0]//         this.lastname = arr[1]//     }// }// 第一种简写方式：/*一般来说计算属性只会用来展示，不会进行修改，因此可用对上述完整写法进行简写，function函数当成get函数*/// fullname:function() {//         return this.firstname + "-" + this.lastname//     }// }// 第二种简写方式：// 上述写法可进一步简写为fullname() {return this.firstname + "-" + this.lastname}}}})</script>
</body>
</html>

9.2 监视属性

9.2.1 天气案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><!-- <button @click="isHot = !isHot">切换天气</button> --><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},})</script>
</html>

9.2.2 天气案例—监视属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script type="text/javascript" src="./js/vue.js"></script>
</head><body><!-- 监视属性watch：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：(1). new Vue时传入watch配置(2). 通过vm.$watch监视--><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',data: {isHot: true,},computed: {info() {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather() {this.isHot = !this.isHot}},// 第一种监视属性的写法// watch:{//     isHot:{//         // immediate的作用是初始化时就调用handler//         immediate:true,  //         /*//              handler什么时候调用？当isHot发生改变时,//              并且调用时会返回修改前的值以及修改后的值//         *///         handler(newValue, oldValue){//             console.log("ishot被监视了",newValue, oldValue)//         }//     }// }})// 第二种监视属性的写法， 通过此方法监视时注意要在监视属性上加上引号vm.$watch('isHot', {immediate: true,handler(newValue, oldValue) {console.log("ishot被监视了", newValue, oldValue)}})
</script></html>

9.2.3 天气案例–深度监视

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例</title><!-- 引入Vue --><script type="text/javascript" src="./js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><br><br><button v-on:click="num.a++">为a加1</button> <span>a的值为: {{num.a}}</span><br><br><button v-on:click="num.b++">为b加1</button> <span>a的值为: {{num.b}}</span></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',data: {isHot: true,num: {a: 1,b: 2}},computed: {info() {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather() {this.isHot = !this.isHot}},watch: {isHot: {immediate: true,handler(newValue, oldValue) {console.log("ishot被监视了", newValue, oldValue)}},num:{deep:true,  // 默认情况下，watch是不能监视到多层属性的handler() {console.log("num中的值被改变了")}}}})</script>
</html>

9.2.4 监视的简写形式

监视简写的前提时只使用handler一个属性，deep、immediate等均不使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例_监视属性_简写</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},watch:{//正常写法/* isHot:{// immediate:true, //初始化时让handler调用一下// deep:true,//深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}, *///简写/* isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)} */}})//正常写法/* vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下deep:true,//深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}) *///简写/* vm.$watch('isHot',function(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)}) */</script>
</html>

9.3 watch与computed的比较

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_watch实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- computed和watch之间的区别：1.computed能完成的功能，watch都可以完成。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。两个重要的小原则：1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，因为箭头函数没有自己的this，它的this继承自外部函数的作用域。这样this的指向才是vm 或 组件实例对象。--><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{console.log(this)this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}})</script>
</html>

10. class与style绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><script src="./js/vue.js"></script><style>.basic {width: 400px;height: 100px;border: 1px solid black;}.happy {border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad {border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal {background-color: skyblue;}.atguigu1 {background-color: yellowgreen;}.atguigu2 {font-size: 30px;text-shadow: 2px 2px 10px red;}.atguigu3 {border-radius: 20px;}</style>
</head><body><div id="root"><!-- 绑定class样式 --- 字符串写法， 适用于：样式的类名不确定，需要动态指定的情况 --><div class="basic" v-bind:class="mood" v-on:click="changeClass">{{ name }}</div><!-- 绑定class样式 --- 数组写法，适用于：要绑定的样式个数不确定，名字也不确定 --><div class="basic" v-bind:class="classArr">{{ name }}</div><!-- 绑定class样式 --- 对象写法，适用于：要绑定的样式个数确定，名字不确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{ name }}</div><!-- 绑定class样式 --- 对象写法： --><div class="basic" :style="styleObj">{{ name }}</div><!-- 绑定class样式 --- 数组写法： --><div class="basic" :style="styleArr">{{ name }}</div></div><script>Vue.config.productTip = false;new Vue({el: "#root",data: {name: "zhangsan",mood: "normal",classArr: ['atguigu1', 'atguigu2', 'atguigu13'],classObj: {atguigu1: false,atguigu2: true},styleObj: {backgroundColor: "red"},styleObj2: {fontSize: '40px',color: 'blue',},styleArr: [{fontSize: '40px',color: 'blue',}, {backgroundColor: "red"}]},methods: {changeClass() {this.mood = "sad"}}})</script>
</body></html>

11. 条件渲染

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>条件渲染</title><script  src="./js/vue.js"></script></head><body><!-- 条件渲染：1.v-if写法：(1).v-if="表达式" (2).v-else-if="表达式"(3).v-else="表达式"适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.v-show写法：v-show="表达式"适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。--><!-- 准备好一个容器--><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><!-- <h2 v-show="false">欢迎来到{{name}}</h2> --><!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> --><!-- 使用v-if做条件渲染 --><!-- <h2 v-if="false">欢迎来到{{name}}</h2> --><!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> --><!-- v-else和v-else-if --><!-- <div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>哈哈</div> --><!-- v-if与template的配合使用,但是template不能和v-show配合使用 --><template v-show="n === 1"><h2>你好</h2><h2>张三</h2><h2>北京</h2></template></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'张三',n:0}})</script>
</html>

12. 列表渲染

12.1 列表渲染简介

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title><script src="./js/vue.js"></script>
</head><body><!-- v-for指令:1.用于展示列表数据2.语法：v-for="(item, index) in xxx" :key="yyy"3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）--><div id="root"><ul><!-- 遍历数组遍历时，第一个参数是数组中的对象，第二个参数是索引--><li v-for="(s, index) in students" :key="index">{{s.id}} - {{s.name}} - {{s.age}}</li><br><br><!-- 遍历对象遍历是，第一个参数是对象中的属性值，第二个参数是属性名--><li v-for="(value, index) in persons" :key="index">{{value}} - {{index}}</li><br><br><!--遍历字符串遍历时，第一个参数是字符串中的某个字符，第二个参数是索引--><li v-for="(char,index) of str">{{char}}-{{index}}</li><br><br><!-- 遍历数字遍历时，第一个参数是从1到目标值间的数字，第二个参数是从0开始的索引--><li v-for="(number,index) of 5">{{index}}-{{number}}</li></ul></div><script>new Vue({el: "#root",data: {students: [{ id: '001', name: 'zangsan', age: 18 },{ id: '002', name: 'lisi', age: 19 },{ id: '003', name: 'wangwu', age: 20 }],persons: {name: "zhangsan",age: 18},str:"hello"}})</script>
</body>
</html>

12.2 key的作用与原理

key的作用：类似与人的身份证号，key主要是为了标识节点
所有元素上的key都是Vue内部使用的，Vue使用完key之后将节点转换为真实dom时会将key去掉

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>key的原理</title><script type="text/javascript" src="./js/vue.js"></script>
</head><body><!-- 面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。3. 用index作为key可能会引发的问题：1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。4. 开发中如何选择key?:1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。默认情况下，如果没有显式的添加key，那么Vue会将index作为节点的key--><!-- 准备好一个容器--><div id="root"><!-- 遍历数组 --><h2>人员列表（遍历数组）</h2><button @click.once="add">添加一个老刘</button><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {persons: [{ id: '001', name: '张三', age: 18 },{ id: '002', name: '李四', age: 19 },{ id: '003', name: '王五', age: 20 }]},methods: {add() {const p = { id: '004', name: '老刘', age: 40 }this.persons.unshift(p)}},})</script></html>

12.2.1 遍历列表时index作为key

假设初始数据只有三条，分别时张三、李四、王五，然后Vue会根据数据在内存中生成虚拟DOM，虚拟DOM中的节点含有key属性，key属性的值为index，随后会将虚拟DOM转换为真实DOM

当有新数据添加时，比如逆序添加老刘到数据的最上方，那么Vue将改变后的数据形成虚拟DOM时也会将老刘这条数据放置到节点的最上方，Vue存在虚拟节点对比算法，如果有数据改变时就调用此算法让修改后的虚拟DOM与原虚拟DOM进行比较

比较过程：由于老刘位于数据的最上方，因此其key的值为0，diff算法会寻找原虚拟DOM中key为0的节点，发现原DOM中的节点内容与新虚拟节点的DOM中的内容不一样，因此将虚拟节点转换成真实节点时会生成新的DOM，不会使用原来的虚拟DOM，但是input标签对比时发现是一样的，因此会复用原来的input节点，所以老刘后面的输入框内部会有张三的内容填充，当对比新虚拟DOM中的张三节点时，其key值为1，因此将两种key=1的节点对比时发现其内容不一样，因此也会再次新生成内容为张三的节点，在对比张三后面的input输入框时发现与原来的虚拟DOM是一样的，因此也会复用原来的输入框…当对比王五这个节点时发现其key的值为3，原虚拟DOM中没有key值为3的节点，因此会新生成王五节点以及后面的输入框

通过上述分析可知，若使用index作为key的值，原本的虚拟DOM均不会使用，会新生成大量的新节点，造成效率降低

12.2.2 遍历时使用id作为key

当使用id作为key值时，一旦数据有变化，使用diff算法对比新的虚拟DOM以及原来的虚拟DOM时，会根据key的值大量复用原来的虚拟dom，只会重新生成新增数据的节点，因此效率较高，且不会出现页面错乱的情况。

12.3 列表过滤

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script src="./js/vue.js"></script>
</head><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入姓名" v-model="keyword"><ul><li v-for="(p,index) in filterPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>// 使用watch监视实现Vue.config.productionTip = false// new Vue({//     el: "#root",//     data: {//         keyword: "",//         persons: [//             { id: '001', name: '马冬梅', age: 19, sex: '女' },//             { id: '002', name: '周冬雨', age: 20, sex: '女' },//             { id: '003', name: '周杰伦', age: 21, sex: '男' },//             { id: '004', name: '温兆伦', age: 22, sex: '男' }//         ],//         filterPersons: []//     },//     watch: {//         keyword: {//             immediate:true,  // 最开始的时候就调用一下handler函数//             handler(val) {//                 this.filterPersons = this.persons.filter((p) => {//                     return p.name.indexOf(val) !== -1//                 })//             }//         }//     }// })// 使用计算属性实现new Vue({el: "#root",data: {keyword: "",persons: [{ id: '001', name: '马冬梅', age: 19, sex: '女' },{ id: '002', name: '周冬雨', age: 20, sex: '女' },{ id: '003', name: '周杰伦', age: 21, sex: '男' },{ id: '004', name: '温兆伦', age: 22, sex: '男' }],},computed: {filterPersons() {return this.persons.filter((p) => {return p.name.indexOf(this.keyword) !== -1})}}})</script>
</body>
</html>

12.3 列表排序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script src="./js/vue.js"></script>
</head><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入姓名" v-model="keyword"><button @click="sortType=2">年龄降序</button><button @click="sortType=1">年龄升序</button><button @click="sortType=0">原顺序</button><ul><li v-for="(p,index) in filterPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>Vue.config.productionTip = falsenew Vue({el: "#root",data: {keyword: "",sortType: 0, // 0 原顺序  1 降序  2 升序persons: [{ id: '001', name: '马冬梅', age: 19, sex: '女' },{ id: '002', name: '周冬雨', age: 28, sex: '女' },{ id: '003', name: '周杰伦', age: 21, sex: '男' },{ id: '004', name: '温兆伦', age: 22, sex: '男' }],},computed: {filterPersons() {// 先进行过滤操作，过滤完之后判断是否需要排序，然后再返回// 过滤操作const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyword) !== -1})//  排序操作if(this.sortType){arr.sort((p1, p2)=>{return this.sortType == 1 ? p1.age-p2.age : p2.age-p1.age})}return arr}}})</script>
</body></html>

12.4 更新数据出现的问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>更新时的一个问题</title><script type="text/javascript" src="./js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},methods: {updateMei(){// this.persons[0].name = '马老师' //奏效// this.persons[0].age = 50 //奏效// this.persons[0].sex = '男' //奏效//不奏效// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} }}}) </script>
</html>

12.5 模拟一个数据检测

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title></head><body><script type="text/javascript" >let data = {name:'尚硅谷',address:'北京',}//创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)      console.log(obs)    //准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj)//遍历keys.forEach((k)=>{Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)obj[k] = val}})})}</script></body>
</html>

12.6 Vue.set()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.set的使用</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h2>学校名称： {{ name }}</h2><h2>学校地址： {{ address }}</h2><hr><h2>姓名： {{ student.name}}</h2><h2>年龄： 真实年龄： {{student.age.rAge}} - 对外年龄： {{student.age.sAge}}</h2></div><script>const vm = new Vue({el:"#root",data:{name:"尚硅谷",address:"北京",student:{name:"tom",age:{rAge:40,sAge:18}}}})</script>
</body>
</html>

需求：在不改变代码的情况下，为人员添加性别

方式一（不可行）：使用vm._data.student.sex = “男” 这种方式不可行

分析，通过打印输出可以看出，新加入的sex属性并没有get和set方法，因此并不是响应式属性，因此通过此方法加入后并不能引起页面的重新渲染

方式二(可行)：Vue.set(target, key, val)

target为往谁身上加，key为加什么属性，val为此属性的值是什么

方式三(可行)：vm.$set(target, key, val)

方法二和方法三一个在Vue身上，一个在vue实例vm身上

注意：因为由于数据代理的存在，操作vm.student等同于操作vm._data.student,

因此Vue.set(vm._data.student, sex, “男”) 可简写为Vue.set(vm.student, sex, “男”)

vm.$set(vm._data.student, sex, “男”) 可简写为Vue.set(vm.student, sex, “男”)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.set的使用</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h2>学校名称： {{ name }}</h2><h2>学校地址： {{ address }}</h2><hr><button v-on:click="addSex">点击添加性别</button><h2>姓名： {{ student.name}}</h2><h2>年龄： 真实年龄： {{student.age.rAge}} - 对外年龄： {{student.age.sAge}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2></div><script>new Vue({el:"#root",data:{name:"尚硅谷",address:"北京",student:{name:"tom",age:{rAge:40,sAge:18}}},methods:{addSex(){// Vue.set(this.student, "sex", "男")this.$set(this.student, "sex", "男")}}})</script>
</body>
</html>

局限性：这两种方式只能给对象添加，即是Vue.set()中操作的对象不能是vm，也不能是vm中的直接的数据对象data

12.7 Vue监测数组的原理

对于Vue中管理的数组来说，只有调用了push()，pop()，shift()，unshift()，splice()，sort()，reverse()才会发生模板重新解析 ( 除非使用Vue.set()方法或者vm.$set()方法 )，这些方法都是经过包装后的方法

12.7 Vue监视数据总结

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.set的使用</title><script src="./js/vue.js"></script>
</head><body><!-- Vue监视数据的原理:1. vue会监视data中所有层次的数据。2．如何监测对象中的数据?通过setter实现监视,且要在new Vue时就传入要监测的数据(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式,请使用如下API:vue.set(target,propertyName/index, value）或vm.$set(target.propertyName/ index. value)3，如何监测数组中的数据?通过包裹数组更新元素的方法实现,本质就是做了两件事;(1).调用原生对应的方法对数组进行更新。(2).重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法:1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()2.vue.set()或vm.$set()特别注意:Vue.set(）和 vm.$set(）不能给vm或 vm的根数据对象添加属性!--><div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1</button> <br><button @click="addSex"> 添加性别属性，默认值男</button> <br><button @click="student.sex = '未知'"> 修改性别</button> <br><button @click="addFriend">在列表首位添加一个朋友</button> <br><button @click="updateFirstFriendName">修改第一个朋友的名字为张三</button> <br><button @click="addHobby">添加一个爱好</button> <br><button @click="updateFirstHobby">修改第一个爱好为开车</button> <br><h2>姓名： {{ student.name}}</h2><h2>年龄： {{student.age}}</h2><h2 v-show="student.sex">性别： {{student.sex}}</h2><h3>爱好：</h3><ul><li v-for="(h, index) in student.hobby" :key="index">{{ h }}</li></ul><h3>朋友们：</h3><ul><li v-for="(f,index) in student.friends" :key="index">{{ f.name }} -- {{ f.age }}</li></ul></div><script>const vm = new Vue({el: "#root",data: {student: {name: "tom",age: 18,hobby: ["抽烟", "喝酒", "烫头"],friends: [{ name: "jerry", age: 35 },{ name: "tony", age: 36 }]},},methods: {addSex() {// Vue.set(this.student, "sex", "男")this.$set(this.student, "sex", "男")},addFriend() {this.student.friends.unshift({ name: "jack", age: 35 })},updateFirstFriendName() {this.student.friends[0].name = "张三"},addHobby() {this.student.hobby.push("学习")},updateFirstHobby() {// this.student.hobby.splice(0, 1, "开车")Vue.set(this.student.hobby, 0, "开车")}}})</script>
</body></html>

13. 收集表单数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>收集表单数据</title><script src="./js/vue.js"></script>
</head><body><!-- 收集表单数据;若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。若: <input type="checkbox"/>1.没有配置input的value属性，那么收集的就是checked（勾选 or未勾选，是布尔值)2.配置input的value属性:(1)v-model的初始值是非数组，那么收集的就是checked勾选or 未勾选,是布尔值）(2)v-model的初始值是数组，那么收集的的就是value组成的数组备注:v-model的三个修饰符:lazy:失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤--><div id="root"><form><!-- v-model.trim去掉前后的空格 -->账号：<input type="text" v-model.trim="account"> <br>密码：<input type="text" v-model="password"> <br><!-- type="number"表示只让input框输入数字，v-model.number表示将输入的数字字符串转成数字 -->年龄：<input type="number" v-model.number="age"> <br>性别：男 <input type="radio" value="男" name="sex" v-model="sex">女 <input type="radio" value="女" name="sex" v-model="sex"><br>爱好： java <input type="checkbox" value="java" v-model="hobby">javascipt <input type="checkbox" value="javascript" v-model="hobby">c++ <input type="checkbox" value="c++" v-model="hobby"><br>所属校区：<select v-model="city"><option value="北京">北京</option><option value="天津">天津</option><option value="武汉">武汉</option><option value="广州">广州</option></select><br><!-- v-model.lazy表示让vue在此输入框中失去焦点了再收集数据，不要实时收集 -->其他信息：<textarea v-model.lazy="other"></textarea> <br><input type="checkbox" v-model="agree"> 阅读并接受 <a href="http://www.atguigu.com">《用户协议》</a><br><input type="submit" value="提交"></form></div><script>Vue.config.productionTip = false;new Vue({el: "#root",data: {account: "",password: "",age: "",sex: "",hobby: [],city: "",other: "",agree: ""}})</script>
</body>
</html>

14 过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器</title><script src="./js/dayjs.min.js"></script><script src="./js/vue.js"></script>
</head>
<body><!-- 过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）.语法:1.注册过滤器:Vue.filter(name, callback）或new Vue{filters:{]2.使用过滤器:{{xxx|过滤器名}}或v-bind:属性 = “xxx│过滤器名"备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据,是产生新的对应的数据--><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是 {{ fmtTime }}</h3><!-- methods实现 --><h3>现在是 {{ getFmtTime() }}</h3><!-- 过滤器实现 --><h3>现在是 {{ time | Timeformater }}</h3><h3>现在是 {{ time | Timeformater | mySlice}}</h3></div><div id="root2"><h2> {{ msg | mySlice }} </h2></div><script>Vue.config.productionTip = false;// 注册全局过滤器，要在new Vue实例之前Vue.filter('mySlice', function(value){return value.slice(0, 4);})new Vue({el:"#root",data:{time:1621561377603  // 时间戳},computed:{fmtTime(){return dayjs().format('YYYY-MM-DD HH:mm:ss');}},methods:{getFmtTime(){return dayjs().format('YYYY-MM-DD HH:mm:ss');}},// 局部过滤器，只能在此Vue实例中使用filters:{Timeformater(value, str="YYYY-MM-DD HH:mm:ss"){return dayjs().format(str);}}})new Vue({el:"#root2",data:{msg:"hello world"}})</script>
</body>
</html>

15.内置指令

15.1 v-text指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script src="../js/vue.js"></script>
</head>
<body><!-- 我们学过的指令:v-bind  :单向绑定解析表达式,可简写为 :xXXv-model :双向数据绑定v-for   :遍历数组/对象/字符串v-on    :绑定事件监听,可简写为@v-if    :条件渲染（动态控制节点是否存存在)v-else  :条件渲染（动态控制节点是否存存在)v-show  :条件渲染（动态控制节点是否展示)v-text 指令：1.作用：向其所在的节点中渲染文本内容2.与插值语法的区别：v-text会替换掉节点中的内容， {{xx}}则不会--><div id="root"><div>{{ name }}</div><div v-text="name"></div></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{name:'尚硅谷'}})</script>
</body>
</html>

15.2 v-html指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-html指令:1.作用:向指定节点中渲染包含html结构的内容。2.与插值语法的区别:(1).v-html会替换掉节点中所有的内容, {{xx}}则不会。(2).v-html可以识别html结构。3.严重注意: v-html有安全性问题!!!!(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!--><div id="root"><div>{{ name }}</div><div v-html="str2"></div></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{name:'尚硅谷',str2:"<h2>hello</h2>"}})</script>
</body>
</html>

15.3 v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-cloak指令(没有值)：1。本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。2.使用css配合v-cloak可以解决网速慢时展示出{{XXX}}的问题--><div id="root"><div v-cloak>{{ name }}</div></div><script src="http://localhost:8080/resource/5s/vue.js"></script><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{name:'尚硅谷',}})</script>
</body>
</html>

15.4 v-once指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-once指令:1.v-once所在节点在初次动态渲染后，就视为静态内容了。2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。--><div id="root"><div v-once>初始化时n的值是：{{ n }}</div><h2>当前n的值是：{{ n }}</h2><button @click="n++">点击增加n的值</button></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{n:1,}})</script>
</body>
</html>

15.5 v-pre指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-pre指令:1.跳过其所在节点的编译过程。2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。--><div id="root"><h2 v-pre>Vue其实很简单</h2><h2>当前n的值是：{{ n }}</h2><button @click="n++">点击增加n的值</button></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{n:1,}})</script>
</body>
</html>

15.6 自定义指令-函数式

输出自定义指令参数得到的结果，即console.log(element, binding)得到的结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令-函数式</title><script src="../js/vue.js"></script>
</head>
<body><!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点--><div id="root"><h2 v-pre>Vue其实很简单</h2><h2> 当前n的值是：<span v-text="n"></span></h2><h2> 放大10倍后n的值是：<span v-big="n"></span></h2><button @click="n++">点击增加n的值</button></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{n:1,},/*使用directives定义指令指令定义时不加v-前缀，使用时要加上v-big函数何时会被调用？1.指令与元素成功绑定时(即初始化时)2.指令用到的数据所在的模板被重新解析时*/directives:{// big指令中的参数，// 第一个参数element为所关联的元素，// 第二个参数binding表示指令相关的数据，包括指令所用到数据的值，指令的名称等big:function(element, binding){  // 可简写为big()element.innerText = binding.value * 10;console.log(element, binding)}}})</script>
</body>
</html>

15.7 自定义指令-对象式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令-函数式</title><script src="../js/vue.js"></script>
</head>
<body><!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点--><div id="root"><h2 v-pre>Vue其实很简单</h2><h2> 当前n的值是：<span v-text="n"></span></h2><h2> 放大10倍后n的值是：<span v-big="n"></span></h2><button @click="n++">点击增加n的值</button><hr><input type="text" v-fbind:value="n"></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{n:1,},/*使用directives定义指令指令定义时不加v-前缀，使用时要加上v-big函数何时会被调用？1.指令与元素成功绑定时(即初始化时)2.指令用到的数据所在的模板被重新解析时*/directives:{// big指令中的参数，// 第一个参数element为所关联的元素，// 第二个参数binding表示指令相关的数据，包括指令所用到数据的值，指令的名称等big:function(element, binding){  // 可简写为big()element.innerText = binding.value * 10;console.log(element, binding)},fbind:{// 指令与元素成功绑定时调用bind函数bind(element, binding){element.value = binding.value;},// 指令所在元素被插入页面时调用inserted函数inserted(element, binding){// 获取焦点   获取焦点时必须要在模板渲染之后element.focus();},// 指令所在的模板被重新解析时调用update函数update(element, binding){element.value = binding.value;element.focus();}}}})</script>
</body>
</html>

15.8 自定义指令总结

15.8.1 自定义指令命名过长问题

/*自定义指令命名过长时，在模板中使用段横杠连接
*/
<span v-big-number="n"></span>directives:{/*自定义指令命名过长时，在directives中使用引号(这种写法是完整写法)*/"big-number":function(element, binding){  element.innerText = binding.value * 10;console.log(element, binding)}
}

15.8.2 自定义指令中this问题

 directives:{fbind:{bind(element, binding){// 因为指令定义时是要直接操作dom，传入的参数提供了操作的元素element以及相关的信息，数据直接在模板中提供了，因此这里不需要vm做其他工作，所以这里的this是windowconsole.log("this为：", this)element.value = binding.value;},inserted(element, binding){console.log("this为：", this)element.focus();},update(element, binding){element.value = binding.value;element.focus();}}}

16.Vue实例生命周期

16.1 引出生命周期

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1.引出生命周期</title><script src="../js/vue.js"></script>
</head><body><!-- 生命周期:1.又名:生命周期回调函数、生命周期函数、生命周期钩子。2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。--><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2></div><script>Vue.config.productionTip = false;const vm = new Vue({el: "#root",data: {opacity: 1},// Vue完成模板的解析并把初始的真实DOM元素放入页面后(又被称为挂载完毕)调用mountedmounted() {setInterval(() => {// 这里的this指向vm，因为箭头函数没有自己的this，就向外找，找到mounted中提供的函数this.opacity -= 0.01if (this.opacity <= 0) {vm.opacity = 1;}}, 16)}})// 通过外部的定时器实现，不推荐// setInterval(()=>{//     vm.opacity -= 0.01;//     if(vm.opacity<=0){//         vm.opacity = 1;//     }// }, 16)</script>
</body></html>

16.2 Vue生命周期

        常用的生命周期钩子:1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】.2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

1. Vue从入门到精通（第一章 vue核心）相关推荐

EXCEL VBA从入门到精通第一章：VBA入门
第一章:VBA入门第一节:什么是VBA 介绍VBA的定义,作用和优点. VBA(Visual Basic for Applications)是一种编程语言,是微软Office套件中的一个重要组成部分 ...
javacv从入门到精通——第一章：javacv介绍
了解javacv的历史和发展背景 JavaCV是一个开源的Java框架,它提供了基于Java的接口,用于访问各种计算机视觉库和工具包,如OpenCV.FFmpeg等.JavaCV旨在为Java开发人员 ...
视频教程-vue从入门到精通-Vue
vue从入门到精通软通动力教育集团简称软通大学,依托软通动力在技术服务领域的多方位解决方案能力,采用先进的教学理念和模式,直通高校和城市,开展干部培养,文化落地,初级资源培训,培训需求对接,专业项目 ...
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
R语言学习笔记——入门篇：第一章-R语言介绍
R语言 R语言学习笔记--入门篇:第一章-R语言介绍文章目录 R语言一.R语言简介 1.1.R语言的应用方向 1.2.R语言的特点二.R软件的安装 2.1.Windows/Mac 2.2.Lin ...
Python3 入门100例，从入门到精通第一步
Python3 入门100例,从入门到精通第一步原题地址:http://www.runoob.com/python/python-100-examples.html 来源于github开源项目
ArcGIS for Desktop入门教程_第一章_引言 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第一章_引言 - ArcGIS知乎-新一代ArcGIS问答社区 1 引言 1.1 读者定位我们假设用户在阅读本指南前应已具备以下知识: · 熟悉W ...
Java从入门到精通第九章数字处理类
Java从入门到精通第九章数字处理类一.数字格式化二.数学运算 1)Math类 2)常用数学运算方法三.随机数 1)Math.random()方法 2)Random类四.大数字运算 1)B ...
第一章SKU核心思路
SKU购物车控件系列文章目录第一章SKU核心思路提示:这系列文章使用js实现,其他语言思路类似只是代码语法不同也能参考文章目录系列文章目录前言一.业务模型分析二.数据模型分析三.代码模 ...

1. Vue从入门到精通（第一章 vue核心）