這次帶給大家Vue 2.0內部指令,使用Vue 2.0內部指令的注意事項有哪些,以下就是實戰案例,一起來看一下。
1.Vue.js介紹
# 目前前端三大主流框架:Angular、React、Vue。 React前段時間由於許可證風波,使得Vue的熱度蹭蹭地上升。另外,Vue友善的API文件更是一大特色。 Vue.js是一個非常輕量級的工具,與其說是一個MVVM框架,不如說是一個js函式庫。 Vue.js具有響應式程式設計和元件化的特點。響應式編程,即保持狀態和視圖的同步,狀態也可以說是數據吧;而其組件化的理念與React則一樣,即“一切都是組件,組件化思想方便於模組化的開發,是前端領域的一大趨勢。
2.內部指令# 2-1.v-if v-else v-show:前兩者一般搭配使用,v-show的效果類似v-if。
實例如下:
<body> <p id="app"> <p v-if="flag">if</p> <p v-else>else</p> <p v-show="flag">show</p> </p> </body> <script> var vm= new Vue({ el:"#app", data:{ flag:true } }); </script>
DOM結構中,三個p標籤中的內容是否顯示在頁面中取決於flag的布林值屬性。當flag為true時,if和show都會顯示,else也不會存在於DOM結構中。 v-if和v-show的不同體現在:v-if是根據條件的值判斷是否加載,可以減輕伺服器的壓力,但是缺點是當改變條件的值,頁面又要加載一次;v-show則無論條件的值是否為true,都會載入(若條件為true,則
display2-2.v-for 迴圈指令實例如下:
<body> <p id="app"> <ol> <li v-for="b in b">{{b}}</li> </ol> </p> </body> <script> var vm= new Vue({ el:"#app", data:{ b:['a','b','c',1,2] } }); </script>
頁面會顯示5個li,插值的效果是li會顯示與
陣列2-3 v-text v-html 文字(html字串)指令<body>
<p id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>
可以聯想到jquery的text()、html()。到現在,你會發現前面都是利用插值操作,也就是{{}},這種做法會在某種程度上影響效能。
2-4 v-on 綁定事件監聽器
# 實例如下:
<body> <p id="app"> <button v-on:click="Hi()">Button</button> </p> </body> <script> var vm= new Vue({ el:"#app", methods:{ Hi:function(){ alert("Hello World!") } } }); </script>
同理,類比jquery的on()方法,綁定事件用的,實例中v-on:click可以簡寫為@click。 click可以替換成滑鼠的其他操作,如mouseout、mouseover等等。
2-5 v-bind指令
實例如下:
<body> <p id="app"> <a v-bind:style="{color:'red'}" :src="message">{{message}}</a> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>
效果為a標籤顯示紅色,且其src屬性為vm.message。 v-bind指令主要用於設定
html標籤2-6 v-model 資料雙向綁定指令實例如下:
<body> <p id="app"> <p>{{message}}</p> <input type="text" v-model="message"> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>
當input輸入的值發生變化時,p標籤所包含的內容也會隨之變化,且與前者保持一致。
2-7 v-pre 指令 實例如下:
<body> <p id="app"> <p>{{message}}</p> <p v-pre>{{message}}</p> </p> </body> <script> var vm = new Vue({ el: "#app", data: { message: "前端工程师" } }); </script>
第一個p標籤輸出“前端工程師”,而第二個p標籤則會跳過vue編譯,輸出原始值,即{{message}}。
2-8 v-cloak指令
v-cloak指令的功能是當DOM樹建構好完成頁面的渲染後才執行,且其須要與css一起使用
2-9 v-once指令
v-once指令的作用是只有當DOM樹第一次渲染時才起作用。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#
以上是Vue 2.0內部指令的詳細內容。更多資訊請關注PHP中文網其他相關文章!