1）Vue指令
2）computed和watch
3）生命周期钩子
4）组件间的传参
5）插槽
6）修饰符
7）nextTick()
前端三大框架：
Vue：尤雨溪开发
React：Facebook主导开发
Angular：谷歌主导开发
为什么选择Vue?
1.国内Vue的市场份额占比多
2.简单易上手，非常适合前端开发初学者学习
前置知识：
1.HTML、CSS和JS基础
2.了解Node和npm
3.webpack（可选，vue-cli已经封装了打包功能）
使用Vue的两种方式：
1.直接script标签引入vue.js文件
2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）
前端框架与库的区别
• jquery 库 ->DOM(操作DOM) + 动画+ ajax请求
• 框架 ->全方位功能
一、指令
指令（Directives）是带有 v- 前缀的特殊属性。
插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。
v-model也可用在自定义组件上。
5.v-for（列表渲染）
使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除
二、computed和watch
三、生命周期钩子
什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。
1）beforeCreate
此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。
2）created
此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。
在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。
3）模板编译，把data里面的数据和vue语法写的模板编译成HTML
4）beforeMount
将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上
5）mounted
编译好的HTML已挂载到页面上
6）beforeUpdate和updated
数据更新时调用，通常使用计算属性或侦听器取而代之
7）beforeDestroy
销毁所有观察者、组件及事件监听
8）destroyed
组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。
四、组件间的通信
1.父子组件间的通信
父子组件通信可以总结为props向下传递，事件向上传递。
单向数据流：父级 prop 的更新会向下流动到子组件中，但反过来不行。
每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。
父组件通过ref直接调用子组件中的方法。
子组件调用父组件中的方法：
1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法
2）子组件用$emit向父组件触发一个事件，父组件监听这个事件
3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法
2.兄弟组件间的通信
其中一种方法是让父组件充当两个子组件之间的中间件（中继）；
另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用场景：
在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。
六、修饰符
2.事件修饰符
vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。
3.按键修饰符
七、nextTick()
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调）
应用场景：需要在视图更新之后，基于新的视图进行操作。
BootCDN（国内）
unpkg
cdnjs
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
进入项目，安装并运行：
打开localhost：8080
vue实例：
选项API：
https://cn.vuejs.org/v2/api/#components
组件化应用构建
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
指令邦定
指令
指令 (Directives) 是带有 v- 前缀的特殊属性
v-bind：
v-on：
v-if
v-for：
v-model：
数据，方法，计算属性，侦听器
生命周期
组件
全局注册
局部注册
组件组合
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。
prop 向下传递，事件向上传递
子组件要显式地用 props 选项 声明它预期的数据：
动态邦定prop
单项数据流
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
自定义事件
每个 Vue 实例都实现了 事件接口 ，即：
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
这里有一个如何使用载荷 (payload) 数据的示例：
官方支持的 vue-router 库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
