概述
vue.js作為現(xiàn)在筆記熱門的JS框架离斩，使用比較簡(jiǎn)單易上手银舱，也成為很多公司首選的JS框架。 但是對(duì)于初學(xué)者可能學(xué)起來(lái)有些麻煩跛梗，所以推出《從零開(kāi)始學(xué)Vue》系列博客寻馏，本系列計(jì)劃推出19篇博客文章，這是最簡(jiǎn)單的入門第一篇核偿！ 如下是暫定的系列博客目錄操软，歡迎有興趣的同學(xué)關(guān)注學(xué)習(xí)~~
系列博客目錄一覽（暫定）
01 Vue.js入門
02 Vue.js實(shí)例
03插值、指令
04過(guò)濾器Filters
05計(jì)算屬性Computed
06 Class與Style綁定
07 監(jiān)聽(tīng)屬性 Watch
08 條件渲染
09 列表渲染v-for
10 事件處理
11 初識(shí)組件
12 命令行工具(CLI)搭建
13 介紹vue-cli工程目錄結(jié)構(gòu)
14 組件嵌套/組件CSS作用域Scoped
15 Props屬性傳值
16 傳值與傳址
17 自定義事件傳值
18 生命周期鉤子
19 路由
1.1 Vue.js?概念
Vue (讀音?/vju?/宪祥，類似于?view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是家乘，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用蝗羊。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手仁锯，還便于與第三方庫(kù)或既有項(xiàng)目整合耀找。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)业崖，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)野芒。
1.2?起步
官方指南假設(shè)你已了解關(guān)于?HTML、CSS?和?JavaScript?的中級(jí)知識(shí)双炕。如果你剛開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)狞悲，將框架作為你的第一步可能不是最好的主意——掌握好基礎(chǔ)知識(shí)再來(lái)吧！之前有其它框架的使用經(jīng)驗(yàn)會(huì)有幫助妇斤，但這不是必需的摇锋。
1.3?初試Vue.js
1.3.1?聲明式渲染：模板語(yǔ)法——插值（文本）
Vue.js?的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn)?DOM?的系統(tǒng)：
HTML：
<div id="app">? {{ message }}</div>
JS：
varapp =new Vue({
? el: '#app',
? data: {
? ? message: 'Hello Vue!'? }
})
瀏覽器輸出內(nèi)容：Hello Vue!
除了文本插值，我們還可以像這樣來(lái)綁定元素特性：
HTML：
<div id="app-2"><span v-bind:title="message">? ? 鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息站超！
? </span></div>
JS：
varapp2 =new Vue({
? el: '#app-2',
? data: {
? ? message: '頁(yè)面加載于 ' +new Date().toLocaleString()
? }
})
注意：這里我們遇到了一點(diǎn)新東西荸恕。v-bind?特性被稱為指令。指令帶有前綴?v-死相，以表示它們是?Vue?提供的特殊特性融求。可能你已經(jīng)猜到了算撮，它們會(huì)在渲染的?DOM?上應(yīng)用特殊的響應(yīng)式行為生宛。在這里县昂，該指令的意思是：“將這個(gè)元素節(jié)點(diǎn)的?title?特性和?Vue?實(shí)例的?message?屬性保持一致”。
1.3.2?模板語(yǔ)法——條件v-if與循環(huán)v-for
控制切換一個(gè)元素是否顯示也相當(dāng)簡(jiǎn)單：
HTML：
<div id="app-3"><p v-if="seen">現(xiàn)在你看到我了</p></div>
JS：
varapp3 =new Vue({
? el: '#app-3',
? data: {
? ? seen: true? }
})
瀏覽器輸出打用┟印：現(xiàn)在你看到我了
注意：這個(gè)例子演示了我們不僅可以把數(shù)據(jù)綁定到?DOM?文本或特性七芭，還可以綁定到?DOM?結(jié)構(gòu)。
還有其它很多指令蔑赘，每個(gè)都有特殊的功能狸驳。例如，v-for?指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表：
HTML：
<div id="app-4"><ol><li v-for="todo in todos">? ? ? {{ todo.text }}
? ? </li></ol></div>
JS：
varapp4 =new Vue({
? el: '#app-4',
? data: {
? ? todos: [
? ? ? { text: '學(xué)習(xí) JavaScript' },
? ? ? { text: '學(xué)習(xí) Vue' },
? ? ? { text: '整個(gè)牛項(xiàng)目' }
? ? ]
? }
})
在控制臺(tái)里缩赛，輸入?app4.todos.push({ text: '新項(xiàng)目' })耙箍，你會(huì)發(fā)現(xiàn)列表最后添加了一個(gè)新項(xiàng)目。
1.3.3?模板語(yǔ)法——處理用戶輸入
為了讓用戶和你的應(yīng)用進(jìn)行交互酥馍，我們可以用?v-on?指令添加一個(gè)事件監(jiān)聽(tīng)器辩昆，通過(guò)它調(diào)用在?Vue?實(shí)例中定義的方法：
HTML：
<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button></div>
JS：
varapp5 =new Vue({
? el: '#app-5',
? data: {
? ? message: 'Hello Vue.js!'? },
? methods: {
? ? reverseMessage: function () {
? ? ? this.message =this.message.split('').reverse().join('')
? ? }
? }
})
注意：在?reverseMessage?方法中，我們更新了應(yīng)用的狀態(tài)旨袒，但沒(méi)有觸碰?DOM——所有的?DOM?操作都由?Vue?來(lái)處理汁针，你編寫的代碼只需要關(guān)注邏輯層面即可。
1.3.4?雙向數(shù)據(jù)綁定
Vue?還提供了?v-model?指令砚尽，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定施无。
HTML：
<div id="app-6"><p>{{ message }}</p><input v-model="message"></div>
JS：
varapp6 =new Vue({
? el: '#app-6',
? data: {
? ? message: 'Hello Vue!'? }
})
1.3.5?組件化應(yīng)用構(gòu)建
組件系統(tǒng)是?Vue?的另一個(gè)重要概念，因?yàn)樗且环N抽象必孤，允許我們使用小型猾骡、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用敷搪。仔細(xì)想想兴想，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)：
在?Vue?里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè)?Vue?實(shí)例赡勘。在?Vue?中注冊(cè)組件很簡(jiǎn)單：
// 定義名為 todo-item 的新組件Vue.component('todo-item', {
? template: '
這是個(gè)待辦項(xiàng)
'})
現(xiàn)在你可以用它構(gòu)建另一個(gè)組件模板：
<ol><!-- 創(chuàng)建一個(gè) todo-item 組件的實(shí)例 --><todo-item></todo-item></ol>
但是這樣會(huì)為每個(gè)待辦項(xiàng)渲染同樣的文本嫂便，這看起來(lái)并不炫酷。我們應(yīng)該能從父作用域?qū)?shù)據(jù)傳到子組件才對(duì)狮含。讓我們來(lái)修改一下組件的定義顽悼，使之能夠接受一個(gè)?prop：
Vue.component('todo-item', {
? // todo-item 組件現(xiàn)在接受一個(gè)// "prop"，類似于一個(gè)自定義特性几迄。// 這個(gè) prop 名為 todo蔚龙。? props: ['todo'],
? template: '
{{ todo.text }}
'})
現(xiàn)在，我們可以使用?v-bind?指令將待辦項(xiàng)傳到循環(huán)輸出的每個(gè)組件中：
<div id="app-7"><ol><!--? ? ? 現(xiàn)在我們?yōu)槊總€(gè) todo-item 提供 todo 對(duì)象
? ? ? todo 對(duì)象是變量映胁，即其內(nèi)容可以是動(dòng)態(tài)的木羹。
? ? ? 我們也需要為每個(gè)組件提供一個(gè)“key”，稍后再
? ? ? 作詳細(xì)解釋。
? ? --><todo-item
? ? ? v-for="item in groceryList"? ? ? v-bind:todo="item"? ? ? v-bind:key="item.id"></todo-item></ol></div>Vue.component('todo-item', {
? props: ['todo'],
? template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
? el: '#app-7',
? data: {
? ? groceryList: [
? ? ? { id: 0, text: '蔬菜' },
? ? ? { id: 1, text: '奶酪' },
? ? ? { id: 2, text: '隨便其它什么人吃的東西' }
? ? ]
? }
})
盡管這只是一個(gè)刻意設(shè)計(jì)的例子坑填，但是我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個(gè)更小的單元抛人。子單元通過(guò)?prop?接口與父單元進(jìn)行了良好的解耦。我們現(xiàn)在可以進(jìn)一步改進(jìn)??組件脐瑰，提供更為復(fù)雜的模板和邏輯妖枚，而不會(huì)影響到父單元。
在一個(gè)大型應(yīng)用中苍在，有必要將整個(gè)應(yīng)用程序劃分為組件绝页，以使開(kāi)發(fā)更易管理。在后續(xù)教程中我們將詳述組件寂恬，不過(guò)這里有一個(gè)?(假想的)?例子续誉，以展示使用了組件的應(yīng)用模板是什么樣的：
<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view></div>
