深刻淺出篇 — Vue

時間 2019-11-30

標籤深刻 vue 简体版

原文原文鏈接

前言

本篇做爲vue的知識梳理，包括：
- vue的建立
- vue的指令
- vue的插值
- vue的生命週期
- vue的組件
- vue的計算屬性
- vue的組件
- 擴展——Es6模塊化
複製代碼

vue的特色：

漸進式（vue的侵入性不多）
組件化
數據響應式 -> 其會監控數據的變化，當數據發生變化時，自動從新渲染頁面

建立vue工程

直接在頁面上引入vue.js
使用腳手架（vue-cli）搭建工程

正課開始

一. 建立vue實例

<div id="app"></div>        //被掛載的元素，
<script>
    // 在這裏不管是掛載，仍是模板等都有多種寫法，後面會慢慢接觸
    const vm = new Vue({    // 建立一個vue實例
        el: "#app",          // 掛載 ：  用來控制咱們想控制的元素
        template: '',       // 模板 ：  可用來書寫代碼，模板裏只能有一個根元素 不然報錯
        data: {},           // 數據 ：  可能用到的數據
        methods: {}         // 方法 ：  可能用到的函數  注意this指向，後面會提到
    })
</script>
複製代碼

知識點：

當建立vue實例時，Vue會將下面配置成員提高到vue實例中
    1. data配置中的全部成員
    2. methods配置中的全部成員
    3. ...還有後面會介紹
複製代碼

二. 模板語法 - 插值

當要插入數據時可在模板中使用插值
在模板的元素內部使用 {{ js表達式 }}

例：

{{ num + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ '123'.split('').reverse().join('') }}
...
複製代碼

三. $watch - 用於監控數據先後的改變

<div id="app">{{a}}</div>       // {{}}這個就是插值表達式 

<script>
    var data = {a : 1}
    
    var vm = new Vue ({ 
        el:'#app',
        
        data :data              // 注：這兩個data不是一個
        // 前面的表明此對象的屬性，然後面的表明新定義的變量
    })
    
    vm.$watch ('a',function (newval,oldval) {
        //第一個參數爲觀察的變量，第二個參數爲回調函數
        console.log(newval,oldval)
    })
    vm.$data.a = 2
    //改變的數據要寫在 vm.$watch 後
</script>
複製代碼

小知識點：

上一節說過data配置中的全部成員，會提高到vue實例中
    - 因此 data.a == vm.a == vm.$data.a
    - 即 vm.$data == data
複製代碼

四. 模板語法 - 指令

指令是帶有v-前綴的特殊特性，一般做爲元素的屬性存在，名稱上以 v- 開頭

經常使用指令：

v-once  當添加上此指令時，會進行一次性的插值，當數據改變時插值處的內容不會更新
v-html  雙大括號語法會將數據解釋爲普通的文本。而當添加上此指令時，會輸出真正的html代碼。 v-html = "xxx"
v-bind  Mustache語法不能做用到html特性上。當添加上此指令時，就能夠做用在html特性上。 v-bind:屬性="xxx"
v-if    根據值的真假來插入或移除該元素  v-if='xxx' , 當xxx取值爲true時，該元素會被渲染
v-on    用於註冊事件，[語法糖 @]。  @click = 'xxx' 
v-show  根據值的真假來插入或移除該元素  v-show ='xxx'
v-for   基於一個數組渲染一個列表，循環生成元素  v-for = '(item,index) in items'  :key = index  ，可用key屬性來肯定惟一值
v-model 雙向數據綁定，是一個語法糖。指令在表單 <input> , <textarea> 及<select>元素上建立 
複製代碼

指令用法詳解：

v-oncss

在@click = 'xxx'中， 當xxx爲函數時，這就用到了前面提到的methods屬性

     <div id="app3">
         // 第二個實參 $event 爲原始的dom事件
         <button  @click="click1('abc',$event)">提交</button>
         
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             methods: {
                 click1: function (str, e) {
                     console.log(str, e)
                 }
             }
         })
     </script>
複製代碼

v-bind 與class和style的特殊用法html

當v-bind 用於class和style時，vue.js作了專門的強化，表達式結果的類型除了字符串以外，還能夠是對象或數組
     
     1. 看成用在class身上時
     
     <div id="app3">
         <div  :class='{active:isActive}'>2313</div>
             //  active這個class是否存在 取決於數據屬性isActive的取值
             //  其能夠和普通的class共存
             //  也能夠傳入多個屬性來動態切換多個class  {green:isGreen , red: "isRed"}
             //  也可用數組的方式 ： ['green','red']  這樣就直接添加了這兩個類名
             //  可配合三元運算來獲取動態樣式    [isGreen?'green':'',isRed?'red':'']
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             data :{
                 isActive : 'ture'  // 在這裏只舉了一個例子，其餘同理
             }
         })
     </script>
     
     
     2. 看成用在style身上時
     
     <div id="app3">
         <div :style='{color:color,fontSize:size}'>2313</div>
         
         //  一樣此處也能夠用三元運算 來動態綁定數據
         //  <div :style = '{background : isgreen ? 'green' : ""}'>2313</div>
     
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             data :{
                 color:'red',
                 size:'20px'，
                 isgreen : true
             }
         })
  </script>
複製代碼

v-show 與 v-if 的區別vue

v-if 是真正的渲染
 v-show 是經過控制css樣式來改變元素的顯示和隱藏，其元素會被渲染並保留在dom中 
複製代碼

v-modelvue-cli

