JS框架：Vue 的實用主義全解

時間 2020-02-13

標籤框架 vue 實用主義欄目 JavaScript 简体版

原文原文鏈接

Vue的實用主義全解

options裏有什麼

Vue(options)中，options包含五類屬性css
1. 數據：data, props, propsData, computed, methods, watch
2. dom：el, template, render, renderError
3. 生命週期鉤子：beforeCreate, created, beforeMount, mounted, beforeUpdate, Updated, actived, deactived, beforeDestroy, destroyed, errorCaptured
4. 資源：directives, filters, components
5. 組合：parent, mixins, extends, provide, inject
6. 其餘：暫時不看。

基礎屬性

el - 掛載點html
- 用法：new Vue({ el:'#app' })
  等價於：new Vue().$mount('#app')
data - 內部數據vue
- 用法：data:{...} / data(){ return{...} }
  支持函數和對象形式，推薦函數寫法
methods - 方法node
- 事件處理或普通函數

components - 組件es6

用法：api

import Cpn form './Cpn.vue'
...
new Vue({
    components:{
        Abc: Cpn
    }
    template:`
        <abc/>
    `
    ...
})

組件的其餘引入方法：數組

頁面內建立組件：緩存

//第一個參數爲組件名，第二個參數是vue實例中的options
  Vue.component("Abc",{
    template: "<div>n</div>"
     ...
})

前兩種的結合app

new Vue({
     components:{
       Abc:{
             template:``,
             methods:{}
            ...
       }
    }
})

命名規則：組件通常都以大寫字母開頭。

生命鉤子：框架
- created(){...}實例出如今內存中時調用
- mounted(){...} //實例出如今頁面中時調用
- updated(){...} //實例數據更新時調用
- destroyed(){...} //實例被銷燬時調用
props：

定義：自定義組件的屬性

使用方法：

//Demo組件內：
export default{
    props:['counter']   //也能夠傳回調函數
}
    //main.js內:
template:`
    <Demo counter="1" />
`

注意：若是想給自定義組件的屬性賦值變量，須要前邊加冒號「:」。例如：
```
//main.js內
...
data:{ n: 5 }
template:`<Demo :counter:"n" />`
```

進階屬性

computed - 計算屬性

語法：

data:{ firstName:'Oliver', lastName:'Young' }
   computed:{ //至關於只有get方法
     Name(){ 
         return this.firstName+this.lastName 
     }
   }

computed:{
       Name:{
         get(){ return this.firstName+this.lastName }
         set(value){ this.firstName=value }
       }
   }

優勢：

簡化代碼，避免重複，方便修改
自帶緩存功能：若是依賴的屬性沒有變化，則不會從新計算

什麼時候使用：若是一個數據依賴於其餘數據，使用computed

watch - 偵聽

用途：數據變化時，調用一個函數

語法：

1. ```
   watch:{
      o1: function(newVal,oldVal){},  //newVal和oldVal是Vue傳給你用的
      o2(){},     //es6語法
      o3:[f1,f2]  //依次執行f1，f2
      o4:{
          handler(){//處理函數},
          deep: true/false,   //見下方解釋
          immediate: true/false   //第一次是否執行
      },
      o5: 'callbackName',     //回調函數，寫在methods裏
      "obj.a": function(){}   //偵聽obj的屬性
   }
   ``` 
2.  `vm.$watch('obj',fun,{deep:true})`

什麼叫「變化」？
1. 簡單類型：值變了，就是變了。
2. 複雜類型（對象）：地址變了，纔算變了。如：本來是obj:{num:1}，從新賦值爲obj:{num}:1，分配了新的內存，因此變了。
3. 當deep=true時，obj.a變了也意味着obj變了。

computed V.S watch
1. computed：計算屬性； watch：偵聽。
2. computed：
  - 調用時不須要加括號()
  - 會自動緩存。在依賴不變的狀況下不會從新計算。
3. watch:
  - 若是監聽的屬性變化時，執行一個回調
  - Vue框架會傳給回調兩個參數，依次是newValue，oldValue
  - immediate：第一次渲染時，是否監聽
    - deep：監聽一個對象時，是否監聽對象裏屬性的變化

template

三種寫法

寫在HTML裏（vue完整版）

//index.html
<div id="app" @click="add">{{n}}</div>
 //main.js
const vm = new Vue({
     el:'#app',
     data(){ return{
         n:0
     }},
     methods:{
         add(){ this.n+=1 }
     }
})

寫在options裏（vue完整版）

