?使用vue.js原文介紹：Vue.js是一個構建數據驅動的web界面庫。Vue.js的目標是通過盡可能簡單的API實現響應式數據綁定和組合的視圖組件。vue.js上手非常簡單，先看看幾個例子：

??? 例一：Helloworld

??? html代碼：

<div id="app">{{ message }}</div>

??? js代碼：

new Vue({el: '#app',data: {message: 'Hello Vue.js!'} })

??? 例二：雙向綁定

??? 說明：html中以v-開頭的標記都是vue.js提供的標記。v-model屬性表示數據模型。

??? html代碼：

<div id="app"><p>{{ message }}</p><input v-model="message"></div>

??? js代碼：

new Vue({el: '#app',data: {message: 'Hello Vue.js!'} })

??? 例三：渲染列表

??? 說明：v-for表示遍歷集合數據，下面的代碼遍歷集合todos并輸出每項。

??? html代碼：

<div id="app"><ul><li v-for="todo in todos">{{ todo.text }} ? ? ? ?</li></ul></div>

??? js代碼：

new Vue({el: '#app',data: {todos: [{ text: 'Learn JavaScript' },{ text: 'Learn Vue.js' },{ text: 'Build Something Awesome' }]} })

??? 例四：事件綁定

??? 說明：v-on是vue.js特性，表示綁定事件方法。

??? html代碼：

<div id="app"><p>{{ message }}</p><button v-on:click="reverseMessage">Reverse Message</button></div>

??? js代碼：

new Vue({el: '#app',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () { ? ? ? ? ? ?this.message = this.message.split('').reverse().join('')}} })

? ? 看完上面的4個例子，感覺vue.js挺容易入門，確實是這樣，不得不說vue.js深受開發人員喜愛，簡單易學。前面的例子只是展示了如何使用vue.js，但它到底包含了哪些功能？vue.js提供了兩大核心功能：響應的數據綁定、視圖組件化。接下來我們看看vue.js是怎么定義這兩大功能的。

兩大核心功能：響應的數據綁定、視圖組件化

??? 響應的數據綁定：vue.js擁抱數據驅動的概念，一當DOM和數據綁定，Dom將會和數據保持同步，數據有變動DOM會立即渲染，在也不用擔心數據變更后DOM如何渲染的問題。并且如果手動修改數據綁定的DOM元素的值，數據模型也會被同步。因為vue.js支持雙向綁定。綁定過程如下圖所示：

? ? 視圖組件化：vue支持抽象組件化，我們整個系統可以使用若干個小的組件構造，例如下面是一個html頁面對應的摸快。整個系統可分為三個大的組件：app-nav、app-sidebar、app-content，app-sidebar下又包含兩個小組件，app-content下包含三個小組件。這些組件也相當于是自定義的DOM元素，我們可以直接使用。??

??? html代碼：

<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view></div>

? ? ?前面簡單介紹了vue的主要功能，接下來我們詳細的看看在實際項目開發中，vue.js到底給我們提供了哪些方面的功能。

數據綁定語法

??? 1.文本綁定：在html的文本字符串中，可以通過{{}}格式包含vue特性。

<span>Message: {{ msg }}</span>

??? 2.單向綁定：只同步一次，如果msg特性值有變化，html中的文本不會被更新。

<span>This will never change: {{* msg }}</span>

??? 3.輸出包含html的數據：1和2中的代碼不支持輸出html代碼，需要用下面的格式。

<div>{{{ raw_html }}}</div>

??? 4.html屬性值綁定

<div id="item-{{ id }}"></div>

??? 5.支持javascript表達式

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

??? 6.過濾器：vue提供了屬性過濾功能，下面的代碼message是一個特性，filterA是一個過濾函數，最終輸出為filterA(message)的結果。

{{ message | filterA }}

??? 7.判斷語法：如果條件成立則輸出結果，條件不成立無任何輸出。

<p v-if="greeting">Hello!</p>

??? 8.html屬性綁定：下面代碼和：<a href={{url}}”></a>和效果一樣，其實最終也會轉換為v-bind模式。

<a v-bind:href="url"></a>

