一、寫在前面
隔了這么久才來(lái)出Vue的第二篇文章，真是墮落了，自己先懲罰下/(ㄒoㄒ)/~~
回過(guò)頭看自己第一篇相關(guān)文章《初試 Vue.js》（http://www.cnblogs.com/anniey/p/6307138.html），簡(jiǎn)直慘不忍睹、不忍直視、辣眼睛，怎么可以這么啰嗦，廢話好多哦，沒(méi)臉看下去了~(o′?ェ?｀o)
都說(shuō)入一門語(yǔ)言寫好hello wrold開始，我上篇文章就已經(jīng)打好這個(gè)頭啦，不管是Vue1，還是2，現(xiàn)在咱們繼續(xù)╰(*°▽°*)╯
二、起步
1.簡(jiǎn)單的方式
創(chuàng)建好一個(gè)html文件，通過(guò)script的方式引入，如下：
<script src="https://unpkg.com/vue"></script>
2.其他的方式
參考官網(wǎng)給出的選項(xiàng)：
https://cn.vuejs.org/guide/installation.html
三、數(shù)據(jù)的渲染
Vue.js的核心是采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn)DOM！
例1：
<div id="app">{{ message }}</div>
1 <script type="text/javascript">2 var app=new Vue({3 el:"#app",4 data:{5 message:"hello vue"6 }7 })8 </script>
這已經(jīng)生成了一個(gè)vue應(yīng)用，現(xiàn)在數(shù)據(jù)和DOM已經(jīng)綁定在一起，只要修改app.message，相應(yīng)的也會(huì)更新DOM！
例2：
<div id="app_2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div>
1 <script type="text/javascript">2 var app_2=new Vue({3 el:'#app_2',4 data:{5 message:'You loaded this page on '+new Date()6 }7 })8 </script>
例子2涉及到了Vue的特殊屬性 v-bind 指令，也會(huì)在相應(yīng)的DOM元素上渲染！
四、條件與循環(huán)
Vue不僅可以綁定DOM文本到數(shù)據(jù)，也可以綁定DOM結(jié)構(gòu)到數(shù)據(jù)！
1.條件
我們可以使用其中的 v-if 指令達(dá)到條件設(shè)置，而在實(shí)際應(yīng)用中控制切換一個(gè)元素的顯示也很簡(jiǎn)單。
例3：
1 <div id="app_3">2 <p v-if="flags">Now you see me</p>3 </div>
1 <script>2 var app_3=new Vue({3 el:'#app_3',4 data:{
5 flags:true6 }7 })8 </script>
同樣的可以修改data屬性來(lái)達(dá)到響應(yīng)。
2.循環(huán)
每個(gè)指令都有特殊的功能，v-for 指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)列表!
例4：
1 <div id="app_3_2">2 <ul>3 <li v-for="todo in todos">4 {{todo.text}}5 </li>6 </ul>7 </div>
1 var app_3_2=new Vue({ 2 el:'#app_3_2', 3 data:{ 4 todos:[ 5 { text:'Learn JavaScript' }, 6 { text:'Learn Vue' }, 7 { text:'Learn Other ' } 8 ] 9 }10 })
打開控制臺(tái)，輸入 app_3_2.todos.push({ text: '新項(xiàng)目' })，你會(huì)發(fā)現(xiàn)列表中添加了一個(gè)新項(xiàng)。
五、雙向綁定
Vue 提供了一個(gè) v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。
例5：
1 <div id="app5">2 <input type="text" v-model="msg2" />3 <p>{{msg2}}</p>4 </div>
1 var app5 = new Vue({2 el: '#app5',3 data: {4 msg2: '# hello '5 }6 })
六、界面交互
為了讓用戶和你的應(yīng)用進(jìn)行互動(dòng)，我們可以用 v-on 指令綁定一個(gè)事件監(jiān)聽器，通過(guò)它調(diào)用我們 Vue 實(shí)例中定義的方法!
例6：
1 <div id="app6">2 <p>{{message}}</p>3 <button v-on:click="reverseMessage">Reverse Message</button>4 </div>
1 var app6=new Vue({ 2 el:'#app6', 3 data:{ 4 message:'Hello Vue.js!' 5 }, 6 methods:{ 7 reverseMessage:function(e){ 8 this.message=this.message.split('').reverse().join(''); 9 }10 }11 })
注意：在methods方法中，只更新了狀態(tài)，沒(méi)有觸動(dòng)到DOM!
七、組件構(gòu)建（簡(jiǎn)單版）
一定要先注冊(cè)完組件，再來(lái)實(shí)例化！
一定要確保在初始化根實(shí)例之前注冊(cè)了組件！
否則未注冊(cè)就使用會(huì)報(bào)錯(cuò)的！
組件比較強(qiáng)大，可以擴(kuò)展，封裝可重用代碼，就是比較膩害(*@ο@*) 哇～一定要好好的熟悉熟悉它！
例7：
1 <div id="app_7">2 <ol>3 <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>4 </ol>5 </div>
1 Vue.component('todo-item',{ 2 props:['todo'], 3 template:'<li>{{todo.text}}</li>' 4 }); 5 var app_7=new Vue({ 6 el:'#app_7', 7 data:{ 8 itemsList:[ 9 {text:'Vegetables'},10 {text:'Cheese'},11 {text:'Whatever else humans are supposed to eat'}12 ]13 }14 })
組件是很重要的一部分，當(dāng)你熟悉完以上的內(nèi)容后要好好研究組件系統(tǒng)，其中涉及到許多內(nèi)容需要更詳細(xì)的掌握。
在實(shí)際項(xiàng)目中使用時(shí)，多個(gè)頁(yè)面有相同的part，組件復(fù)用簡(jiǎn)直厲害的不要不要~O(∩_∩)O~~
---------------------------------------------------------------
vue的基本功能介紹就到這里了，謝謝思密達(dá)O(∩_∩)O~~
http://www.cnblogs.com/anniey/p/7147029.html
延伸閱讀
- Vue.js之深入淺出 2017-07-25
- vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置 2017-07-24
- Vue.js學(xué)習(xí)筆記（三） - 修飾符 2017-07-16
- vue.js+UEditor集成 [前后端分離項(xiàng)目] 2017-07-11
- vue.js實(shí)現(xiàn)內(nèi)部自定義指令和全局自定義指令------directive 2017-07-11
- Vue.js學(xué)習(xí)筆記（二） - 常用模板語(yǔ)法 2017-07-11
- vue.js 組件之間傳遞數(shù)據(jù) 2017-07-10
- Vue.js 基礎(chǔ)指令實(shí)例講解（各種數(shù)據(jù)綁定、表單渲染大總結(jié)）——新手入門、高手進(jìn)階第一篇 2017-07-06
- Vue.js組件之間的通信 2017-06-19
- 前端架構(gòu)之路：使用Vue.js開始第一個(gè)項(xiàng)目 2017-05-23
Vue.js之深入淺出