一、從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(){...});