??? 9.事件綁定：使用v-on為html的事件屬性綁定方法。

<a v-on:click="doSomething">

??? 10.v-bind縮寫：下面的第一段代碼為v-bind的完整寫法，第二段代碼為縮寫方式。

<!-- 完整語法 --><a v-bind:href="url"></a><!-- 縮寫 --><a :href="url"></a><!-- 完整語法 --><button v-bind:disabled="someDynamicCondition">Button</button><!-- 縮寫 --><button :disabled="someDynamicCondition">Button</button>

??? 11.v-on縮寫：和v-bind相似，區別在于v-on用@符號表示，而v-bind用:表示。

<!-- 完整語法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>

??? vue提供的語法讓開發人員很方便的完成view和model的動態綁定，vue不僅提供特性和html元素屬性的綁定，它對css和style支持也比較完善。

Class與Style綁定

??? 1.class綁定對象特性：vue綁定class支持直接綁定json字符串格式設置。下面代碼vue實例包含isA和isB兩個類型為布爾的屬性，可供元素的class直接綁定。下面的html代碼有人會有疑問：在div上寫了兩次class屬性。這個問題不用擔心，vue會自動把兩個class屬性合并成一個。

??? html代碼：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

??? js代碼：

data: {isA: true,isB: false}

??? 輸出結果：

<div class="static class-a"></div>

??? 2.class字節綁定對象：vue支持直接給class屬性綁定對象，這樣寫也更靈活些。

??? html代碼：

<div v-bind:class="classObject"></div>

??? js代碼：

data: {classObject: { ? ? ? ?'class-a': true, ? ? ? ?'class-b': false} }

??? 3.數組語法：class屬性可直接綁定一個數組，數組里邊的項為vue實例特性。

??? html代碼：

<div v-bind:class="[classA, classB]">

??? js代碼：

data: {classA: 'class-a',classB: 'class-b'}

條件渲染

??? 1.v-if和v-else：下面代碼如果條件為true則輸出yes，否則輸出no。

<h1 v-if="state === 1">Yes</h1><h1 v-else>No</h1>

??? 2.template v-if輸出多條html元素：v-if和template標簽配合使用可嵌入多個html標簽，當著模板使用，最終輸出值包含html元素。

<template v-if="state === 1"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>

??? 3.v-show和v-else: 和v-if相似，都作為條件判斷，不同點在于渲染的區別。v-if只有等條件成立時才會渲染html元素，而v-show不管條件是否成立都會渲染，如果條件不成立則設置元素的display為none。

??? 4.v-show和組件混合使用問題：將v-show用在組件上時，由于指令優先級v-else會出問題，所以不要使用v-else。下面代碼是錯誤的：

<custom-component v-show="condition"></custom-component><p v-else>這可能也是一個組件</p>

??? 應該這樣寫：

<custom-component v-show="condition"></custom-component><p v-show="!condition">這可能也是一個組件</p>

列表渲染

??? 1.語法v-for：通過v-for可遍歷js對象集合，然后用可以直接輸出每一項的數據。下面的代碼直接用文本輸出items的每項數據。

??? html代碼：

<ul id="example-1"><li v-for="item in items">{{ item.message }} ? ?</li></ul>

??? js代碼：

var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]} })

???? 2.獲取遍歷項索引：使用v-for遍歷有時候想得到每一項的索引值，可通過 index直接獲取， i n d e x 直 接 獲 取 ， index是vue直接提供的特性。我們也可以給索引取別名：

<div v-for="(idx, item) in items">{{ idx }} {{ item.message }}</div>

??? 3.template和v-for：有時候我們想每次輸出多條html標簽，那么我們可通過v-for和template配合使用達到效果：

<ul><template v-for="item in items"><li>{{ item.msg }}</li><li class="divider"></li></template></ul>

??? 4.操作數組：vue提供了一些數組操作方法，包括push、pop、shift、unshift、splice、sort、reverse等。如果我要對vue實例example1的集合特性items添加項，可以使用:

example1.items.push({message: ‘Baz’});

