vue1.0

vue

　　vue.js 是用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統，具備簡單、靈活的 API。從技術上講， Vue.js 集中在 MVVM 模式上的視圖模型層，並經過雙向數據綁定鏈接視圖和模型。實際的 DOM 操做和輸出格式被抽象出來成指令和過濾器。相比其它的 MVVM 框架，Vue.js 更容易上手。

Vue.js 是一個用於建立 Web 交互界面的庫。它讓你經過簡單而靈活的 API 建立由數據驅動的 UI 組件。

Vue1.0經常使用語法

var vm = new Vue({ 　　el: "選擇器", 掛載到頁面的那個元素裏，即肯定vue的做用範圍 外部可經過vm.$el訪問，獲得的是一個原生dom元素，可進行對應操做 　　a: '', //自定義屬性 外部可經過vm.$options訪問 　　data: { }, //實例屬性都在這裏面，外部經過實例名,即vm.$data調用 　　computed: { }, //計算屬性，也是實例屬性，只是以方法的形式存在，並能夠有邏輯運算的屬性 　　method: { }, //實例方法都在這裏 　　watch: { }, //對data和computed的屬性進行監聽，當屬性有變化時自動觸發，以方法的形式存在 外部經過$.watch調用 　　//注意：以上屬性和方法，實例內部都經過this調用,外部則經過對應的實例方法訪問 　　//在vue的生命週期過程當中，它自身還提供了一系列的鉤子函數供咱們使用，進行自定義邏輯的注入：　　　 　　created: function(){ 實例已經建立 } 　　beforeCompile: function(){ 模塊編譯以前 } 　　compiled: function(){ 模塊編譯以後；即模板佔位符被是內容替換} 　　ready: function(){ 模板插入到文檔中了；至關於window.onload }//Vue2.0已改成mounted 　　注意： 以上4個方法在對象被實例化後即按順序執行，如下2個方法需經過事件觸發，並經過調用 實例名.$destory() 才執行 　　beforeDestroy: function(){ 對象銷燬以前 } 　　destroyed: function(){ 對象銷燬以後 } });
 

Vue對象解析：

1，對象屬性

　　data、el、options、watch、computed

 

2，對象方法

　　生命週期之鉤子函數

 

3，對象實例訪問和調用屬性和方法

　　A:實例屬性調用：$options、$el、$data、$watch

　　這裏着重說下$watch，它的通常語法爲：

vm.$watch("監聽的實例屬性名",function() { // 對於監聽數據變化後的業務處理代碼 }); --淺度監聽 

若是監聽的屬性是基本數據類型，上面用法是沒有問題的，但若是監聽的屬性是對象，則對象內部的數據有變化，上面寫法是監聽不到的，須要進行一個參數進行深度監聽，具體語法以下:

vm.$watch("監聽的實例屬性名",function() { // 對於監聽數據變化後的業務處理代碼 },{deep: true});　　--深度監聽 

B:實例方法調用：$mount()、$log()、$destroy()

 

4，自帶過濾器&自定義過濾器

　　A：vue自帶的過濾器有：

　　　　capitalize(首字母大寫)、uppercase、currency、json( 至關於JSON.Stringify() )、debounce(後跟秒數，配合事件，延遲執行)

　　　　limitBy(參數1, 參數2) 經常使用語v-for數組，限制輸出數量和從哪輸出；參數1表明輸出幾個，參數2表明從第幾個輸出

　　　　filterBy(參數) 過濾數據，過濾含有參數的數據，配合input輸入框，經過輸入變量過濾，打到熱搜索的效果

　　　　orderBy(參數) 對數據排序，參數爲1時爲正序，爲-1時則倒序，其餘什麼參數呢？因此1和-1基本是經常使用狀況

　　B：自定義過濾器語法 （對於時間戳的處理是比較經常使用的自定義過濾器）

Vue.filter("過濾器名稱",function(參數...){ 　　　　... //業務處理 　　　　return ...; 　　});
 

5，自帶指令和自定義指令

　　指令是對HTML語法的擴展，必須以v-開頭，通常咱們口中的指令實際是指屬性指令，使用該屬性指令的元素講具備對應的屬性功能，下面的C則是指元素指令，與屬性指令有所區別

　　A：自帶指令：v-if、v-show、v-else、v-module、v-text、v-html、v-bind、v-on、v-el、v-cloak...

　　這裏着重說下v-text和v-cloak：在模板中咱們調用實例屬性數據時一般這樣{{ 實例屬性 }}，這樣在網速比較慢的狀況下，頁面出現閃爍的時候會把花括號和裏面的原始內容顯示出來，這樣用戶體驗很差，處理這種狀況有2種方式：

　　　　1, 在較大段落元素上使用v-clock指令，並設置該元素的css: display:none

　　　　2, 使用v-text/v-html代替花括號便可，Vue2.0也支持這樣作，且花括號方式可能被取消

　　B：自定義指令語法：

　Vue.directive("指令名稱",function(..){ 　　　　this.el.style.background = 'red'; //這裏的this表明new出來的實例，this.el表明原生的dom元素 　　}); 

模板中使用v-指令名稱進行使用，或v-指令名稱="參數"，能夠在調用指令是進行傳參

　　定義指令名稱時不加v-，模板使用時加v-

　　C: 自定義元素指令 （聽說用處不大，可忽略跳過，它所想要達到的效果，組件已超越）

Vue.elementDirective("自定義元素名稱",{ 　　　　bind: function() {}; 　　}); 

它不支持B狀況語法，但B狀況語法卻默認也是bind

 

6，自定義鍵盤信息

Vue.directive('on'),keyCodes.ctrl = 17; //17是ctrl的鍵碼 等號前的ctrl是定義ctrl的別名，能夠隨便取，實際綁定的就是鍵盤上的ctrl鍵 

模板調用@keydown.ctrl ="自定義方法"