Vue.js——v-指令詳解，component元件
其實，2016年至今，Vue發展逐漸佔據主體，其“vue”為法語名，實則中文名為“view”，它主要是基於“MVVM”進行設計並開發的。
M——Model 模型，用於資料儲存
V——View 檢視，用於使用者介面設定
VM——ViewModel 檢視模型，用於實現雙向繫結
即view的變化，自動反映在了viewModel上邊，反之亦然。
1、文字
（1）資料插值{{ message }}
<div id="app">
<p>{{ message }}</p>
</div>（2）html v-html用於輸出html程式碼
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',//el用於繫結某一資料，即id為“app”的元素
data: {
message: '<h1>菜鳥教程</h1>'
}
})
</script>注意，若設定html屬性中的值應使用v-bind指令。
<div id="app"> <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1':class1}"> directiva v-bind:class </div> </div> <script> new Vue({ el:'#app', data:{ class1:true } }); </script>
（3）指令
對於指令，多采用“v-”作為字首進行設定，用於設定當表示式值改變時，將某些行為應用到DOM上。
<div id="app">
<p v-if="seen">現在你看到我了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
seeb:true
}
});
</script>由於v-show可以實現與v-if相同的效果，即以下面的一個案例進行顯示。
<div id="app">
<form>
<div class="error" v-show="!message">
You must enter a message to submit
</div>
<textarea v-model="message"></textarea>
<button v-show="message">send message</button>
</form>
<pre>{{ $data|json }}</pre>
</div>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
new Vue({
el:'#app',
data:{
message:''
}
});
</script>當前程式碼若在控制檯console中，點選F12鍵審查元素，會發現，
（1）若是“v-show”指令，當我們在“textarea”中進行輸入元素，其相鄰元素div會出現“<div style="display:none">”，即表示相鄰元素div依然存在。
（2）若改為“v-if”指令，相對應的“div style="display:none">”會隨即消失。
2、事件處理event
注意：“v-on:”等價於“@”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件處理event</title>
</head>
<style>
....
</style>
<body>
<div id="app">
<button type="button" @click="updateCount">Submit {{ count }} </button>
</div>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
new Vue({
el:'#app', //繫結元素物件；
data:{ //渲染資料；
count:0
},
methods:{ //繫結的方法；
updateCount:function(){
this.count ++;
}
}
});
</script>
</body>
</html>
上述程式碼執行後，初始化為“submit0”，每當點選一下按鈕，submit0都會++，
在該例項中，用的“@”代替了“v-on:”，在該例項中，顯示的event事件為“onClick()”，由於代替了“v-on:”，所以直接寫為“@Click”。
3、元件化component
結合template模板，實現程式碼重用功能，
<counter></counter>
<script>
Vue.component('compoonent',template:{'<h1>Hello world!</h1>'});
</script>
等價於“<counter>
<h1>Hello world！</h1>
</counter>”
為什麼採用元件化component呢，目的是為了實現程式碼重用操作。
案例：點贊喜歡Links or 不喜歡Dislikes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs</title>
</head>
<body>
<div id="app">
<!---自定義一個元件counter-->
<counter heading="Likes" color="green"></counter>
<counter heading="Dislikes" color="red"></counter>
</div>
<template id="counter-template">
<!--heading屬性(props)用於設定counter屬性繫結一個值-->
<h1>{{ heading }}</h1>
<button type="button" @click="count +=1">{{ count }}</button>
</template>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
Vue.component('counter',{
template:'#counter-template',
//屬性heading
props:['heading','color'],
/*不能寫為*/
/*
data:{
：count:0
}
*/
data:function(){
return{count:0};
}
});
new Vue({
el:'#app'
})
</script>
</body>
</html>