Vue.js 教程
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架肪康。
Vue 只關(guān)注視圖層彻况， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來(lái)非常簡(jiǎn)單陈醒，本教程基于 Vue 2.1.8 版本測(cè)試。
第一個(gè)HelloWord
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
?
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
Vue.js 安裝
1瞧甩、獨(dú)立版本
我們可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用 <script> 標(biāo)簽引入钉跷。
下載 Vue.js
2、使用 CDN 方法
以下推薦國(guó)外比較穩(wěn)定的兩個(gè) CDN亲配，國(guó)內(nèi)還沒(méi)發(fā)現(xiàn)哪一家比較好尘应，目前還是建議下載到本地。
BootCDN（國(guó)內(nèi)） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致吼虎。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
BootCDN（國(guó)內(nèi)）
<div id="app"> <p>{{ message }}</p></div>
嘗試一下 ?
unpkg（推薦）
<div id="app"> <p>{{ message }}</p></div>
嘗試一下 ?
cdnjs
<div id="app">
<p>{{ message }}</p>
</div>
3犬钢、NPM 方法
由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm思灰，安裝使用介紹參照：使用淘寶 NPM 鏡像玷犹。
npm 版本需要大于 3.0，如果低于此版本需要升級(jí)它：
# 查看版本$ npm -v2.3.0#升級(jí) npmcnpm install npm -g
在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝：
# 最新穩(wěn)定版$ cnpm install vue
命令行工具
Vue.js 提供一個(gè)官方命令行工具洒疚，可用于快速搭建大型單頁(yè)應(yīng)用歹颓。
# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 這里需要進(jìn)行一些配置坯屿，默認(rèn)回車即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
進(jìn)入項(xiàng)目，安裝并運(yùn)行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
注意：Vue.js 不支持 IE8 及其以下 IE 版本
Vue.js 目錄結(jié)構(gòu)
目錄解析
| 目錄/文件 | 說(shuō)明 |
|---|---|
| build | 最終發(fā)布的代碼存放位置巍扛。 |
| config | 配置目錄领跛，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的撤奸。 |
| dist | 打包后發(fā)布時(shí)文件目錄 |
| node_modules npm | 加載的項(xiàng)目依賴模塊 |
| src | 這里是我們要開(kāi)發(fā)的目錄吠昭，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件 |
| assets | 放置一些圖片胧瓜，如logo等矢棚。 |
| components | 目錄里面放了一個(gè)組件文件，可以不用府喳。 |
| App.vue | 項(xiàng)目入口文件蒲肋，我們也可以直接將組建寫(xiě)這里，而不使用 components 目錄钝满。 |
| main.js | 項(xiàng)目的核心文件兜粘。 |
| static | 靜態(tài)資源目錄，如圖片舱沧、字體等妹沙。 |
| test | 初始測(cè)試目錄，可刪除 |
| .xxxx文件 | 這些是一些配置文件熟吏，包括語(yǔ)法配置距糖，git配置等。 |
| index.html | 首頁(yè)入口文件牵寺，你可以添加一些 meta 信息或同統(tǒng)計(jì)代碼啥的悍引。 |
| package.json | 項(xiàng)目配置文件。 |
| README.md | 項(xiàng)目的說(shuō)明文檔帽氓，markdown 格式 |
在前面我們打開(kāi) APP.vue 文件趣斤，代碼如下（解釋在注釋中）：
src/APP.vue
<!-- 展示模板 -->
<template>
<div id="app">
<hello></hello>
</div>
</template>
<script>
// 導(dǎo)入組件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 樣式代碼 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下來(lái)我們可以嘗試修改下初始化的項(xiàng)目，將 Hello.vue 修改為以下代碼：
src/commponents/Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '歡迎來(lái)到菜鳥(niǎo)教程黎休！'
}
}
}
</script>
Vue.js 模板語(yǔ)法
Vue.js 使用了基于 HTML 的模版語(yǔ)法浓领，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)势腮。
結(jié)合響應(yīng)系統(tǒng)联贩，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上捎拯。
插值
文本
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 {{...}}（雙大括號(hào)）的文本插值：
文本插值
<div id="app">
<p>{{ message }}</p>
</div>
Html
使用 v-html 指令用于輸出 html 代碼：
v-html 指令
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鳥(niǎo)教程</h1>'
}
})
</script>
屬性
HTML 屬性中的值應(yīng)使用 v-bind 指令泪幌。
以下實(shí)例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
表達(dá)式
Vue.js 都提供了完全的 JavaScript 表達(dá)式支持祸泪。
JavaScript 表達(dá)式
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥(niǎo)教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
指令
指令是帶有 v- 前綴的特殊屬性吗浩。
指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到 DOM 上没隘。如下例子：
實(shí)例
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
參數(shù)
參數(shù)在指令后以冒號(hào)指明懂扼。例如， v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性：
實(shí)例
<div id="app">
<pre><a v-bind:href="url">菜鳥(niǎo)教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
修飾符
修飾符是以半角句號(hào) . 指明的特殊后綴右蒲，用于指出一個(gè)指定應(yīng)該以特殊方式綁定微王。例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
用戶輸入
在 input 輸入框中我們可以使用 v-model 指令來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
字符串反轉(zhuǎn)
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
過(guò)濾器
Vue.js 允許你自定義過(guò)濾器品嚣，被用作一些常見(jiàn)的文本格式化。由"管道符"指示, 格式如下：
<!-- 在兩個(gè)大括號(hào)中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
過(guò)濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)钧大。
縮寫(xiě)
v-bind 縮寫(xiě)
Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫(xiě)：
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url"></a>
<!-- 縮寫(xiě) -->
<a :href="url"></a>
v-on 縮寫(xiě)
<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫(xiě) -->
<a @click="doSomething"></a>
Vue 實(shí)例
構(gòu)造器
每個(gè) Vue.js 應(yīng)用都是通過(guò)構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例來(lái)啟動(dòng)的：
var vm = new Vue({
// 選項(xiàng)
})
屬性與方法
每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
除了 data 屬性翰撑， Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $啊央，以便與代理的 data 屬性區(qū)分眶诈。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個(gè)實(shí)例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個(gè)回調(diào)將在 `vm.a` 改變后調(diào)用
})
Vue.js 條件與循環(huán)
條件判斷
v-if
v-else
v-else-if
顯示
v-show
循環(huán)語(yǔ)句
循環(huán)使用 v-for 指令。
v-for 指令需要以 item in items 形式的特殊語(yǔ)法瓜饥， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名逝撬。
v-for 可以綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表：
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: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
v-for 迭代對(duì)象
v-for 可以通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)
你也可以提供第二個(gè)的參數(shù)為鍵名：
v-for
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
第三個(gè)參數(shù)為索引：
v-for
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
v-for 迭代整數(shù)
v-for 也可以循環(huán)整數(shù)
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
Vue.js 計(jì)算屬性
計(jì)算屬性關(guān)鍵詞: computed。
計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的乓土。
可以看下以下反轉(zhuǎn)字符串的例子：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
computed vs methods
我們可以使用 methods 來(lái)替代 computed宪潮，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存趣苏，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值狡相。而使用 methods ，在重新渲染的時(shí)候食磕，函數(shù)總會(huì)重新調(diào)用執(zhí)行尽棕。
Vue.js 樣式綁定
Vue.js class
class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式彬伦，我們可以用 v-bind 來(lái)設(shè)置樣式屬性滔悉。
Vue.js v-bind 在處理 class 和 style 時(shí)， 專門(mén)增強(qiáng)了它单绑。表達(dá)式的結(jié)果類型除了字符串之外回官，還可以是對(duì)象或數(shù)組。
數(shù)組語(yǔ)法
我們可以把一個(gè)數(shù)組傳給 v-bind:class 询张，實(shí)例如下：
<div v-bind:class="[activeClass, errorClass]"></div>
Vue.js style(內(nèi)聯(lián)樣式)
1孙乖、我們可以在 v-bind:style 直接設(shè)置樣式：
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello</div>
</div>
2、也可以直接綁定到一個(gè)樣式對(duì)象，讓模板更清晰：
<div id="app"> <div v-bind:style="styleObject">hello</div</div>
3唯袄、v-bind:style 可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">hello</div></div>
Vue.js 事件處理器
事件監(jiān)聽(tīng)可以使用 v-on 指令：
v-on
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次弯屈。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語(yǔ)句：
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
事件修飾符
Vue.js 為 v-on 提供了事件修飾符來(lái)處理 DOM 事件細(xì)節(jié)恋拷，如：event.preventDefault() 或 event.stopPropagation()资厉。
Vue.js通過(guò)由點(diǎn)(.)表示的指令后綴來(lái)調(diào)用修飾符。
- .stop
- .prevent
- .capture
- .self
- .once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件至少觸發(fā)一次蔬顾，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
全部的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
Vue.js 表單
這節(jié)我們?yōu)榇蠹医榻B Vue.js 表單上的應(yīng)用宴偿。
你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。
v-model 會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素诀豁。
輸入框
實(shí)例中演示了 input 和 textarea 元素中使用 v-model 實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="編輯我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鳥(niǎo)教程\r\nhttp://www.runoob.com'
}
})
</script>
修飾符
.lazy
在默認(rèn)情況下窄刘， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy 舷胜，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值）娩践，可以添加一個(gè)修飾符 number 給 v-model 來(lái)處理輸入值：
<input v-model.number="age" type="number">
這通常很有用，因?yàn)樵?type="number" 時(shí) HTML 中輸入的值也總是會(huì)返回字符串類型烹骨。
.trim
如果要自動(dòng)過(guò)濾用戶輸入的首尾空格翻伺，可以添加 trim 修飾符到 v-model 上過(guò)濾輸入：
<input v-model.trim="msg">
Vue.js 組件
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。
組件可以擴(kuò)展 HTML 元素沮焕，封裝可重用的代碼吨岭。
組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：
注冊(cè)一個(gè)全局組語(yǔ)法格式如下：
Vue.component(tagName, options)
tagName 為組件名峦树，options 為配置選項(xiàng)辣辫。注冊(cè)后，我們可以使用以下方式來(lái)調(diào)用組件：
<tagName></tagName>
Prop
prop 是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義屬性魁巩。
父組件的數(shù)據(jù)需要通過(guò) props 把數(shù)據(jù)傳給子組件络它，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"：
Vue.js 自定義指令
除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ), Vue 也允許注冊(cè)自定義指令。
下面我們注冊(cè)一個(gè)全局指令 v-focus, 該指令的功能是在頁(yè)面加載時(shí)歪赢，元素獲得焦點(diǎn)：
<div id="app">
<p>頁(yè)面載入時(shí)化戳，input 元素自動(dòng)獲取焦點(diǎn)：</p>
<input v-focus>
</div>
<script>
// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 創(chuàng)建根實(shí)例
new Vue({
el: '#app'
})
</script>
Vue.js 路由
本章節(jié)我們將為大家介紹 Vue.js 路由埋凯。
Vue.js 路由允許我們通過(guò)不同的 URL 訪問(wèn)不同的內(nèi)容点楼。
通過(guò) Vue.js 可以實(shí)現(xiàn)多視圖的單頁(yè)Web應(yīng)用（single page web application，SPA）白对。
Vue.js 路由需要載入 vue-router 庫(kù)
中文文檔地址：vue-router文檔掠廓。
參考鏈接
菜鳥(niǎo)教程
官方文檔：http://vuejs.org/v2/guide/syntax.html
中文文檔: https://cn.vuejs.org/v2/guide/syntax.html
