Vue基礎篇-模板語法
阿新 • • 發佈：2018-12-12
1.插值
（a）文字（雙大括號）
<p>{{ message }}</p>（b）html元素（v-html指令）
<div id="app"> <p v-html="spanHTML"></p> </div>
<script>
new Vue({
el: '#app',
data: {
spanHTML: '<span>顯示文字內容</span>'
}
})
</script>（c）屬性（v-bind指令）
<div id="app">
<div v-bind:class="classVal"> 測試文字 </div>
</div>
<script>
new Vue({
el: '#app',
data:{
classVal: "redColor"
}
});
</script>2.指令
| v-text | 更新textContent。（直接用雙大括號也是可行的） |
| v-html |
輸出真正的HTML。（一般輸出真正html直接用元件更方便） |
| v-pre | 跳過這個元素和它的子元素解析和渲染。（時顯時不顯操作可以用） |
| v-cloak | 這個指令是用來保持在元素上直到關聯例項結束時進行編譯。（會出現閃爍的可能） |
| v-once | 關聯的例項只會渲染一次。（一般後邊指定跟著元件） |
| v-if | 可以實現條件渲染。（銷不銷燬這個元素的操作） |
| v-else | 是搭配v-if使用的。 |
| v-else-if |
充當v-if的else-if塊，可以鏈式的使用多次。（更方便實現switch-case語句） |
| v-show | 根據條件展示元素。（實現原理是display:none所以只是隱藏，沒有銷燬） |
| v-for | 根據遍歷陣列來進行渲染。（三引數含義：值value，鍵名key，下標index） |
| v-bind | 動態的繫結一個或者多個特性。（常用的是繫結class，style，href） |
| v-model | 表單上建立雙向資料繫結。（登入或者表單提交用的很多） |
| v-on | 監聽dom事件。 |
（a）引數
v-bind:常用的是直接繫結資料物件，其簡寫方式例子中會見
<div id="app">
<div :class="classObject">123456789</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject:{
'isActive': false,
'redColor': true
}
}
})
</script>（b）修飾符
| v-model | .lazy 預設情況下，v-model同步輸入框的值和資料。可以通過這個修飾符，轉變為在change事件再同步 .number 自動將使用者的輸入值轉化為數值型別 .trim 自動過濾使用者輸入的首尾空格（常用） |
| v-on | .stop 阻止事件繼續傳播（常用） .prevent 事件不再過載頁面（常用） .once 事件將只會觸發一次（常用） .self 只當在 event.target 是當前元素自身時觸發處理函式 .passive 告訴瀏覽器你不想阻止事件的預設行為 .capture 使用事件捕獲模式,即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 |
3.使用者輸入
v-model 指令用來在 input、select、text、checkbox、radio 等表單控制元件元素上建立雙向資料繫結，根據表單上的值，自動更新繫結的元素的值。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '顯示文字'
}
})
</script>4.過濾器
（a）管道符“ | ”實現過濾語法書寫；
（b）可串聯，可單獨書寫，例如：{{value | filterA | filterB}} ；
（c）允許自定義過濾函式；
<div id="app">
{{ value | filterA(1,2) }}
</div>
<script>
new Vue({
el: '#app',
data: {
value: '顯示文字'
},
filters: {
filterA: function (val,num1,num2) {
return val.subString(num1,num2)
}
}
})
</script>
（d）自定義過濾器函式允許有引數，如上所示（值，1參，2參）；
（e）vue自帶過濾器
| capitalize |
首字母大寫 |
| uppercase | 全部大寫 |
| lowercase | 全部小寫 |
| currency | 輸出金錢以及小數點 |
| pluralize | 輸出複數的形式 |
| debounce | 延期執行函式 |
| limitBy | 在 v-for 中使用，限制數量 |
| filterBy | 在 v-for 中使用，選擇資料 |
| orderBy | 在 v-for 中使用，排序 |