（一）Vue.js是什么
Vue.js（是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
（二）Vue.js特点
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入
（三）VueJS 特性
MVVM模式（数据变量（model）发生改变 视图（view）也改变， 视 图 （view） 改 变，数据变量（model）也发生改变）
使用MVVM模式有几大好处：
1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同 的 View上，当View变化的时候Model可以不变，当Model变化的时候View也可以 不变。
2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视 图逻辑。
3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员 可以专注于界面(View)的设计。
4. 可测试性。可以针对ViewModel来对界面(View)进行测试
II: 组件化
III 指令系统
IIII: vue2.0开始支持虚拟dom
vue1.0是操作的是真的dom元素而不是虚拟的
虚拟dom:可以提升页面的刷新速度
虚拟DOM有利也有弊。
A：大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是， Vue.js 2.0 依旧比 较小（当前版本 21.4kb），且也正在删除很多东西。
B: 内存 -同样，虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在 DOM更新速度和内存使用中的权衡。
C: 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但 是如果是单独的、稀少的更新呢？这样的任何DOM更新都将会使虚拟DOM带来无 意义的预计算
（四）v-show指令，v-if的区别
条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值
（五）vue中的MVVM模式
即Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个、；；id所指代的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
（六）vue.js 生命周期
boforeCreate 创建之前
created 创建之后
boforeMount 实例化之前
mounted 实例化之后
beforeUpdate 数据更新前
updated 数据更新完成
beforeDestroy 销毁前状态
destroyed 销毁完成状态
（七）vue指令
1. v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；
2, v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元 素添加css代码：style="display:none";
3, v-else 必须跟在v-if/v-show指令之后，不然不起作用；
如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的 表达式为false，则else元素显示在页面上；
4, v-for 类似JS的遍历，用法为 v-for="item in items", items是数组，item为数组中 的数组元素。
5, v-bind 这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的 style样式。
6, v-on 用于监听指定元素的DOM事件，比如点击事件。
7，v-model 双向数据绑定
（八）Vue - 自定义指令
1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以 及定义对象
2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令
1. bind - 只调用一次，在指令第一次绑定到元素上时候调用
2. update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时 候，参数为新值与旧值
3. unbind - 只调用一次，在指令从元素上解绑的时候调用
3、以属性的形式使用自定义属性
4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象 中指定deep:true
5、acceptStatement让自定义指令接受内联语句
6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会 按照业务需求进行选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第 一个click事件
（九）axios数据渲染
html部分
js部分
子传父：子组件通过$emit方法向父组件发送数据，子组件在父组件的模板中，通过自 定义事件接收到数据，并通过自定义函数操作数据，此时点击子组件模板中的 按钮，父模板中的子组件会接受到数据
父传子：使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明 props
网友评论