VUE常用指令

一、插值表达式

{{ msg }}

二、v-cloak, v-text, v-html

v-cloak //解决插值表达式闪烁问题

<style>
    [v-cloak]: {
        display: none;
    }
</style>
<h1 v-cloak>{{ msg }}</h1>

三、v-bind

1. 直接使用v-bind
2. 简化指令:
3. 拼内容：:title="brnTitle + ',这是追加内容'"

四、v-on

简化指令@
例： v-on:click="clickHandler" or @click="clickHandler"

五、事件修饰符

1. .stop //阻止冒泡
2. .prevent //阻止默认事件
3. .capture //添加时间侦听器使用事件铺货模式
4. .self //只有当元素本身触发事件时才触发回调
5. .once // 事件只触发一次
   例： @click.stop="clickHandler"

六、v-model 双向数据绑定

例： v-model="name"

七、Vue中使用样式

使用类绑定:class

1. 数组

<h1 :class="['red', 'thin']">xxx</h1>

2. 三元表达式

<h1 :class="['red', 'thin', isactive?'activeClass':'']">xxx</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {activeClass:isactive}]">xxx</h1>

4. 直接使用对象

<h1 :class="{red:true, italic: false, activeClass:isactive}">xxx</h1>

使用内联样式:style

1. 直接在元素上通过:style书写样式对象

<h1 :style="{color:'red', font-size:'40px'}">xxx</h1>

2. 将样式对象定义在data中，使用:style引用data

<h1 :style="h1style">xxx</h1>
<script>
data: {
    h1style: {color:'blue', font-size:'40px'}
}
</script>

3. :style通过数组方式引用多个样式对象`

<h1 :style="[h1style1, h1style2]">xxx</h1>
<script>
data: {
    h1style1: {color:'blue', font-size:'40px'}
    h1style2: {fontStyle:'italic', backgound-color:'white'}
}
</script>

八、v-for指令与key

1. 迭代数组

<ul>
    <li v-for="(item, i) in userlist" :key="item">{{item.name}} + {{i}}</li>
</ul>

2. 迭代对象

<ul>
    <li v-for="(val, key, i) in userInfo" :key="item">{{val}} + {{key}} + {{i}}</li>
</ul>

TIP: 2.2.0+版本中，在使用 v-for时，key 是必须的。

九、v-if 和v-show

<h1 v-if="false">xxx1</h1> //文档中不存在该节点
<h1 v-show="false">xxx2</h1> //文档中存在该节点, 样式控制其隐藏了

TIP: 如果需要频繁切换显示隐藏用 v-show，反之用 v-if。