Vue基础指令

1.Vue结构

（1）：首先引入vue.js。
（2）：写视图层，我们需要展示的内容(插值表达式：{{插入内容}})。
（3）：创建实例化对象Vue，第一个属性是控制区域：el：（“#id”），第二个属性是数据： data：{存放我们的数据}，第三个属性是methods：{放我们的方法}

2.基础指令

2.1 v-cloak
在我们加载Vue之前v-cloak是存在的，Vue加载结束后v-cloak就隐藏了，利用这个特性可以实现：页面防止闪烁

2.2 解析文本 v-text、v-html
v-text和v-html都可以进行文本的解析，他们的区别是：

v-html可以转义标签和渲染数据，v-text不能转义标签只能渲染数据
2.3 条件判断 v-if
判断条件是否成立，从而进行页面的渲染；与之相近的指令：v-show

v-if和v-show的区别：

v-show：该指令会始终渲染在dom中，通过改变display的值来实现显示或隐藏，不需要操作js

v-if：满足条件时才会将需要的元素添加至dom并渲染到页面

2.4 遍历数据：v-for

v-for指令可以方便的将数组或对象进行遍历并将数据展示到页面

2.5 事件的处理：v-on（简写@）

使用v-on可以快速有效地监听dom事件，如click、dblclick、mousedown等，同时vue允许在v-on指令中添加js代码并执行

2.6数据双向绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定

2.7 属性绑定：v-bind(简写 ：)

• 括号里不加引号的都是我们data里的数据读取
• 如果想使用字符串需要加上引号
• 里面可以写表达式
• 里面也可以调用定义好的方法，拿到的是方法的返回值

3.事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次