一、Vue实例

创建实例

通过实例化Vue构造函数创建一个Vue实例。

const vm = new Vue({});

二、数据

    data 是Vue实例中的数据，在data中的数据都会被加入到响应式系统中。当数据发生改变之后，视图也会被更改。

三、模板语法

      Vue中允许通过{{}} 的形式将数据渲染到模板中，也可以使用render() 函数来进行渲染。

四、文本

      如果需要将文本渲染到页面上，可以直接将文本存储到data中，然后通过{{}}的形式渲染到页面上。

五、事件处理

事件的基本使用：

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

2.事件的回调需要配置在methods对象中，最终会在vm上

  3.method中配置的函数，不要用箭头函数！否则this就不是vm了

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

5.@click=“demo” 和 @click="demo($event)"效果一致，但后者可以传参；

六、Vue中的事件修饰符

1.prevent:阻止默认事件（常用）；

2.stop:阻止事件冒泡（常用）；

3.once:事件只触发一次（常用）

4.capture：使用事件的捕获模式；

  5.self：只有当event.target是当前操纵的元素时才触发事件

  6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕(平板移动端会用到)

七、Vue中常用的按键别名：

回车 enter

删除 delete

退出 esc

空格 space

换行 tab(特殊，必须配合keydown使用)

上  up

下  down

  左  left

右  right

2.Vue 未提供别名的按键，可以用按键原始的key值去绑定，但注意转为kebab-case(短横线命名)

八、计算属性

1.定义：要用的属性_data不存在，要通过已有的属性计算得来

2.原理：底层借助了Object.defineProperty方法提供的getter和setter

3.get函数什么时候执行

1）初次读取时会执行一次

2）当依赖的数据发生改变时会被再次调用

4.优势： 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注：

（1）计算属性最终会出现在vm上，直接读取使用即可

（2）如果计算属性要改变，那必须通过set函数去响应修改，且set中要引起计算时依赖的数据发生改变

九、监视属性

监视属性watch：

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

  2.监视的属性必须存在，才能进行监视！

  3. 监视的两种写法

（1）new Vue 时直接传入watch配置（2）。通过vm.$watch监视

  深度监视：

1.Vue中watch默认不检测对象内部值的改变（一层）

2.配置deep：true可以检测对象内部值改变（多层）

  备注：

1.Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以

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

computed和watch之间的区别

1.computer能完成的功能，watch都可以完成

2.watch能完成的功能，computer不一定能完成，例如：watch可以进行异步操作

  两个重要的小原则:

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

2.所有不被Vue管理的函数，最好写成箭头函数。如定时器的回调函数、ajax的回调函数、Promise的回调函数

      以上两点，能保证this的指向永远指向vm 或 组件实例对象。

      computed是同步执行的，因此其内部，不能有异步操作。它的使用场景，比如一些已经获取到的数据的过滤，加工等等，最后一定要有个返回值的，watch的话，就是监控某个值的变化，其内部可以做一些异步操作，且不需要返回什么东西。