這一節(jié)重點是模板語法燎猛，有些內(nèi)容前面我們已經(jīng)接觸到了，在本小節(jié)將會做一個小的復習照皆，然后同時也會介紹一些簡單的寫法重绷。那，讓我們開始今天的學習之旅纵寝。
一论寨、插值技巧
1、目前我們常用的插值方式是使用
{{}}表達式爽茴；
2葬凳、有時候頁面初始化的一些參數(shù)，我們只希望
渲染一次的時候該怎么處理呢室奏？Vue.js已經(jīng)想到了火焰，我們可以使用v-once指令
3、以上的技能點不夠使用胧沫，正常的開發(fā)過程中偶爾還會追加html昌简，這可怎么辦？別急绒怨，v-html指令可以輕松幫你解決疑難雜癥纯赎。
4、還有一位老朋友v-bind指定南蹂，還記得前面的例子么犬金？可以使用該指令來綁定一些html屬性值。
具體用法六剥，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js模板語法練習</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>一次性插值</p>
<label v-once>{{a}}</label>
<p>永久性插值</p>
<label v-model>{{a}}</label>
<input type="text" v-model="a">
<p>插入html值</p>
<label v-html="SayHello"></label>
</div>
</body>
<script>
var data={
a:1,
SayHello:'<h2>你好啊晚顷，我是html內(nèi)容</h2>',
imgSrc:'resource/002.jpg'}
var vm = new Vue({
el:'#app',
data:data
})
//監(jiān)視a的值變化，如果發(fā)生變化疗疟，就執(zhí)行該回調(diào)函數(shù)
vm.$watch('a',function(newVal,oldVal){
//展示改變后新值
alert("改變后的數(shù)值是："+newVal);
})
</script>
</html>
二该默、快速縮寫
1.v-bind縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
2.v-on縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
三、過濾器
過濾器是一個神奇的玩意策彤，一般是用來處理文本的格式栓袖，比如常見的日期格式、貨幣格式等店诗。那么在Vue中如何使用過濾器呢裹刮？這邊涉及到一個管道的概念，大家可以想想日常生活中的管道（水管）必搞，管道是不是有兩個口必指，一段是自來水工廠，一端是家里的水龍頭恕洲，這樣我們是不是不要自己凈化水塔橡，也能喝到干凈的自來水了?在Vue.js中使用
|表示管道的概念梅割，是不是很熟悉，在C語言中也能看到這個符號葛家。
語法是比較簡單的户辞，如下：第一個參數(shù)是幫定值的name，第二個參數(shù)是要使用的過濾器的name癞谒。當然內(nèi)置的過濾器只能處理簡單的需求底燎，特殊的需求還是得自定義過濾器。
<label v-once>{{ msg | capitalize }}</label>
<p>永久性插值</p>
<label v-model>{{count | currency '￥' 2}}</label>
過濾器效果圖
以上內(nèi)置過濾器是基于1.X版本上使用的弹砚，2.X的貌似無效双仍，所以可以使用自定義過濾器的方法。
//告訴Vue.js桌吃，我們要使用過濾器了
filters: {
//將字符串首字母轉換為大寫
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
PS：今天就學習這么多知識朱沃，祝小伙伴們周末愉快！
