Vue入門和基礎——Vue的指令詳解
阿新 • • 發佈：2018-11-25
Vue入門和基礎（三）
vue中常用的指令詳解：
1.v-text：
<span v-text="message"></span>
<span>{{msg}}</span>
上述兩者等價。
2.v-html：
<div v-html="htmlText"></div>
因為插值表示式會將資料解釋為純文字，要輸出html可以使用v-html
3.v-pre：
<div id="app"> <span v-pre>{{message}}</span> //這條語句不進行編譯 </div>
v-pre主要用來跳過這個元素和它的子元素編譯過程。最終div裡什麼都不顯示；
4.v-cloak：
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'app'
}
})
</script>
在頁面載入時，頁面會閃爍先會顯示
<div> {{message}} </div>
然後會顯示
<div>
app
</div>
5.v-once：
v-once關聯的例項，渲染一次後將會被視為靜態內容
6.v-if
7.v-else if
8.v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] 改變num的值，div中的內容就會根據條件渲染；
9.v-show
也是根據條件展示元素，和v-if不同的是，如果判斷值為false，v-if直接將dom節點銷燬，而使用v-show元素會被保留在dom中；
10.v-for
根據遍歷陣列來進行渲染
<div v-for="(item,index) in items"></div> //其中index為索引是可選項
<div v-for="item of items"></div>
11.v-bind:
用來動態的繫結一個或者多個特性，也可以繫結一個含有鍵值對的物件
簡寫方法（:）
<div id="app2">
<div :class="[{style1:showStyle1,style2:!showStyle1},useStyle]"></div>
<br>
<div :class="style"></div>
</div>
var app2 = new Vue({
el:"#app2",
data:{
/*在data內部如果想給某一個變數進行賦值，是不能使用this關鍵字的*/
showStyle1:true,
useStyle:"style3",
style:{
style1:"",
style2:"",
style3:true,
}
},
mounted:function () {
this.style.style1 = this.showStyle1;
this.style.style2 = !this.showStyle1;
}
})
12:v-model:
雙向繫結：v-model會忽略所有表單元素的value、checked、selected特性的初始值。因為它選擇Vue例項資料做為具體的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<input type="text" v-model="num">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num:1,
},
})
</script>
</html>
v-model的修飾符：
.lazy：轉變為change事件同步
.number：轉化為數值型別
.trim：預設去掉收尾空格
13.v-on：
v-on用來監聽事件：簡寫為@
使用方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用方法</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="add()">Add</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num:1,
},
methods:{
add:function () {
this.num++;
}
},
})
</script>
</html>
事件修飾符：
.stop 阻止事件繼續傳播
.prevent 事件不再過載頁面
.capture 使用事件捕獲模式,即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理
.self 只當在 event.target 是當前元素自身時觸發處理函式
.once 事件將只會觸發一次