//index.html
<div id="app></div>
 //main.js
const vm = new Vue({
     el:'#app',
     template:`
         <div>
            {{n}}
            <button @click="add">+1</button>
        </div>
  `,
     data(){ return{ n:0 } },
     methods:{
         add(){ this.n+=1 }
     }
})

配合.vue文件（vue運行時版）

//Demo.vue
<template>
  <div>
      {{n}}
      <button @click="add">+1</button>
  </div>
</template>
<script>
  export default {
      data(){ return{ n:0 } },
      methods:{
          add(){...}
      }
  }
</script>
<style>
  //這裏寫css
</style>
 
  //index.html
<div id="app"></div>

  //main.js
import Demo from './Demo'
new Vue({
  render: h => h(Demo)
}).$mount('#app')

template 模板語法
1. 表達式 — {{ }}
  - {{ content }}： content能夠是data中的數據，表達式，函數調用
2. 綁定屬性 — v-bind:
  - 當標籤的屬性須要使用data域中的數據時，有兩種寫法。例子以下：
```
data:{ className:'red' }
 ...
<div :class="className">
  //或 <div v-bind:class="className">
```
3. 樣式綁定 — :style
  - ```
  data:{
     fontsize: 16,
     top: 10
  }
  <div :style="{fontSize: fontsize+'px', 'padding-top': top+'px'}">
```
- CSS 屬性名能夠用駝峯式或短橫線分隔(記得用引號括起來)來命名
4. 綁定事件 — v-on:
  - 用法
    <button v-on:click="add">+1</button>
    <button v-on:click="n+=1">n+1</button>
  - 簡寫
    <button @click="n+=1">+1</button>
5. 條件判斷 — v-if
  - ```
  <div v-if="x>0">x大於0</div>
   <div v-else-if="x===0">x等於0</div>
   <div v-else>x小於0</div>
```
  用法顯而易見，很好理解
6. 循環 — v-for
  - for(value,key) in 對象 / for (item,index) in 數組
```
<ul>
   <li v-for="(item,index) in arrary" :key="index">
      {{index}}:{{item}}
   </li>
 </ul>
 <ul>
   <li v-for="(value,key) in arrary" :key="key">
      {{key}}:{{value}}
   </li>
 </ul>
```
  - :key="index"會有bug，最好不要用index看成key
7. 顯示/隱藏 — v-show
  - <div v-show="n%2==0"> n是偶數 </div>
  - 近似於<div :style={display: n%2==0? 'block':'none' }> n是偶數 </div>
8. 修飾符
  - v-on：{.keyCode| .keyAlias} .prevent, .stop 等等
    - <input @keypress.13="fn" />：用戶鍵盤輸入回車時，調用fn
    - <input @keypress.enter="fn" />：輸入回車，調用fn
    - <a @click.prevent="fn"></a>：阻止默認事件
    - <a @click.stop="fn"></a>：中止事件冒泡
  - v-bind: .sync 等等
    - .sync 詳細用法（子組件改父組件值）
  - v-model: .lazy .number .trim
  - 更多修飾符 Vue文檔

directives - 指令
- 內置指令： v-on, v-for, v-if 等等
- 自定義指令： v-xxx
- 兩種寫法：
  1. 聲明一個全局指令:
    Vue.directive('x',directiveOptions)
  2. 聲明一個局部指令
```
new Vue({
   ...
   directives:{
       "x":directiveOptions
   }
})
```
- directiveOptions裏有哪些屬性？
  1. bind(el,info,vnode,oldVnode) - 相似生命週期中created
  2. inserted(el,info,vnode,oldVnode) - mounted
  3. update(el,info,vnode,oldVnode) - updated
  4. componentUpdated(el,info,vnode,oldVnode) - 基本不用
  5. unbind(el,info,vnode,oldVnode) - destroyed
  - 詳細用法
- 指令的做用：
  1. 主要用於dom操做
  2. 若是某個dom操做常常使用，或者過於複雜，能夠封裝爲指令，簡化代碼。

mixins - 混入

寫法

//demo.js內
const demo = {
  data(){ return { 
      a:0,
      ...//其餘公共屬性
      }
  }
  methods:{ 
      add(a){ return a+1 } 
      ...//其餘公共方法
  }
}

//組件Demo1內
<script>
import demo from "./demo.js"
export default{
  mixin:[demo]
}
</script>

//組件Demo2內
<script>
import demo from "./demo.js"
export default{
  mixin:[demo]
}
</script>