vue.js指令

1、插值表达式
v-bind
缩写：，作用：v-bind绑定页面中的元素属性。例如：a的href属性，img的src、alt和title属性。
在 vue 中，绑定样式两种方式， v-bind：class， v-bind :style

v-on
缩写是@，作用：对页面中的事件进行绑定，事件类型=“事件处理函数名” 缩写： @事件类型=“事件处理函数名”

v-model：
双向数据绑定。作用：接受用户输入的一些数据，直接就可以将这些数据挂在到data属性上。这样就产生了双向的数据绑定（当业务模型中的数据发生变化时，用户界面中的数据会发生变化；当用户界面中的数据变化时，业务模型中的数据也会发生变化）。
语法：v-model = “data中的键名”
在data中，最好也要定义这个属性，不然会报错。
v-model 只能应用于表单元素当中

v-for：
作用：控制html元素中的循环，实现诗句列表的生成。
用法：v-for=”item in 集合”

item: 集合的子项

集合：被遍历的集合，通常为数组。

用处：写在谁上，谁循环。

在 v-for 中，要会使用 key 属性（ key 只接受 string 和 munber 两种数据类型 ）

v-if：
v-else
v-else必须紧跟在v-if后面，否则他不能被识别。表示：当v-if的条件不成立的时候执行。

v-show：
作用：通过判断，是否显示该内容。如果值为true，则显示。否则就隐藏。

语法：v-show=”判断表达式”

特点：元素会始终渲染在DOM中，只是被设置了display:none

v-if 消耗更高的切换性能
v-show 初始消耗性能

v-text
作用：操作元素中的纯文本

快捷方式：{{}}

v-html
作用：操作元素中的html

2、事件修饰符
.stop：阻止冒泡
.prevent: 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
以 .stop 为例：

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <!-- 阻止此元素向上冒泡 -->
        <div class="son" @click.stop="catchSon"></div>
    </div>
</div>

相关参考例子
https://www.cnblogs.com/hnzheng/p/9144207.html

.self和.stop的区别
前者只会阻止自己冒泡的触发，但是不会阻止他外层的冒泡事件的触发

知识点
冒泡：也就是多个事件嵌套时，调用最里面的事件，会依次向外触发事件

3、el ：指定要控制的区域
data： 是个对象，指定区域内要用到的数据
methods： 是个对象，这里可以自定义方法

4、
在vm实例中，，如果要访问data上的数据，或要访问methods中的方法，必须带this