一垒拢、Vue插件介紹
1.定義：
????vue是漸進(jìn)式開(kāi)發(fā)框架旬迹，即如果有現(xiàn)成的服務(wù)端應(yīng)用，可以將vue作為該應(yīng)用的一部分嵌入其中求类，可先用核心的庫(kù)奔垦，若有特殊需求，再加入特定的插件尸疆，這樣會(huì)有更加豐富的交互體驗(yàn)椿猎。
2.vue的特點(diǎn)：
- MVVM模式；
- 編碼簡(jiǎn)潔寿弱，體積小犯眠，效率高；
- 只關(guān)注視圖層（UI）脖捻，輕松引入vue插件和其他第三方開(kāi)發(fā)項(xiàng)目；
- 作用：可動(dòng)態(tài)構(gòu)建用戶界面兆衅，（構(gòu)建指將后臺(tái)數(shù)據(jù)動(dòng)態(tài)展示在前端界面）
- 聲明式編程
3.vue與其他插件的區(qū)別：
- 借鑒angular的模板和數(shù)據(jù)綁定技術(shù)
- 借鑒react的組件化和虛擬DOM技術(shù)
*詳細(xì)的暫不寫(xiě)地沮，學(xué)完react、node羡亩、angular之后進(jìn)行總結(jié)
4.vue擴(kuò)展插件：
- vue-cli : （vue腳手架 )
- vue-resource/axios : （ajax請(qǐng)求)
- vue-router : （vue 路由)
- vuex : （狀態(tài)管理）
- vue-lazyload : （圖片懶加載)
- vue-scroller : （頁(yè)面滑動(dòng)相關(guān)）
- element-ui : （基于vue的UI組件庫(kù) pc端)
- mint-ui : （基于vue的UI組件庫(kù) 移動(dòng)端 ）
5.vue開(kāi)發(fā)常用工具：
- 調(diào)試工具：vue-devtools 下載地址：https://github.com/vuejs/vue-devtools
安裝方法參考：https://blog.csdn.net/zgrkaka/article/details/54614212
二摩疑、Vue基本使用
2.1.1 輸入框變化時(shí)，下方文本同步更改
<!-- 1.引入vue.js
2.創(chuàng)建vue對(duì)象畏铆，el:指定根element（選擇器）雷袋，data:初始化數(shù)據(jù)（頁(yè)面可訪問(wèn)）
3. 雙向數(shù)據(jù)綁定：v-modal
4. 顯示數(shù)據(jù) {{XXX}}
5. mvvm實(shí)現(xiàn)原理
model: 模型 ，數(shù)據(jù)對(duì)象data view<==== Data bindings<===model
view: 視圖辞居，模板頁(yè)面 view===> dom Listeners===>model
viewModel: 視圖模型楷怒，是vue的實(shí)例
-->
<div id="app"> <!--View ,包含DOM-->
<input type="text" v-model="username">
<p>Hello,{{ message }}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
// 創(chuàng)建的vue實(shí)例對(duì)象 是ViewModal
// View Modal中有 dom Listeners,Data bindings
var vm = new vue({ // 配置對(duì)象
el: '#app', // element:選擇器
data: { // 數(shù)據(jù)（model）
username: 'username'
}
})
</script>
mvvm模式圖
參考：vue.js官網(wǎng):https://cn.vuejs.org/
