一、從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（相當(dāng)與設(shè)置display:none;）；

3.v-model 雙向數(shù)據(jù)綁定；

4.v-for 數(shù)據(jù)循環(huán)渲染；

5.v-text/v-html 標(biāo)簽內(nèi)部插值 ex:<div v-html=’html’></div>等同于<div>{{html}}</div>，不建議使用v-html,容易導(dǎo)致XSS攻擊；

6.v-bind 綁定更新html特性，完整語法:<a v-bind:href="url"></a>、縮寫:<a :href="url"></a>；

7.v-on 事件監(jiān)聽器綁定，完整語法:<a v-on:click="doSomething"></a>、縮寫<a @click="doSomething"></a>；

三、模板渲染

模板渲染可以使用Javascript表達(dá)式，{{number+1}}、{{ok?’yes’:’no’}}

四、計(jì)算屬性 & Methods

在模板中綁定表達(dá)式是非常便利的，但在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。例如：

<div id="example">{{ message.split('').reverse().join('') }}</div>

這里就要使用計(jì)算屬性了。

<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也可以達(dá)到一樣的效果，代碼如下：

<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>

五、過濾器

過濾器本質(zhì)上就是一個(gè)函數(shù)，作用就是用戶輸入數(shù)據(jù)之后，進(jìn)行除了返回結(jié)果。Vue.js支持任何表達(dá)式的地方添加過濾器。比如內(nèi)置過濾器uppercase（字母全部轉(zhuǎn)換成大寫）:<span v-text=”message | uppercase”></span>。

內(nèi)置過濾器列舉：

1.字母操作：capitalize（首字母大寫）|uppercase（全部字母轉(zhuǎn)換為大寫）|lowercase（全部轉(zhuǎn)換為小寫）。

2.限制：

a.limitBy（限制數(shù)組顯示n個(gè)）ex:<div v-for=”item in items | limitBy 10 5”>第一個(gè)參數(shù)是展示條數(shù)，第二個(gè)參數(shù)是從下標(biāo)5開始，也就是顯示5-15條數(shù)據(jù)。

b.filterBy（過濾字符串或者函數(shù)），ex:<div v-for=”item in items | filterBy ‘hello’”>過濾字符串有hello的元素。

c.orderBy（排序）<li v-for=“user in users | orderBy ‘name’?‘a(chǎn)ge’”>根據(jù)名稱和年齡排序。

3.json過濾器，JSON.stringify()精簡(jiǎn)縮略版，把表達(dá)式轉(zhuǎn)換成JSON字符串，ex:{{ data | json 4 }},縮進(jìn)4個(gè)字符打印data對(duì)象。

4.currency過濾器，把數(shù)字轉(zhuǎn)換為貨幣形式輸出，ex:{{ money | currency }} 結(jié)果1234=> $1,234.00.

5.debounce過濾器，延遲執(zhí)行處理器，接受的表達(dá)式必須為函數(shù)，比如監(jiān)聽用戶輸入值300毫秒之后在ajax請(qǐng)求，防止方法頻繁被掉用，還是比較實(shí)用的，<input @keyup=”onKeyup | debounce 300”>.

6.自定義過濾器，創(chuàng)建全局過濾器，Vue.filter(ID,function(){...});

?

?

總結(jié)

以上是生活随笔為你收集整理的vuejs深入浅出—基础篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。