Vue基本指令、事件修饰符和绑定样式

Vue基本指令

v-cloak : 解决插值表达式闪烁的问题。
v-text：没有出现闪烁问题，但是v-text会覆盖元素中原本的内容。但是插值表达式只会替换自己的占位符，不会把整个元素的内容清空。
v-bind：Vue提供用于绑定属性的指令，V-bind：要绑定的属性，也可简写为：要绑定的属性，只能实现数据的单向绑定。
v-on：事件绑定机制，同时要在Vue实例中写methods属性，它定义了当前vue实例所有可用的方法，可缩写为@。
v-model:实现数据的双向绑定，可以实现表单元素和model数据间的双向绑定，只能运用在表单元素中。
v-for：可循环普通数组，对象数组，对象。如果使用v-for迭代数字，值从1开始。在循环中key属性只能使用number和string，必须使用v-bind绑定属性

<p v-for="(item, i) in list">索引值：{{ i }}---- 每一项：{{ item }}</p>

<p v-for="(user,i) in list">ID: {{ user.id }}--- 名字：{{ user.name }}--- 索引：{{i}}</p>

<p v-for="(val, key, i) in user">值是： {{ val }}--- 键是： {{ key }}---- 索引：{{ i }}</p>

<p v-for="count in 10">这是第{{ count }}次循环</p>

<p v-for="item in list" :key="item.id">

v-if：每次都会重新删除或创建元素，有较高的切换性能消耗，如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if。
v-show：每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式，有较高的初始渲染消耗，如果元素涉及到频繁的切换，推荐使用v-show。

Vue事件修饰符

.stop：组织事件冒泡。
.prevent：组织默认行为。
.capture：实现捕获触发事件的机制：从里到外触发。
.self：实现只有点击当前元素的时候，才会触发事件处理函数。只会组织自身冒泡行为的触发，并不会组织所有元素的冒泡行为。
.once：只触发一次点击事件。

Vue绑定样式

通过属性绑定设置class类样式

1、直接传递一个数组，注意：这里的class需要v-bind做数据绑定

<h1 :class="['thin','italic']">这是一个很大的h1，大到你无法想象！！！</h1>

2、在数组中使用三元表达式

<h1 :class="['thin','italic',flag?'active':'']">这是一个很大的h1，大到你无法想象！！！</h1>

3、在数组中使用对象（键值对）代替三元表达式，提高代码的可读性

<h1 :class="['thin','italic',{'active':flag}]">这是一个很大的h1，大到你无法想象！！！

4、在为class使用v-bind绑定对象时，对象的属性是类名，可带也可不带引号；属性的值是一个标识符

<h1 :class="{red:true, thin: true, italic: false, active: false}">这是一个很大的h1，大到你无法想象！！！</h1>

通过属性绑定设置style行内样式

1、直接使用:style形式

<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>

2、将样式对象定义到data中，引用到:style中

data:{
              styleObj1:{color:'red','font-weight':200},
              styleObj2:{'font-style': 'italic'}  
            }

<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>