Vue的基礎(chǔ)入門

vue.png

一甫窟、Vue的基礎(chǔ)入門

• 簡介

  作者：尤雨溪 版本：2.X版本 預(yù)估4-5月份3.0版本會(huì)發(fā)布 官網(wǎng)鏈接

  Vue是一個(gè)漸進(jìn)式的JavaScript框架

  Vue是一個(gè)MVVM框架^[1]

  （M : 數(shù)據(jù)層 V : 視圖層 VM：映射層，連接數(shù)據(jù)層和視圖層）

• Vue的特點(diǎn)

  不再是操作真實(shí)的DOM篙悯，而是操作虛擬DOM^[2]漏峰，通過數(shù)據(jù)來驅(qū)動(dòng)視圖（而jQuery^[3]是操作真實(shí)的DOM來改變視圖）

  底層問題：Vue2.0 : Object.defineProperty-數(shù)據(jù)劫持贤壁、監(jiān)聽（ES5的方法）

  Vue3.0中做了更改，通過new Proxy（ES6的方法）來實(shí)現(xiàn)數(shù)據(jù)操作視圖迷扇。

  Vue不支持低版本瀏覽器(IE9以下)

• Vue的基本使用

  因?yàn)閂ue是一個(gè)構(gòu)造函數(shù)踢步，使用的時(shí)候通過new的方式進(jìn)行使用

  Vue這個(gè)構(gòu)造函數(shù)是一個(gè)配置項(xiàng)options

  options:

  ? el：掛載點(diǎn)

  ? data：當(dāng)前Vue所需要的一些屬性（當(dāng)前組件所需要的狀態(tài)）

  ? methods：存放Vue所需要的事件。如果需要訪問data中的屬性，則通過this.屬性名稱即可。在實(shí)例化的時(shí)候?qū)ata和methods中的所有屬性和通過代理的方式代理到了Vue的實(shí)例上饭入。（實(shí)例化對(duì)象中凡是以_開頭的，默認(rèn)屬于構(gòu)造函數(shù)的內(nèi)部屬性）

  let vm = new Vue({
      el: "#app",
      data: {
          name: "lxc",
          sex: "男",
          age: 18,
          msg: "這是一跳消息"        
      }窄瘟，
      methods:{
        handle(){
            console.log(1)
        }
    }
  })
  

二蹄葱、Vue的基礎(chǔ)指令

• V-text

  用來渲染數(shù)據(jù)和執(zhí)行一些JS語法

  底層：相當(dāng)于innerText

  v-text:在加載的時(shí)候不會(huì)出現(xiàn){{}}

  {{}}:在加載的時(shí)候會(huì)出現(xiàn){{}}

• v-html

  用來渲染數(shù)據(jù)和執(zhí)行一些js語法，可以用來解析HTML標(biāo)簽

  簡寫：{{}}僅限于vue1.0,但后期被廢除了摹恨。

• v-show

  通過display屬性控制元素的顯示和隱藏

  布爾值 : true代表顯示诅愚；false代表隱藏

• v-if

  通過刪除和創(chuàng)建元素來控制其顯示和隱藏

  布爾值 : true代表顯示；false代表隱藏

  v-else-if

  v-else

• v-if與v-show的區(qū)別

  v-if 是“真正”的條件渲染千诬，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建耍目。所以，頻繁地切換時(shí)不適合使用徐绑。

  v-if 也是惰性的：如果在初始渲染時(shí)條件為假邪驮，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊傲茄。

  相比之下毅访，v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染烫幕，并且只是簡單地基于 CSS 進(jìn)行切換俺抽。

  一般來說，v-if 有更高的切換開銷较曼，而 v-show 有更高的初始渲染開銷磷斧。因此，如果需要非常頻繁地切換捷犹，則使用 v-show 較好弛饭；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好萍歉。

  • 使用場景

  v-show : 頻繁地切換（選項(xiàng)卡）

  v-if : 登錄與非登錄侣颂，VIP與非VIP用戶，權(quán)限頁面