??? 如果要過濾數組選項，可以使用filter函數。例如下面的代碼找出item屬性message包含Foo的選項集合：

example1.items = example1.items.filter(function (item) { ? ?return item.message.match(/Foo/) })

??? 5.數組操作問題

??? 不能直接使用數組索引設置元素，例如vm.items[0] = {}，這樣設置的話，vue是不能檢測到數組的變化。可使用set方法：

example1.items. set(0, { childMsg: 'Changed!'})

??? 不能直接修改數組長度，這樣設置后vue檢測不到變化。可直接使用一個空數組替換：

example1.items = [];

??? 6.對象v-for:v-for也可直接遍歷對象屬性。

??? html代碼：

<ul id="repeat-object" class="demo"><li v-for="value in object">{{ $key }} : {{ value }} ? ?</li></ul>

??? js代碼：

new Vue({el: '#repeat-object',data: {object: {FirstName: 'John',LastName: 'Doe',Age: 30}} })

方法與事件處理器

??? 1.方法處理器：使用v-on監聽DOM事件，例如

??? html代碼：

<div id="example"><button v-on:click="greet">Greet</button></div

??? js代碼：

var vm = new Vue({el: '#example',data: {name: 'Vue.js'}, ? ?// 在 `methods` 對象中定義方法 ? ?methods: {greet: function (event) { ? ? ? ? ? ?// 方法內 `this` 指向 vmalert('Hello ' + this.name + '!') ? ? ? ? ? ?// `event` 是原生 DOM 事件 ? ? ? ? ? ?alert(event.target.tagName)}} })

??? 2.如何傳遞參數：可直接傳遞字符串或者對象，如果想傳遞事件對象可以使用$event：

<buttonv?on:click="say(′hello!′,eventHtml：<buttonv?on:click="say(′hello!′, event)">Submit</button>

??? js代碼和其他綁定一樣：

// ...methods: {say: function (msg, event) { ? ? ? ?// 現在我們可以訪問原生事件對象 ? ? ? ?event.preventDefault()} }

??? 3.數據邏輯和事件邏輯隔離：為了讓數據模型只處理數據邏輯，而不混雜其他邏輯，vue.js提供了兩個事件修飾符.prevent和.stop。

<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --><a v-on:click.stop.prevent="doThat"><!-- 只有修飾符 --><form v-on:submit.prevent></form>

??? 4.按鍵修飾符：可以使用按鍵編碼或者別名。

<!-- 只有在 keyCode 是 13 時調用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit">

??? vue.js提供的別名包括：enter、tab、delete、esc、space、up、down、left、Right。

??? vue.js也支持自定義別名，例如我們想控制F1按鍵事件，可以先給F1（編碼為112）定義一個別名：

// 可以使用 @keyup.f1Vue.directive('on').keyCodes.f1 = 112

??? 直接使用別名即可：

<input v-on:keyup.f1="doSomething">

表單控件綁定

??? 1.text控件：如果修改了text控件的值，span綁定的message會不同更新。

<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me">

??? 2.checkbox控件

<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

??? 多個checkbox綁定：每個checkbox綁定一個類型為數組的數據模型checkedNames。

??? html代碼：

input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames | json }}</span>

??? js代碼：

new Vue({el: '...',data: {checkedNames: []} })

??? 3.radio

<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span>

??? 4.select

??? 單選：

<select v-model="selected"><option selected>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span>

??? 多選：

<select v-model="selected" multiple><option selected>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selected | json }}</span>

??? select的option也可以動態通過v-for方式渲染。

??? html代碼：

<select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><span>Selected: {{ selected }}</span>

??? js代碼：

new Vue({el: '...',data: {selected: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }]} })

? ? ?以上的內容都是本人跟著官網學習記錄的筆記，內容都比較偏向基礎，如有哪些地方介紹有誤望各位指正。vue.js還有一個比較重要的知識點：組件。下篇內容應該主要分享vue.js組件，有需要的同學可關注下。

原文地址：http://www.cnblogs.com/w-wanglei/p/5851472.html

---

.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注

總結

以上是生活随笔為你收集整理的Vue.js先入个门看看的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。