vueJS · 前端

http://www.hmoore.net/a173512/app_dcloud/1891743 時間軸點：Angular》React》vue Angular：模板與數據綁定 React：組件與虛擬DOM（國內大公司用的多些） vue：結合Angular與React（國內小公司用的多些） ### **兼容性** Vue**不支持**IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的瀏覽器](https://caniuse.com/#feat=es5) ### **vue擴展插件** 1)ue-cli: vue腳手架 2) vue-resource(axios): ajax請求 3) vue-router:路由 4) vuex:狀態管理 5) vue-lazyload:圖片懶加載 6) vue-scroller:頁面滑動相關 7) mint-ui:基于vue的U1組件庫(移動端) 8) element-ui:基于vue的Ul組件庫(PC端) 數據綁定與雙向數據綁定數據綁定：數據在頁面與內存中的變量自動轉移雙向數據綁定：如果2個方向數據都可以自動轉移 vue的MVVM ![](https://img.kancloud.cn/0c/f0/0cf0a6bfc6001a92a4ebb350a2a3f66f_732x350.png) MVVM: model:模型,數據對象(data) view: 視圖,模板頁面 viewModel: 視圖模型(Vue的實例) **聲明式開發與命令式開發** 聲明式開發:按照別人的語法,寫一些特定的代碼例如此例中向input添加v-model屬性就可以獲取input的值并保存到vue實例的data.username里命令式開發:例如jquery這種,按照流程的編碼 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="test"> <input type="text" v-model="username" name="uname" id="" value="" /> <p>hello {{username}}</p> <p v-text="username">1</p> </div> <p>{{username}}</p> <script type="text/javascript"> var vm=new Vue({ el:'#test', data:{ username:'dash' } }); </script> </body> </html> ``` 1.模板的理解: 動態的html 頁面包含了一些S語法代碼雙大括號表達式指令(以v-開頭的自定義標簽屬性) 2,雙大括號表達式語法: {{fexp}}或{{{ffexp}}} 功能：向頁面輸出數據可以調用對象的方法 3,指令一: 強制數據綁定功能：指定變化的屬性值完整寫法:v-bind:xxx='yyy' //yyy公作為表達式解析執行簡潔寫法：:xxx='yyy' 4.指令二：綁定事件監聽功能：綁定指定事件名的回調函數完整寫法: v-on:click='xxx' 簡潔寫法： @click='xxx'