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>#
<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>實例如下：
<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>##實例如下：
<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>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中文網其他相關文章！
