Vue思维导图知识梳理

遵循MVVM模式

编码简洁，体积小，运行效率高，适合移动/PC端开发

它本身只关注UI，可以引入其它第三方库开发项目

借鉴 Angular 的模板和数据绑定技术

借鉴 React 的组件化和虚拟DOM技术

Vue的特点

vue-cli：vue脚手架

vue-resource

axios

vuex：状态管理

element-ui：基于vue的UI组件库（PC端）

vue-router：路由

Vue周边库

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

js代码（语句）（1）if(){}（2）for(){}

JS表达式和JS代码（语句）

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

差值语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

Vue中有很多的指令，且形式都是：v-

指令语法

模板语法

双向绑定一般都应用在表单元素上（如：input、select等）

v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

单向绑定（v-bind）：数据只能从data流向页面。

数据绑定

M：模型(Model)：data中的数据

V：视图(View)：Vue模板

VM：视图模型(ViewModel)：Vue实例对象（绑定数据，dom监听）

MVVM模型

使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

methods中配置的函数，不要用箭头函数！否则this就不是vm了而是window；

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

@click=“demo” 和 @click=\"demo(e v e n t ) \" 效 果 一 致 ， 前 者 默 认 参 数 就 是 事 件 对 象 ， 后 者 要 用 event)\" 效果一致，前者默认参数就是事件对象，后者要用event)\"效果一致，前者默认参数就是事件对象，后者要用event才能生成事件对象，并且可以传多个参数；

事件处理

prevent，阻止默认事件（常用）

stop，阻止默认事件（常用）

once，事件只触发一次（常用）

captur，使用事件的捕获模式

self，只有event.target是当前操作的元素时才触发事件

passive，先执行默认行为，后执行回调函数

事件修饰符

事件

Vue官方建议组件模板应该质包含简单的表达式，复杂的表达式则应该重构为计算属性或方法

对于Vue来说，data里的配置项就是属性 。而计算属性，就是拿着写完的属性去加工计算，生成一个全新的属性。

差值语法实现

methods函数出现几次就调用几次，效率比较低。

methods实现，注意methods方法在绑定事件的时候才可以省略小括号，在差值里不能

computed有缓存机制（复用），效率更高、调试方便（devtools上会有一个computed的分类）。

computed实现

计算属性

当被监视的属性变化时，回调函数自动调用，进行相关操作；

监视的属性必须存在，才能进行监视！！（除了data属性，computed属性也能监视）

new Vue时传入watch配置；

通过vm.$watch监视；

监视的两种写法

监视属性watch

immediate (立即的) 初始化时让handlder调用一下

watch配置属性

Vue中的watch默认不监测对象内部值的变化（监测一层)

配置deep:true可以监测对象内部值变化（监测多层）

Vue默认是可以监视到多层级数据的改变的（修改number.a页面发生改变可以看出）。但是watch属性默认是不可以的，要想可以就得打开深度监视（为了效率）。

使用watch时根据数据的具体结果，决定是否采用深度监视。

computed能完成的功能，watch都能完成。

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

watch对比computed

深度监视

监视

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-if，用来控制页面元素是否展示

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-show底层指令其实就是调整display:none

v-show

如果需要频繁切换 v-show 较好

v-if和template

渲染

new Vue()

初始化事件(.once事件)和生命周期

编译模版

挂载Dom -> 渲染

更新 -> 渲染

卸载

是你留个处理方法给事件，事件发生了以后会自动执行你留下调处理方法

回调函数

是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数

勾子函数

生命周期

组件的思想，其实就封装。能很好的实现代码复用技术

组件的定义:实现应用中局部功能代码和资源的集合

template，template用来定义html结构，其实``为模板字符串。它可以随意的换行

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样

组件中定义的data必须写成函数

定义组件(创建组件)

局部注册：靠new Vue的时候传入components选项

注册组件

使用组件(写组件标签)

Vue中使用组件的三大步骤：

组件化编程

Vue框架