vue淺析隨筆

Evernote Export

MVVM

不須要經過控制器更新視圖，而是經過雙向綁定，VM作的是進行的處理調度

 

M   modular 數據

VM   調度者

V  dom結構

 

MVC 和MVVM之間的區別：MVC數據流通是單向的，數據須要控制器進行處理分配

                                            MVVM數據流通是雙向的，數據不只過VM進行邏輯處理也能夠更新視圖

 

指令

 

v-text
v-html
v-bind:title="msg" 簡寫 :title="msg"	綁定標籤屬性，使屬性中能夠嵌入js代碼     用法：經過類來切換狀態 :class="[aa,bb,cc,{aa}]"	簡寫：
v-on:click="show" 簡寫： @click
插入符 {{}}	存在網速加載閃爍的狀況 配合 v-cloak使用
@input	輸入框輸入觸發，實時觸發，中文也能夠
v-model	v-model能夠實現數據雙向綁定，只能運用在表單元素中，能夠運用在多選
v-for	<tr v-for ="item in sech(keywoed)" : key ="item.id">
v-if	true的時候會建立渲染元素 false的時候會從dom結構中刪除   很耗性能，少用
v-show	false的時候會使元素隱藏   display：none

 

事件修飾符，

能夠連寫

 

@click.stop=""	阻止冒泡，整個冒泡都不會發生
@click.prevent	阻止瀏覽器默認行爲
@click.capture	捕獲機制
@click.self	實現只有點擊當前元素纔會觸發該事件ai，只會阻止自身冒泡行爲
@click.prevent.one	只觸發一次事件
@keyup.enter   @keyup.13	按enter鍵的時候觸發
@keyup.up	按上鍵觸發
@keyup.left	←
@keyup.right	→
@keyup.down	下

 

new Vue中的this

 

 

 

 

簡易計算器代碼

 

 

 

過濾器

filters

- `過濾器`:對須要展現的數據進行加工處理後再展現到界面，並不會改變原數據

 

```

Vue.filter('過濾器名稱',function(value,arg){

    // value就是須要處理的原始數據

    // 對數據處理的業務邏輯

    return 處理完畢的數據

})

使用方法：原始數據 | 過濾器名稱(123)

<th class="" v-text="item.crtime |fiTime"></th>

 

過濾器能夠傳參，能夠串聯使用過濾器

### 過濾器只能用在插值符和v-bind 中 ，2.0版本用在其餘指令中會報錯

 

 

 

 

 

 

 

 

 

自定義指令

 

- `指令`: 其實就是Vue給咱們提供的操做DOM元素的一些方法

 

```

全局寫法：

Vue.directive('指令名稱',{

    // 指令第一次綁定到元素身上時執行(在內存中綁定到了DOM對象上邊)

    bind:function(el,binding,VNode){

        // el: 指令所在的DOM元素對象

        // binging.value 指令等號右邊表達式的值

        // binging.expression 指令等號右邊表達式

        // VNode.context 當前指令所在託管區域對於的Vue實例對象

    },

    // 當前指令所在元素插入到父節點時調用(不保證DOM已經渲染完畢)

    inserted:function(){},

    // 指令綁定的值發生變化時會去執行

    update:function(){},

    // 指令所在的組件值更新完畢時調用

    componentUpdated:function(){},

    // 自定義指令從當前元素解綁時調用

    unbind:function(){}

})

 

簡易寫法：當該指令只須要bind和inserted鉤子函數，且兩個函數作一樣的事情的時候可用

directives: {

ref:function (le,binding) { }

}

生命週期函數

 

beforeCreate：   --在元素未建立以前，在實例未建立完成前就調用

created：     實例化完成後被執行

 

 

beforemounte：dom在內存中渲染完成

mounted：  真實dom元素已完成

 

//

beforeUpdate：當data數據在內存中發生改變時

updated ：date中的數據發生改變，而且在界面上發生改變時

 

## [vue實例的生命週期]( https://cn.vuejs.org/v2/guide/instance.html#實例生命週期)

+ 什麼是生命週期：從Vue實例建立、運行、到銷燬期間，老是伴隨着各類各樣的事件，這些事件，統稱爲生命週期！