• v-for遍歷數(shù)組枪孩、對(duì)象憔晒、字符串藻肄、數(shù)字

  語法：v-for=“(值，下標(biāo)拒担，需要遍歷的數(shù)據(jù))”

  • v-if與v-for能否一起使用嘹屯？誰的優(yōu)先級(jí)更高？

  不能一起使用从撼， v-for的優(yōu)先級(jí)更高

• v-bind綁定屬性

  語法：v-bind:屬性=”值“

  簡寫：:屬性=“值”

• v-on綁定事件

  語法：v-on:事件名稱=“事件函數(shù)”

  簡寫：@事件名稱=”事件函數(shù)”

  修飾符：輔助一些事件州弟，可以有多個(gè)修飾符

  （ eg:阻止事件冒泡，阻止瀏覽器的默認(rèn)事件等）

  語法：@事件名稱.修飾符 = “事件函數(shù)”

  常見的修飾符：

  常用修飾符	用法
  阻止事件冒泡	.stop調(diào)用event.preventDefault()
  阻止瀏覽器默認(rèn)行為	.prevent調(diào)用event.stopPropagation()
  事件只觸發(fā)一次	.once
  按下回車	.enter（.13）[4]
  字符串轉(zhuǎn)為數(shù)字	.number
  ……	……

  關(guān)于事件對(duì)象低零，在不傳參時(shí)不需要加（）,可以在methods函數(shù)里通過e獲绕畔琛；需要傳參時(shí)掏婶，給事件加上（）啃奴，（）內(nèi)加上$event和要傳遞的參數(shù)，可以拿到事件對(duì)象气堕。

• v-model雙數(shù)據(jù)綁定

  流程：當(dāng)輸入框的數(shù)據(jù)發(fā)生改變時(shí)纺腊，會(huì)修改data中相對(duì)應(yīng)的數(shù)據(jù)。當(dāng)data中的數(shù)據(jù)發(fā)生改變時(shí)茎芭，視圖層也會(huì)隨之改變揖膜。

  使用場景：只能在表單元素中進(jìn)行使用

  • 模擬v-model實(shí)現(xiàn)多選框

  <div id="app">
  
      <label for="">大娃</label>
      <input type="checkbox" value="大娃" @change="handleChange('大娃')">
      <label for="">二娃</label>
      <input type="checkbox" value="二娃" @change="handleChange('二娃')">
      <label for="">三娃</label>
      <input type="checkbox" value="三娃" @change="handleChange('三娃')">
      <label for="">四娃</label>
      <input type="checkbox" value="四娃" @change="handleChange('四娃')">
  
      <p v-for="(item,index) in checkVal">{{item}}</p>
  </div>
  

  let vm = new Vue({
      el: "#app",
      data: {
          checkVal: []
      },
      methods: {
          handleChange(value) {
              //includes檢測數(shù)組中是否包含某一項(xiàng)
              let flag = this.checkVal.includes(value);
              if (flag) {
                  let index = this.checkVal.indexOf(value);
                  this.checkVal.splice(index, 1);
              } else {
                  this.checkVal.push(value)
              }
          }
      }
  })
  

• v-pre

  將{}正常解析、轉(zhuǎn)義{{}}梅桩，跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯壹粟。

• v-cloak

  解決Vue.js沒有加載進(jìn)來的時(shí)候{{}}會(huì)顯示的問題

• v-once

  只渲染一次數(shù)據(jù)

• computed計(jì)算屬性

  通過屬性計(jì)算而得來的屬性

  注意：

  1. computed內(nèi)部的函數(shù)名稱可以隨意編寫
  2. computed內(nèi)部的函數(shù)必須通過return的方式將結(jié)果進(jìn)行返回，最好不要在內(nèi)部進(jìn)行賦值操作(見第四點(diǎn))
  3. 雖然computed內(nèi)部是以函數(shù)的方式進(jìn)行編寫宿百，但是在調(diào)用的時(shí)候并不是一個(gè)函數(shù)趁仙，所以不需要加（）
  4. 只要函數(shù)內(nèi)部所依然的屬性發(fā)生了改變，該函數(shù)就會(huì)自己調(diào)用執(zhí)行垦页。所以盡量不進(jìn)行賦值操作雀费。eg:this.a = this.a + this.b;會(huì)進(jìn)入死循環(huán)。
  5. 如果函數(shù)內(nèi)部所依賴的屬性沒有發(fā)生改變的時(shí)候痊焊，computed會(huì)從緩存中讀取結(jié)果盏袄。

  總結(jié)：computed中的方法都是依賴于Vue中data里面的屬性，如果屬性發(fā)生了改變薄啥，computed中所對(duì)應(yīng)的函數(shù)就會(huì)去執(zhí)行辕羽。

  使用場景：當(dāng)多個(gè)屬性影響一個(gè)屬性的時(shí)候，我們就需要用到computed(購物車)