<div id="app3">
      <input type="text" v-model='val'>       // 這樣就實現了input的雙向數據綁定
          // 當input中的內容改變時，下方sapn標籤內的內容也會改變
          
      <span>姓名：{{val}}</span>              //將val數據顯示在頁面中
  </div>
  <script>
      
      var vm = new Vue({
          el: "#app3",
          data: {
              val: "土行孫"                           // 設置input中的初始值
          }
          methods:{
              hand:function(){
                  this.val                 //  可經過this對象獲取到data中的值
              }
      })
  </script>
複製代碼

五. 模板的配置

頁面中直接書寫數組
在template配置中書寫（常見）瀏覽器
在render中手動用函數建立,render函數的參數是建立虛擬dom對象的方法緩存
render的優先級> template > 在頁面中書寫服務器

例app

<script>
      
      var vm = new Vue({
          el: "#app3",
          template:'<h1>商品和庫存管理</h1>' ,  // 模板
          render(createElement){
              return createElement('h1','hello')
          }
      })
  </script>
複製代碼

六. 小結：

配置對象中

el ：配置控制的元素， css選擇器
data : 管理的數據，該數據是響應式的
methods : 配置方法方法中的this指向vue實例，因此不能使用箭頭函數，會干擾

掛載的配置

經過el進行配置
使用vue實例中的$mount函數進行配置

七. 計算屬性 computed

計算屬性,其中的配置也會提高到vue實例中
一般狀況下,計算屬性是用戶經過data或其餘計算屬性獲得的數據

例：

1. 普通篇
    <div id="app">
        <h1>名字：{{name}}</h1>
        <h1>qq:{{qqNumber}}</h1>
        <h5>合計信息：{{full}}</h5>   // 計算屬性會自動的幫你帶調用這個函數來獲得這個結果，因此不用這麼些full()
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: '戰士',
            qqNumber: 123456789
        },
        //這就是計算屬性，固然這個功能也能用其餘方式完成，好比methods方法，後面會介紹他們的不一樣
        computed: {
            full() {   // 這樣寫是隻讀的，改變數據也沒用
                return this.name + this.qqNumber
            }
        }

    })
</script>

 2. 進階篇
    <script>
    var vm = new Vue({
        el: "#app3",
        data: {
            name: '戰士',
            qqNumber: 123456789
        },
        // 只看這裏
        computed: {
            full: { // 這樣配置就既能讀取值 又能設置值了
                get() {
                    return this.name + this.qqNumber
                },
                set(newVal) {
                    //好比再用到雙向數據綁定的時候，就能監控到改變的值了
                    console.log(newVal)
                }

            }
        }

    })
</script>
複製代碼

計算屬性與方法的區別：

計算屬性會檢查計算屬性的依賴,當依賴沒有發生變化時,vue會直接使用以前緩存的結果,而不會從新計算
計算屬性能夠配置get和set,分別用於讀取時和設置時
計算屬性的讀取函數,不能夠有參數,有參數無心義

八. 組件的建立和註冊

組件是頁面中可重複使用的功能單元
組件的建立 : 組件對於開發者,是一個普通的配置對象,該配置對象幾乎和以前的vue配置對象同樣
組件的註冊分爲兩種：全局註冊和局部註冊
組件能夠嵌套重複使用,所以會造成一個組件樹,樹的根叫作根組件

組件的使用：

<div id="app3">
        <vue></vue>   // 組件的名稱
    </div>
    <script>
    // 定義全局組件  第一個參數爲組件的名字 ， 第二個參數爲一個配置對象
    Vue.component('vue', {template: '<h1>看到你，很開心！！！</h1>'})

    var vm = new Vue({
        el: "#app3",
        data: qq = 123,

        // 局部註冊組件
        components: {
            vue: {
                // 在這裏接收了屬性並賦值
                template: '<h1 :title = 1>看到你{{str}}，很開心{{title}}！！！</h1>',
                // 組件中也能夠有數據和方法
                data: function () {
                    return {
                        str: "的時候"
                    }
                },
                // 經過props爲組件定義屬性
                props: ['title']
            },
            //這裏的屬性名爲 組件名稱， 屬性值爲一個配置對象
        }
    })
複製代碼

九. vue的生命週期

new Vue（）從建立vue實例開始dom

beforeCreate:組件實例剛剛建立好以後，此時，組件實例中尚未提高任何的成員
created:組件實例中已經提高了全部成員，可是，此時尚未渲染頁面的任何內容
beforeMount: 組件即將進行渲染，可是尚未進行渲染，此時已經編譯好模板，渲染的全部條件已經知足
mounted : 組件已經完成了渲染（頁面可見）[重要！！！！]
此時，等待組件更新（當一個組件的屬性或狀態發生變化的時候，會自動從新渲染）
beforeUpdate:組件即將更新，但尚未更新，此時獲得的數據是新的，但界面是舊的
updated：組件已經完成更新，此時數據和界面都是新的
beforeDestroy:當組件即將被銷燬時
destroyed: 組件已經被銷燬後

十. 擴展 - 初識模塊化

模塊化簡介

歷史上，JavaScript一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼起來。而其餘語言都有此功能
在ES6以前，社區制定過一些模塊加載方案，最主要的有CommonJS和AMD兩種。前者用於服務器，後者用於瀏覽器。ES6在語言規格的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代現有的CommonJS和AMD規範，成爲瀏覽器和服務器通用的模塊解決方案。
ES6模塊的設計思想，是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係（這種加載稱爲'編譯時加載'），以及輸入和輸出的變量。而CommonJS和AMD模塊，都只能在運行時肯定這些東西