Vue.js常用的語法（一）
在一個html檔案中，我們直接可以通過script標籤引入Vue.js，然後就可以在頁面裡寫Vue.js程式碼了。我們通過new Vue()構建了一個Vue的例項。
html檔案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pejeco</title>
</head>
<body>
<div id="app">
<p>{{a}}</p>
</div>
<script src="js/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
a: 1
},
created: function () {
// `this` 指向 vm 例項
console.log('a is: ' + this.a)
},
methods:{
doSomething:function(){
this.a++;
console.log(a)
}
},
watch：{
'a':function(val,oldVal){
console.log(val,oldVal)
}
}
});首先雙大括號("{{}}")會將資料解釋為純文字，而非html。
（1）el表明我們的Vue需要操作哪一個元素下的區域，'#app'表示操作id為app的元素下區域。
（2）data
表示Vue 例項的資料物件，data 的屬效能夠響應資料的變化。是Vue的核心屬性，是Vue繫結資料到HTML標籤的資料來源泉，另外Vue框架會自動監視data裡面的資料變化，自動更新資料到HTML標籤上去。
A.data物件的型別：
a. 型別是Object或者Function。
b.如果是元件物件中，data必須是Function型別。【後面學了元件後就明白了，暫時對元件先放放。】
B.data的事列
a.建立普通事列
var vm = new Vue({
data: data
})
//或是
var vm = new Vue({
data: {
a:1,
b:[]
}
})b.元件定義
Vue.extend() 中 data 必須是函式 var Component = Vue.extend({
data: function () {
//這裡必須是函式！！！
return { a: 1 }
}
})（3）created表示例項生命週期中建立完成的那一步，當例項已經建立完成之後將呼叫其方法。
（4）.methods :vue物件方法
型別: { [key: string]: Function }
methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法，或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body >
<div id="cnt">{{a}}</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#cnt',
data: {
a: 1
},
methods:{
doSomething:function(){
this.a++;
}
}
});
app.doSomething();
</script>
</body>
</html>
（5）.watch：設定物件監聽的方法
型別：{ [key: string]: string | Function | Object }
一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()，遍歷 watch 物件的每一個屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body >
<div id="cnt">{{a}}</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#cnt',
data: {
a: 1,
b:2,
c:3
},
watch: {
// 監控a變數變化的時候，自動執行此函式
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { },
deep: true
}
}
});
app.a=2;
</script>
</body>
</html>
（6）.computed ：放的是一些業務邏輯程式碼，一定要記得return
Vue的計算屬性（computed)的屬性會自動混入Vue的例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。這就很強大了，再計算屬性中定義的函式裡面可以直接使用指向了vue例項的this，異常方便的啊
型別： 鍵：函式}{ [key: string]: Function | { get: Function, set: Function } }
當然，可以省略setter,如果省略了setter，那麼值就可以是普通函式，但是必須有返回值。
二.Vue.js常用指令
指令帶有字首 v-，以表示它們是 Vue 提供的特殊屬性;當其表示式的值改變時相應地將某些行為應用到 DOM 上。
在Vue專案的開發中，我們使用的最多的應該就屬Vue的指令了。通過Vue提供的常用指令，我們可以淋漓盡致地發揮Vue資料驅動的強大功能。以下便是圖中常用指令的簡單介紹：
（1）資料的渲染：v-text，v-html, {{}}
v-text: 用於更新繫結元素中的內容，類似於jQuery的text()方法
v-html: 用於更新繫結元素中的html內容，類似於jQuery的html()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html與v-text的區別</title>
</head>
<body >
<div id="cnt">
<div v-html="showHTML"></div>
<div v-text="showText"></div>
</div>
<script src="js/vue.js"></script>
<script>
var ve=new Vue({
el:'#cnt',
data:{
showHTML:'<p><i>v-html:HTML標籤將會不會顯示，並且文字將會按照標籤型別顯示</i></p>',
showText:'<p>v-text:這裡我們輸出純文字，HTML標籤將會在瀏覽器上顯示</p>'
}
})
</script>
</body>
</html>
（3）控制模組的隱藏：v-if，v-show
v-if: 用於根據表示式的值的真假條件渲染元素,可以在 Vue 插入/刪除元素時自動應用過渡效果。
v-show: 用於根據表示式的值的真假條件顯示隱藏元素，切換元素的 display CSS 屬性
（5）渲染迴圈列表：v-for
（6）事件繫結：v-on
（7）屬性繫結：v-bing
（8）資料繫結：v-model
v-model：用於表單輸入與應用狀態的雙向資料繫結
簡單的理解就是：
<P>model雙向繫結：就是當input輸入的值改變的時候，呼叫這個input繫結的model的值也改變</P>
<P><input type="text" v-model="model_data"> <br/> 文字輸入的值：{{model_data}}</P>
（9）v-pre
跳過瓷元素及其子元素，跳過大量沒有指令的節點加快編譯速度。
（10）v-cloak
官方文件：該屬性保留在元素上，直到關聯的ViewModel完成編譯。結合CSS規則，例如[v-cloak] { display: none }，該指令可用於隱藏未編譯的鬍鬚繫結，直到ViewModel準備好。
在vm未載入之前，html中的插值會存在，影響頁面美觀。在元素上新增v-cloak並在css中寫入[v-cloak]{display:none;}，vm載入之前，該元素一直隱藏，v-cloak指令存在，vm載入之後，元素顯示，v-cloak指令消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{display: none;}
</style>
</head>
<body>
<div v-cloak>{{message}}</div>
</body>
</html>（11）v-once
由於p標籤有了初始值，第一次渲染時Input 和p都有內容，我們給p加了v-once之後，我們再更新mg的值時，p標籤不會發生改變
once顧名思義，一次，也可以加給點選事件，預設只能點選一次