Vue.js學習筆記之常用模板語法詳解
本文介紹了Vue.js 常用模板語法，分享給大家，具體如下：
一、文本渲染
Vue支持動態(tài)渲染文本，即在修改屬性的同時，實時渲染文本內容。同時為了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本內容不再跟隨屬性值的變化而變化。
實時渲染
<div class="row">
<h2>文本 - 實時渲染</h2>
<input type="text" v-model="msg" class="col-md-2" />
<span class="col-md-">{{ msg }}</span>
</div>
v-model 指令將 input 標簽的值動態(tài)綁定到屬性 msg 上，通過 {{ msg }} 表達式顯示在頁面上。當修改文本框內容時，后面的頁面內容將實時變化并與文本框內容保持一致。
一次渲染
<div class="row">
<h2>文本 - 一次渲染</h2>
<input type="text" v-model="msg_once" class="col-md-2" />
<span class="col-md-" v-once>{{ msg_once }}</span>
</div>
在 vm 對象里添加屬性
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
msg_once: "once..."
}
});
});
頁面第一次加載完成時，頁面顯示once...，當 span 標簽加上 v-once 指令后，無論如何修改文本框內容，頁面內容都不會變化。
HTML代碼渲染
某些情況下，頁面需要動態(tài)的插入一段HTML代碼
在 vm 對象里添加屬性，屬性值為一段HTML代碼
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
html: "<span>This is a html tag.</span>"
}
});
});
頁面元素添加 v-html 指令后，元素對應位置將顯示出屬性值內的對應元素
<div class="row"> <h2>文本 - HTML</h2> <div v-html="html"></div> </div>
二、表達式
上文中已經介紹過的 {{ msg }} 就是一個簡單的表達式。除此之外，還有一些常用的表達式寫法。
運算表達式
在上述簡單表達式中可以使用運算符，Vue會將運算后的結果渲染在頁面上
<div>
<h4>運算表達式</h4>
<span v-pre>{{ Number(number)+ }}：</span>
<input v-model="number" type="text" />
<span>運算結果：{{ Number(number)+ }}</span>
</div>
在文本框中輸入數字，Vue通過表達式內的運算符實時計算出結果，并顯示出來。因為文本框內容為字符串，所以在表達式中需要對 number 屬性進行類型轉換成數字。
三元運算表達式
Vue支持在表達式內使用三元運算符
<div>
<h4>三元運算表達式</h4>
<span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
</div>
Javascript方法
表達式內也可以使用Javascript支持的基礎方法，Vue會動態(tài)執(zhí)行方法并顯示最終結果
<div>
<h4>Javascript方法</h4>
<span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span>
</div>
這個例子是將 msg_once 屬性值的字符進行倒序排列后重新組合起來。
三、過濾器
過濾器經常用來進行內容的格式化顯示。Vue支持自定義過濾器
首先要在 vm 對象里增加過濾器方法
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
filter_msg: 'base'
},
filters: {
filter: function (value) {
if (!value) {
return '';
}
return value + '_filter1';
},
filter2: function (value) {
if (!value) {
return '';
}
return value + '_filter2';
},
filter_arg: function (value, arg1, arg2) {
if (!value) {
return '';
}
return value + ' ' + arg1 + ' ' + arg2;
}
}
});
});
所有的過濾器方法都要定義在 filters 屬性里，方法的第一個參數值就是傳遞進來需要被處理的原始內容，方法的返回值即時處理過的新內容。
自定義的過濾器使用方法如下
<div>
<h4>單一過濾器</h4>
<span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
</div>
上面的例子中，過濾器通過管道符號“|”與需要處理的內容進行連接，將 filter_msg 屬性值經過 filter1 過濾器，在后面追加內容并顯示。
同時，Vue也支持連接多個過濾器
<div>
<h4>串聯(lián)過濾器</h4>
<span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
</div>
這個例子中，通過管道符號“|”，可以連接多個過濾器，每前一個過濾器的輸出將作為后一個過濾器的輸入，直到顯示最終結果。
當過濾器有多個參數時，Vue也支持帶參數調用
<div>
<h4>過濾器參數</h4>
<span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>
</div>
四、常用指令
指令就是將一些特殊行為應用到頁面DOM元素的特殊屬性。Vue的內置指令都是一些帶有 v- 前綴的特殊屬性。
常用的指令如下：
- v-bind
- v-on
- v-for
- v-if
- v-else-if
- v-else
- v-show
v-bind
該指令用來給元素綁定一個或多個特性
<div> <h>v-bind（屬性綁定）</h> <span v-pre>可用的按鈕(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以點擊的按鈕</button><br/> <span v-pre>不可用的按鈕(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可點擊的按鈕</button><br/> <span v-pre>縮寫(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以點擊的按鈕</button> </div>
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
btn_enabled: true
}
});
});
在上面的例子里，給 vm 對象增加一個名稱為 btn_enabled 的布爾屬性，在按鈕中通過 v-bind:disabled="btn_enabled" 動態(tài)給 disabled 屬性賦值
頁面上可以看到“不能點擊的按鈕”動態(tài)增加了一個 disabled 屬性。同時 v-bind:disabled="!btn_enabled" 也可以簡寫成 :disabled="!btn_enabled" 。
v-on
該指令綁定事件監(jiān)聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯(lián)語句。用在普通元素上時，只能監(jiān)聽原生 DOM 事件。在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯(lián)語句，語句可以訪問一個 $event 屬性。
在 vm 對象的 methods 屬性里添加自定義方法
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
methods: {
btn_click: function () {
console.log("button click!");
},
btn_clickWithEvent: function($event){
console.log($event);
},
btn_clickWithMsg: function (msg) {
console.log("Message is:" + msg);
}
}
});
});
通過屬性 v-on:click="btn_click" 在按鈕上添加 click 事件
<div>
<h4>v-on（事件綁定）</h4>
<span v-pre>點擊事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">點我！</button><br/>
<span v-pre>帶事件參數的點擊事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">點我！</button><br/>
<span v-pre>帶自定義參數的點擊事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">點我！</button><br/>
<span v-pre>縮寫(@click="btn_click")：</span><button @click="btn_click" type="button">點我！</button>
</div>
頁面效果如下
v-on指令也支持縮寫，用@符號代替，比如： @click="btn_click" 。
v-for
該指令用來基于源數據多次渲染元素或模板塊。
在 vm 對象里添加一個數組類型的屬性 books
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
books: ["深入淺出node", "C#本質論", "編程珠璣"]
}
});
});
通過 v-for 指令實現(xiàn)一個簡單列表
<div>
<h4>v-for（循環(huán)）</h4>
<ul>
<li v-for="item in books">
{{ item }}
</li>
</ul>
</div>
頁面效果如下
v-for 屬性值是一個 item in expression 結構的表達式，其中 item 代表 expression 運算結果的每一項。最終的HTML代碼如下
v-if、v-else-if、v-else
條件渲染指令，通過表達式結果的真假來插入和刪除元素。 v-if 可以單獨使用，而 v-else-if 、 v-else 必須和 v-if 一起使用。
下面是一個簡單用法的例子
<div> <h4>v-if、v-else-if、v-else（分支）</h4> <span>分支示例：</span> <input type="text" v-model="number" /> <span v-if="number>10">大于10</span> <span v-else-if="number==10">等于10</span> <span v-else>小于10</span><br/> </div>
頁面顯示如下
當文本框里輸入小于10的數字時，右側只顯示“小于10”的文本內容。
查看源碼發(fā)現(xiàn)，只有“小于10”的內容的 span 標簽存在，另外兩個標簽被插入到頁面中。
同樣，在輸入大于10的數字時，右側只顯示“大于10”的文本內容。而源碼里只有對應的 span 標簽存在。
v-show
該指令也是條件渲染指令，但是與上述的 v-if 有不同。這可以通過一個例子來說明。
<div> <h4>v-show（條件渲染）</h4> <span>v-show示例：</span> <input type="text" v-model="number" /> <span v-show="number>10">大于10</span> <span v-show="number==10">等于10</span> <span v-show="number<10">小于10</span><br/> </div>
將上面例子里的指令都換成 v-show ，頁面顯示如下
從頁面顯示的結果上看，沒有任何區(qū)別。但是查看源碼會發(fā)現(xiàn)，符合表達式結果判斷的元素內容將被顯示，不符合結果判斷的元素將被隱藏，即被加上 display: none; 的樣式。
從上面兩個例子對比可以看出
- v-if：動態(tài)插入或刪除元素
- v-show：動態(tài)顯示或隱藏元素
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue?vue-esign簽字板的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue.js的開發(fā)過程中,組件方法的定義和調用是非常常見的,有時候,為了響應事件或其他操作,我們需要在組件的方法中使用匿名函數,本文將深入探討如何在Vue組件的方法中加載和使用匿名函數,并提供詳細的代碼示例和解釋,幫助開發(fā)者更好地理解和應用這些技術2024-09-09
本文給大家分享了vue實現(xiàn)登錄后頁面跳轉到之前頁面的一個功能，有這方便需要的朋友學習參考下吧。2018-01-01
探秘Vue異步更新機制中nextTick的原理與實現(xiàn)
nextTick?是?Vue?提供的一個重要工具,它的作用主要體現(xiàn)在幫助我們更好地處理異步操作,下面就跟隨小編一起來探索一下nextTick的原理與實現(xiàn)吧2024-02-02
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)帶拖動和播放功能的時間軸,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要為大家詳細介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法
這篇文章主要給大家介紹了關于Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
在Vue應用中,表單驗證是非常重要的一部分,Vue提供了一些內置的驗證規(guī)則,比如required、min、max等,但是有時候我們需要對表單進行自定義驗證,以滿足特定的業(yè)務需求,本文將介紹如何在Vue中進行表單自定義驗證,感興趣的朋友可以參考下2023-12-12
Vue mockjs編寫假數據并請求獲取實現(xiàn)流程
這篇文章主要介紹了Vue mockjs編寫假數據并請求獲取實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
vue canvas繪制矩形并解決由clearRec帶來的閃屏問題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來的閃屏問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09