一、從HelloWorld說起
任何語言的都是從Hello World開始的，VueJs也不例外，直接上代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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
在模板中綁定表達式是非常便利的，但在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
|
1
2
3
4
5
|
<div id="example"> {{
message.split('').reverse().join('') }}</div> |
這裏就要使用計算屬性了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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也可以達到一樣的效果，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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(){...});