Vue.js 是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue 只關注視圖層並且采用自底向上增量開發的設計。
Vue.js作為一個后起的前端框架，借鑒了Angular 、React等現代前端框架/庫的諸多特點，取得了相當不錯的成績。Vue.js 自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。OK，讓我們一起來學習一下吧！
-_-
創建一個Vue.js的Hello Vue示例非常簡單：
1、引入vue.js庫
直接用 <script> 標簽引入：
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
2、創建Vue實例
每個 Vue 應用都是通過 Vue 函數創建一個新的 Vue 實例開始的它連接 View 與 Model：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 博客園</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!--View--> 10 <div id="app"> 11 <p>{{ message }}</p> 12 </div> 13 14 <script> 15 new Vue({ 16 el: '#app', 17 data: { 18 message: 'Hello Vue.js!' // Model 19 } 20 }) 21 </script> 22 </body> 23 </html>
- Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
- Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。
Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。
一、插值
① 文本
數據綁定最常見的形式就是使用“Mustache”語法 {{...}}（雙大括號）的文本插值：
<div id="app"> <p>{{ message }}</p> </div>
② 原始Html
雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML ，你需要使用v-html 指令：
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Hello Vue.js!</h1>' } }) </script>
③ 屬性
mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用v-bind 指令。
以下實例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
<div id="app"> <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> </div> <script> new Vue({ el: '#app', data:{ class1: false } }); </script>
效果：
④表達式
Vue.js 都提供了完全的 JavaScript 表達式支持。
<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Vue</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script>
二、指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式(v-for 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。如下例子：
<div id="app"> <p v-if="seen">我出現了！！</p> //這里， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。 </div> <script> new Vue({ el: '#app', data: { seen: true //false就隱藏了 } }) </script>
參數
一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 屬性：
<div id="app"> <pre><a v-bind:href="url">vue.js</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.cnblogs.com' } }) </script>
在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
<a v-on:click="doSomething">
在這里參數是監聽的事件名。
修飾符
修飾符是以半角句號 . 指明的特殊后綴，用於指出一個指定應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
三、用戶輸入
在 input 輸入框中我們可以使用 v-model 指令來實現雙向數據綁定：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: '你好VUE!' } }) </script>
效果：
按鈕的事件我們可以使用 v-on 監聽事件，並對用戶的輸入進行響應。
以下實例在用戶點擊按鈕后對字符串進行反轉操作：
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>
效果：
四、過濾器
Vue.js和AngularJS一樣 允許你自定義過濾器，被用作一些常見的文本格式化。由"管道符"指示, 格式如下：
<!-- 在兩個大括號中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>
過濾器函數接受表達式的值作為第一個參數。
以下實例對輸入的字符串第一個字母轉為大寫：
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'vue' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
過濾器串聯：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數，因此可以接受參數：
{{ message | filterA('arg1', arg2) }}
這里，message 是第一個參數，字符串 'arg1' 將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數。
五、縮寫
① v-bind 縮寫
Vue.js 為兩個最為常用的指令提供了特別的縮寫：
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>
② v-on 縮寫
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
五、Vue 實例
① 構造器
每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例來啟動的：
var vm = new Vue({
// 選項
})
② 屬性與方法
每個 Vue 實例都會代理其 data 對象里所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調將在 `vm.a` 改變后調用
})
條件判斷
① v-if
條件判斷使用 v-if 指令在元素 和 template 中使用 v-if 指令：
<div id="app"> <p v-if="seen">哈哈你看到我了</p> <template v-if="ok"> <h1>吃魚大神</h1> <p>為了夢想！</p> <p>巴拉巴拉小魔仙！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
這里， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
② v-else
可以用 v-else 指令給 v-if 添加一個 "else" 塊
隨機生成一個數字，判斷是否大於0.5，然后輸出對應信息：
<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>
③ v-else-if
v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用：
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
④ v-show
我們也可以使用 v-show 指令來根據條件展示元素：
<h1 v-show="ok">Hello!</h1>
v-if vs v-show
v-if是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。- 相比之下，
v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。 - 一般來說，
v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件不太可能改變，則使用v-if較好。
循環使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表：
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'bokeyuan' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
模板中使用 v-for：
<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>
v-for 迭代對象
v-for 可以通過一個對象的屬性來迭代數據：
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: 博客園', url: 'http://www.cnblongs.com', slogan: '代碼改變世界！' } } }) </script>
你也可以提供第二個的參數為鍵名：
<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>
第三個參數為索引：
<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>
v-for 迭代整數
v-for 也可以循環整數
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
感謝關注我
