一、從HelloWorld說起
任何語言的都是從Hello World開始的，VueJs也不例外，直接上程式碼：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
{{hello}}
</div>
<script>
new Vue({
el:'#demo',
data:{hello:'hello world!'}
});
</script>
二、常用指令 v-x的使用
1.v-if/v-else 移除或插入DOM；
2.v-show 顯示或隱藏DOM（相當與設定display:none;）；
3.v-model 雙向資料繫結；
4.v-for 資料迴圈渲染；
5.v-text/v-html 標籤內部插值 ex:<div v-html=’html’></div>等同於<div>{{html}}</div>，不建議使用v-html,容易導致XSS攻擊；
6.v-bind 繫結更新html特性，完整語法:<a v-bind:href="url"></a>、縮寫:<a :href="url"></a>；
7.v-on 事件監聽器繫結，完整語法:<a v-on:click="doSomething"></a>、縮寫<a @click="doSomething"></a>；
三、模板渲染
模板渲染可以使用Javascript表示式，{{number+1}}、{{ok?’yes’:’no’}}
四、計算屬性 & Methods
在模板中繫結表示式是非常便利的，但在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這裡就要使用計算屬性了。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
同樣，使用Methods也可以達到一樣的效果，程式碼如下：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
五、過濾器
過濾器本質上就是一個函式，作用就是使用者輸入資料之後，進行除了返回結果。Vue.js支援任何表示式的地方新增過濾器。比如內建過濾器uppercase（字母全部轉換成大寫）:<span v-text=”message | uppercase”></span>。
內建過濾器列舉：
1.字母操作：capitalize（首字母大寫）|uppercase（全部字母轉換為大寫）|lowercase（全部轉換為小寫）。
2.限制：
a.limitBy（限制陣列顯示n個）ex:<div v-for=”item in items | limitBy 10 5”>第一個引數是展示條數，第二個引數是從下標5開始，也就是顯示5-15條資料。
b.filterBy（過濾字串或者函式），ex:<div v-for=”item in items | filterBy ‘hello’”>過濾字串有hello的元素。
c.orderBy（排序）<li v-for=“user in users | orderBy ‘name’ ‘age’”>根據名稱和年齡排序。
3.json過濾器，JSON.stringify()精簡縮略版，把表示式轉換成JSON字串，ex:{{ data | json 4 }},縮排4個字元列印data物件。
4.currency過濾器，把數字轉換為貨幣形式輸出，ex:{{ money | currency }} 結果1234=> $1,234.00.
5.debounce過濾器，延遲執行處理器，接受的表示式必須為函式，比如監聽使用者輸入值300毫秒之後在ajax請求，防止方法頻繁被掉用，還是比較實用的，<input @keyup=”onKeyup | debounce 300”>.
6.自定義過濾器，建立全域性過濾器，Vue.filter(ID,function(){...});