一、VUE的核心、优点

1.组件化，可以实现页面上功能的复用

2.数据驱动 不用操作DOM，只要更新数据，视图就会跟着变化

3.虚拟Dom不用频繁的操作真实DOM 性能会高一些

二、双向数据绑定

-数据-->视图

-视图-->数据

1.一方更改，另一方也会直接改变

2.Vue中普通的指令都可以实现数据变了，视图会跟着变，但是又一个特殊的指令叫V-model，它一般用于表单控件，可以实现数据双向的绑定

三、V-model的原理

1.<input v-model="msg">
2.<input v-bind:value="msg" v-on:input="msg=$event.target.value">
可以简写成
<input :value="msg" @input="msg=$event.target.value">

四、单向数据流

1.父组件-->子组件

2.父组件的值变动了，会影响到子组件，但是子组件的值变动了，不会影响到父亲

3.父组件通过Props向子组件传值，我们父组件中的数据变了，子组件中Props数据也跟着边，反过来不行

4.注（如果引用类型是对象，子组件只要不修改对象的地址，是可以在子组件中修改的（可以改属性）不能改地址）

五、MVVM

1.MVVM是3个单词的缩写，model（数据，一般来自ajax或本地存储）+view（视图 template）+viewmodel（vue的实例）

2.model数据变了，视图也会跟着改变，视图变了，如果是v-model，那么数据也会跟着变，viewmodel在中间起一个桥梁的作用（类似于中介）

3.好处

1数据驱动

因为数据变了，视图也会跟着变，所以在vue中不用操作DOM

2解耦（目标：低耦合）

由于v-model和view是没有关系的，是通过viewmodel结合在一起的，所以维护起来很方便，因为mode逻辑代码改了，view不用改

六、事件传参

1.@click="fn" 在回调函数中直接通过参数获得事件对象

2.@click=fn($event）这里的$event是固定写法

2.1对$event的理解

在原生dom原生事件中,$event指的是事件源对象

在组件自定义事件中，$event代表的是子组件的抛出的数据

七自定义指令：directive

v-imgerror 当头像加载报错时，可以给一张默认图片，

onerror this.img=默认图片

v-focus 打开带有搜索的页面时，可以自动定位光标到input中

指令的钩子函数

bind 只执行一次 属性绑定的时候执行

inserted只执行一次 当前指令所在的元素插入节点的时候执行

update 重复执行，数据更新的时候执行