一漆枚、插值表達式
{{ msg }}
二创译、v-cloak, v-text, v-html
v-cloak //解決插值表達式閃爍問題
<style>
[v-cloak]: {
display: none;
}
</style>
<h1 v-cloak>{{ msg }}</h1>
三、v-bind
- 直接使用
v-bind - 簡化指令
: - 拼內容：
:title="brnTitle + ',這是追加內容'"
四墙基、v-on
簡化指令@
例： v-on:click="clickHandler" or @click="clickHandler"
五软族、事件修飾符
-
.stop//阻止冒泡 -
.prevent//阻止默認事件 -
.capture//添加時間偵聽器使用事件鋪貨模式 -
.self//只有當元素本身觸發(fā)事件時才觸發(fā)回調 -
.once// 事件只觸發(fā)一次
例：@click.stop="clickHandler"
六、v-model 雙向數(shù)據(jù)綁定
例： v-model="name"
七残制、Vue中使用樣式
使用類綁定:class
- 數(shù)組
<h1 :class="['red', 'thin']">xxx</h1>
- 三元表達式
<h1 :class="['red', 'thin', isactive?'activeClass':'']">xxx</h1>
- 數(shù)組中嵌套對象
<h1 :class="['red', 'thin', {activeClass:isactive}]">xxx</h1>
- 直接使用對象
<h1 :class="{red:true, italic: false, activeClass:isactive}">xxx</h1>
使用內聯(lián)樣式:style
- 直接在元素上通過
:style書寫樣式對象
<h1 :style="{color:'red', font-size:'40px'}">xxx</h1>
- 將樣式對象定義在
data中立砸，使用:style引用data
<h1 :style="h1style">xxx</h1>
<script>
data: {
h1style: {color:'blue', font-size:'40px'}
}
</script>
-
:style通過數(shù)組方式引用多個樣式對象`
<h1 :style="[h1style1, h1style2]">xxx</h1>
<script>
data: {
h1style1: {color:'blue', font-size:'40px'}
h1style2: {fontStyle:'italic', backgound-color:'white'}
}
</script>
八、v-for指令與key
- 迭代數(shù)組
<ul>
<li v-for="(item, i) in userlist" :key="item">{{item.name}} + {{i}}</li>
</ul>
- 迭代對象
<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> //文檔中不存在該節(jié)點
<h1 v-show="false">xxx2</h1> //文檔中存在該節(jié)點, 樣式控制其隱藏了
TIP: 如果需要頻繁切換顯示隱藏用
v-show螺戳，反之用v-if。