+ [生命週期鉤子]( https://cn.vuejs.org/v2/api/#選項-生命週期鉤子)：就是生命週期事件的別名而已；

+ 生命週期鉤子 = 生命週期函數 = 生命週期事件

+ 主要的生命週期函數分類：

- 建立期間的生命週期函數：

      + beforeCreate：實例剛在內存中被建立出來，此時，尚未初始化好 data 和 methods 屬性

      + created：實例已經在內存中建立OK，此時 data 和 methods 已經建立OK，此時尚未開始 編譯模板

      + beforeMount：此時已經完成了模板的編譯，可是尚未掛載到頁面中

      + mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示

- 運行期間的生命週期函數：

    + beforeUpdate：狀態更新以前執行此函數， 此時 data 中的狀態值是最新的，可是界面上顯示的 數據仍是舊的，由於此時尚未開始從新渲染DOM節點

    + updated：實例更新完畢以後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被從新渲染好了！

- 銷燬期間的生命週期函數：

    + beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。

    + destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

 

vue-resource 

 

get	getInfo() { // get 方式獲取數據   this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {     console.log(res.body);   }) }
post	postInfo() {   var url = 'http://127.0.0.1:88{{99/api/post';   // post 方法接收三個參數：   // 參數1： 要請求的URL地址   // 參數2： 要發送的數據對象   // 參數3： 指定post提交的編碼類型爲 application/x- www-form-urlencoded   this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {     console.log(res.body);   }); }
jsonp	jsonpInfo() { // JSONP形式從服務器獲取數據   var url = 'http://127.0.0.1:8899/api/jsonp';   this.$http.jsonp(url).then(res => {     console.log(res.body);   }); }
經過全局配置根路徑	Vue.http.options.root = "http://fdsf.io/";   配置過根路徑後，請求的路徑前面不能加「/」，不然報錯
配置全局post請求，編碼類型	Vue.http.options.emulateJSON = true;

 

 

 

動畫

 

三種定義動畫方式不能混用，不然控制權會混淆，形成衝突形成沒法正常運行

 

 

 

1.自定義

 

其餘元素leave後，實現後面的元素移動的時候實現過渡效果

 

 

 

 

2.使用animate.css類庫

<div id="app">

     <input type="button" value="發起請求" @click="getreq" >

    <input type="button" value="法方式" @click="flag=!flag">

    <transition name="" mode="" enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="600">

    <h3 v-show="flag">動畫發士大夫</h3>

    </transition>

</div>

 

 

 

3.動畫鉤子函數

 

### 使用動畫鉤子函數

1. 定義 transition 組件以及三個鉤子函數：

```

<div id="app">

    <input type="button" value="切換動畫" @click="isshow = !isshow">

    <transition

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter">

      <div v-if="isshow" class="show">OK</div>

    </transition>

  </div>

```

2. 定義三個 methods 鉤子方法：  

```

methods: {

        beforeEnter(el) { // 動畫進入以前的回調

          el.style.transform = 'translateX(500px)';

        },

        enter(el, done) { // 動畫進入完成時候的回調

          el.offsetWidth;   // 觸發offsetWidth的get方法，這個方法會使界面進行重繪，保證過渡動畫可以實時呈現

          el.style.transform = 'translateX(0px)';

          done();   // 當即執行後面週期的函數

        },

        afterEnter(el) { // 動畫進入完成以後的回調

          this.isshow = !this.isshow;

        }

      }

```

 

1.鉤子函數半場動畫執行函數時機：元素從顯現到隱藏觸發出場函數                                                       元素從隱藏到顯現觸發入口函數

2.當入場函數和離場動畫都須要定義的時候：                                            不須要定義動畫操做的鉤子函數不要寫出來，不然會覆蓋默認行爲，致使動畫沒法正常運行                                            同時存在的話不能定義afterEnter函數，也不能定義「done();   // 當即執行後面週期的函數」，不然會改變更畫執行

 

 

 

 

 

 

 

組件化

，以不一樣的組件來劃分不一樣的功能模塊

 

 

模塊化是從代碼邏輯的角度去劃分的，//通常方便後端代碼分層開發，保證功能單一

組件化時從UI界面的角度進行劃分   //方便ui功能複用

 

1.組件命名若是爲駝峯命名法，則須要在引用使用的時候以小寫寫出，並以-槓鏈接

2.template屬性的根元素必須且只能惟一

1.

2.簡寫

3.經過template標籤來定義模板結構，方便書寫

 

 

 

一個和組件至關於一個vue實例

其中的data屬性爲函數，data裏面的數據用return出來，組件定義的data數據，只能在組件中使用

組件的嵌套

 

 

父向子傳值

經過v-bind在子組件上綁定自定義屬性傳遞，在子組件中在屬性數組props中獲取

父向子傳遞方法

經過在子組件上用v-on綁定自定義事件傳遞，在子組件中經過事件觸發執行this.$emit("綁定的事件名"，實參1，實參2)

 

 

子向父傳值

經過父向子傳遞方法的原理，觸發函數能夠傳遞參數，經過把子組件的數據經過實參傳遞過去

 

 

ref   獲取元素，用來操做元素

 

 

 

 

路由

vue-router.js

 

能夠加動畫

 

 

 

 

路由傳參1.

2.

 

 

 

路由嵌套

 

 

命名視圖，視圖加name屬性，路由的components

 

watch

監聽data中的數據變化，一旦數據發生改變就會觸發watch中定義的同名函數

監聽路由的變化

‘$route.path’路由對象    變化

 

 

計算屬性

computed

屬性數據的依賴項數據一旦發生改變，屬性數據隨之發生改變

dom存在多個計算屬性，屬性函數只會觸發一次，獲得的數據保存在緩存中，後面的直接引用