三垄惧、實(shí)例上的屬性和方法

? 關(guān)于$on,$emit,$off,$once 已經(jīng)上一篇文章介紹過了刁愿，此處不再贅述

• vm.$mount：設(shè)置外部掛載點(diǎn)

• vm.$forceUpdata：強(qiáng)制更新（盡量不使用）

  凡是在data中寫的屬性，默認(rèn)會(huì)添加兩個(gè)方法到逊，分別是getter（）和setter（）铣口，主要用于做數(shù)據(jù)劫持滤钱。

• vm.$nextTick：獲取數(shù)據(jù)更新后最新的DOM結(jié)構(gòu)

  this.$nextTick是一個(gè)異步函數(shù)。底層用到了MutationObserver或者是setTimeout(fn,0)脑题。其實(shí)把this.$nextTick替換成setTimeout(fn,20)也是可以的（20ms是一個(gè)經(jīng)驗(yàn)值菩暗，每一個(gè)Tick約為16.66ms），對(duì)用戶體驗(yàn)而言是無感知的旭蠕。

  this.$nextTick(()=>{
      console.log(document.getElementsByTagName("span")[0].offsetWidth)
  })
  setTimeout(()=>{
      console.log(document.getElementsByTagName("span")[0].offsetWidth)
  },10)
  

• vm.$destroy：卸載、斷開與Vue之間的練習(xí)

• watch:屬性監(jiān)聽

  監(jiān)聽data中屬性的變化旷坦，當(dāng)發(fā)生改變時(shí)掏熬，watch中對(duì)應(yīng)的函數(shù)就會(huì)執(zhí)行。

  注意：

  1. watch中的函數(shù)名秒梅，必須是所依賴data中的屬性名

  2. watch中的函數(shù)會(huì)有兩個(gè)參數(shù)旗芬，一個(gè)是新值，一個(gè)是舊值捆蜀。

  3. watch默認(rèn)情況下只會(huì)監(jiān)聽對(duì)象地址的改變疮丛，無法監(jiān)聽值的改變，除非進(jìn)行深度監(jiān)聽辆它，需要配置handler函數(shù)以及deeg為true誊薄。

  4. watch第一次不會(huì)去監(jiān)聽（computed），如要監(jiān)聽锰茉，需設(shè)置immediate:true;

  5. watch在特殊情況下呢蔫，無法監(jiān)聽到數(shù)組的變化

     • 通過下標(biāo)來更改數(shù)組中的數(shù)據(jù)
     • 測過length來改變數(shù)組的長度

     解決方案：通過Vue實(shí)例方法$set進(jìn)行設(shè)置。

     ? 通過splice來清空數(shù)組

• $set的基本使用

  給一個(gè)響應(yīng)式添加一個(gè)響應(yīng)式屬性飒筑，或者給響應(yīng)式設(shè)置屬性片吊。

  語法：$set(object , key / index , value);

• $delete基本使用

  刪除響應(yīng)式對(duì)象^[5]的某一個(gè)值

  語法：$delete(object , key / index)

1. Model:數(shù)據(jù)層 View:視圖層 Controller:業(yè)務(wù)邏輯層 ?

2. 1.虛擬DOM就是真實(shí)的JS對(duì)象 2. 操作內(nèi)存中的JS對(duì)象遠(yuǎn)比操作真實(shí)的DOM結(jié)構(gòu)速度更快 ?

3. 1.鏈?zhǔn)讲僮鱀OM（耗費(fèi)性能）; 2. 抹平了各個(gè)瀏覽器之間的差異 ?

4. .13是回車鍵的鍵盤碼 ?

5. 具有g(shù)etter()和setter()方法 ?