vue基本用法總結
阿新 • • 發佈：2018-12-03
vue.js
是一個構建使用者介面的框架
是一個輕量級MVVM（Model-View-ViewModel)框架，和angular，react框架類似，其實就是所謂的資料雙向繫結
資料驅動+元件化的前端開發（核心思想）
通過簡單的api實現**響應式的資料繫結**和**組合的檢視元件
更容易上手，小巧。
angular 指令ng-xxx 開頭 所有屬性和方法都儲存在$scope中 由google維護
vue 指令以v-xxx開頭 HTML程式碼+JSON資料，再建立一個vue例項 由個人維護，**猶雨溪**，華人，目前就職於阿里巴巴，14年2月開源了vue
共同點： 都不相容低版本ie
vue2.0和1.0相比，最大的變化就是引入了Virtual DOM（虛擬DOM），頁面更新效率更高，速度更快。 helloword的angular實現 js: let app-angular.module('myApp',[]); app-controller('MyController',['$scope',function($scope){ $scope.msg='hello world'; }]); html: <html ng-app="myApp"> <div ng-controller="MyController"> {{msg}} </div> </html> vue的實現 js: new Vue({ el:'#itany',//指定關聯的選擇器 data:{ msg:'Hello World', name:'tom' } }); html: <div id="itany"> {{msg}} </div>
什麼是指令： 用來擴充套件html標籤的功能 angular中常用的指令： ng-model ng-repeat ng-click ng-show/ng-hide ng-if
vue中常用的指令 v-model 雙向資料繫結，一般用於表單元素 v-for 對陣列或物件進行迴圈操作，使用的是v-for,不是v-repeat 在vue1.0中提供了隱式變數，$index，$key 在vue2.0中去除了隱式變數，已被廢除 v-on 用來繫結事件，用法：v-on:事件="函式" v-show/v-if用來顯示或隱藏元素，v-show是通過display實現，v-if是每次刪除後再重新建立，與angular中類似。
事件簡寫 v-on:click="show" @click="show"
事件物件$event 包含事件相關資訊，如事件源，事件型別，偏移量 target,type,offsetx,offsety
事件冒泡 阻止事件冒泡： 1）原生js方式，依賴於事件物件 2）vue方式，不依賴於事件物件
事件預設行為 阻止預設行為 1）原生js方式，依賴於事件物件
鍵盤事件 回車：@keydown.13或@keydown.enter 上：@keydown.38或@keydown.up 預設沒有@keydown.a/b/c...事件，可以自定義鍵盤事件，也稱為自定義鍵碼或自定義鍵位別名
事件修飾符 .stop - 呼叫event.stopPropagation() .prevent - 呼叫event.preventDefault() .(keyCode|keyAlias) - 只當事件是從特定鍵觸發時才觸發回撥 .native - 監聽元件根元素的原生事件 .once - 只觸發一次回撥
屬性繫結和屬性的編寫 v-bind 用於屬性的繫結，v-bind:屬性="" 屬性的簡寫： v-bind:src=""簡寫為:src=""
class屬性和style屬性 繫結class和style屬性時可以傳json，等方式
模板 vue.js使用基於HTML的模板語法，可以將DOM繫結到Vue例項中的資料 模板就是{{}}，用來進行資料繫結，顯示在頁面中 也稱為Mustache語法
資料繫結的方式 a.雙向繫結 v-model b.單向繫結 方式一：使用兩對大括號{{}},可能會出現閃爍的問題，可以使用v-cloak解決 方式二：使用v-text,v-html 其他指令 v-once 資料只繫結一次 v-pre 不編譯，直接原樣顯示
過濾器 用來過濾模型資料，在顯示之前進行資料處理和篩選 語法：{{data|filter(引數) | filter2(引數)}}
內建過濾器 vue2.0刪除了所有內建過濾器，全部被廢除 解決方式： a.使用第三方工具庫，如loadash,date-fns日期格式化,accounting.js貨幣格式化 b.使用自定義過濾器
自定義過濾器 分類：全域性過濾器，區域性過濾器
自定義過濾器 使用全域性方法vue.filter(過濾器ID，過濾器函式)
angular 指令ng-xxx 開頭 所有屬性和方法都儲存在$scope中 由google維護
vue 指令以v-xxx開頭 HTML程式碼+JSON資料，再建立一個vue例項 由個人維護，**猶雨溪**，華人，目前就職於阿里巴巴，14年2月開源了vue
共同點： 都不相容低版本ie
vue2.0和1.0相比，最大的變化就是引入了Virtual DOM（虛擬DOM），頁面更新效率更高，速度更快。 helloword的angular實現 js: let app-angular.module('myApp',[]); app-controller('MyController',['$scope',function($scope){ $scope.msg='hello world'; }]); html: <html ng-app="myApp"> <div ng-controller="MyController"> {{msg}} </div> </html> vue的實現 js: new Vue({ el:'#itany',//指定關聯的選擇器 data:{ msg:'Hello World', name:'tom' } }); html: <div id="itany"> {{msg}} </div>
什麼是指令： 用來擴充套件html標籤的功能 angular中常用的指令： ng-model ng-repeat ng-click ng-show/ng-hide ng-if
vue中常用的指令 v-model 雙向資料繫結，一般用於表單元素 v-for 對陣列或物件進行迴圈操作，使用的是v-for,不是v-repeat 在vue1.0中提供了隱式變數，$index，$key 在vue2.0中去除了隱式變數，已被廢除 v-on 用來繫結事件，用法：v-on:事件="函式" v-show/v-if用來顯示或隱藏元素，v-show是通過display實現，v-if是每次刪除後再重新建立，與angular中類似。
事件簡寫 v-on:click="show" @click="show"
事件物件$event 包含事件相關資訊，如事件源，事件型別，偏移量 target,type,offsetx,offsety
事件冒泡 阻止事件冒泡： 1）原生js方式，依賴於事件物件 2）vue方式，不依賴於事件物件
事件預設行為 阻止預設行為 1）原生js方式，依賴於事件物件
鍵盤事件 回車：@keydown.13或@keydown.enter 上：@keydown.38或@keydown.up 預設沒有@keydown.a/b/c...事件，可以自定義鍵盤事件，也稱為自定義鍵碼或自定義鍵位別名
事件修飾符 .stop - 呼叫event.stopPropagation() .prevent - 呼叫event.preventDefault() .(keyCode|keyAlias) - 只當事件是從特定鍵觸發時才觸發回撥 .native - 監聽元件根元素的原生事件 .once - 只觸發一次回撥
屬性繫結和屬性的編寫 v-bind 用於屬性的繫結，v-bind:屬性="" 屬性的簡寫： v-bind:src=""簡寫為:src=""
class屬性和style屬性 繫結class和style屬性時可以傳json，等方式
模板 vue.js使用基於HTML的模板語法，可以將DOM繫結到Vue例項中的資料 模板就是{{}}，用來進行資料繫結，顯示在頁面中 也稱為Mustache語法
資料繫結的方式 a.雙向繫結 v-model b.單向繫結 方式一：使用兩對大括號{{}},可能會出現閃爍的問題，可以使用v-cloak解決 方式二：使用v-text,v-html 其他指令 v-once 資料只繫結一次 v-pre 不編譯，直接原樣顯示
過濾器 用來過濾模型資料，在顯示之前進行資料處理和篩選 語法：{{data|filter(引數) | filter2(引數)}}
內建過濾器 vue2.0刪除了所有內建過濾器，全部被廢除 解決方式： a.使用第三方工具庫，如loadash,date-fns日期格式化,accounting.js貨幣格式化 b.使用自定義過濾器
自定義過濾器 分類：全域性過濾器，區域性過濾器
自定義過濾器 使用全域性方法vue.filter(過濾器ID，過濾器函式)