Vue 2.0中內部指令是什麼
- 一个新手原創
- 2017-10-16 09:49:101428瀏覽
1.Vue.js介紹
目前前端三大主流架構：Angular、React、Vue。 React前段時間由於許可證風波，使得Vue的熱度蹭蹭地上升。另外，Vue友善的API文件更是一大特色。 Vue.js是一個非常輕量級的工具，與其說是一個MVVM框架，不如說是一個js函式庫。 Vue.js具有響應式程式設計和元件化的特點。響應式編程，即保持狀態和視圖的同步，狀態也可以說是數據吧；而其組件化的理念與React則一樣，即「一切都是組件，組件化思想方便於模組化的開發，是前端領域的一大趨勢。者一般配合使用，v-show的效果類似v-if。的內容是否顯示在頁面中取決於flag的布林值屬性。 -if是根據條件的值判斷是否載入，可以減輕伺服器的壓力，但缺點是當改變條件的值，頁面又要載入一次；v-show則無論條件的值是否為true，都會載入（若條件為true，則display屬性設定為其預設屬性，反之，設定為none）
2-2.v-for 循環指令
實例如下：
<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>頁面會顯示5個li，插值的效果是li會顯示與陣列b一一對應的元素，v-for有點類似for in迴圈#
<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>可以聯想到jquery的text()、html( )。監聽器
實例如下：
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>同理，類比jquery的on()方法，綁定事件用的，實例中v -on:click可以簡寫為@click。 #實例如下：
<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>效果為a標籤顯示紅色，且其src屬性為vm.message。簡寫形式為v-bind：——>： 2-6 v-model 資料雙向綁定指令
##實例如下：
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>當input輸入的值發生變化時，p標籤所包含的內容也會隨之變化，且與前者保持一致。
2-7 v-pre 指令
實例如下：
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</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樹第一次渲染時才會運作。
以上是Vue 2.0中內部指令是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn