天天看點
傳回

【vue】vue的常用指令及用法總結（續）_03

目錄

一. vue插值文法

二. vue指令

1. v-bind

2. v-show

3. v-if 和 v-else

4. v-else-if

5. v-for

6. v-on

7. v-html

8. v-cloak和v-text

9. v-once:

10. v-pre

11. v-model

💥 擴充：this判斷—8種指向

⬛ 總結：知識點提煉

【前文回顧】👉 vue的插值文法及常用指令的應用_02

【vue】vue的常用指令及用法總結（續）_03

一. vue插值文法

二. vue指令

1. v-bind

2. v-show

3. v-if 和 v-else

4. v-else-if

5. v-for

6. v-on

         (1). 什麼是: 專門綁定事件的指令

         (2). 何時: 今後隻要一個元素可能觸發事件，都用v-on來綁定事件.

         (3). 如何:

         a. 标準: <元素 v-on:事件名="處理函數名(實參值清單)">

         b. 簡寫: <元素 @事件名="處理函數名(實參值清單)">

         c. 更簡寫: 如果事件處理函數不需要傳參，則可以省略()

         <元素 @事件名="處理函數名">

         (4). 隻要界面中定義了幾個事件綁定，new Vue()中methods裡，就要定義幾個同名的方法支援:

         new Vue({

                  el:"#app",

                  data:{ ... },

                  methods:{

                          處理函數(形參清單){

                                   ... this.變量名 ...

                          }

                  }

         })

         (5). 示例: 綁定事件處理函數，并傳參

         1_v-on.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--點哪個div，哪個div就可以喊自己疼！-->
    <div id="d1" @click="say('d1')">d1</div>
    <div id="d2" @click="say('d2')">d2</div>
    <!--補：vue中凡是有綁定文法的地方，引号裡面必須是一個合法的js語句，
    什麼意思呢，就是引号裡面的内容複制出來，粘貼到控制台(f12)當中能夠運作,
    這裡我們傳的d1，d2是一個字元串、一個名字，不是變量，是以要加引号，又因為外面是雙引号，
    裡面如果再用雙引号，不知道誰跟誰配對，是以為了避免歧義，外雙内單或是外單内雙。
    另，隻有模闆字元串裡什麼都可以用
    -->
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因為界面上需要一個事件處理函數
        say(dname){
          console.log(`${dname} - 疼！`)
        }
      }
    })
  </script>
</body>
</html>
 運作結果：
【vue】vue的常用指令及用法總結（續）_03

         (6). 獲得事件對象:

         a. 和DOM中完全一樣：

                  1). DOM中: 給事件處理函數添加第一個形參。事件發生時，浏覽器就會自動将事件對象傳遞給事件處理函數的第一個形參:

                                                   event對象

                                                         ↓

                  元素.on事件名=function( e ){ ... e ...}

                  或

                  元素.addEventListener("事件名", function(e){ ... e ... })

                  2). vue中:

                  i. 界面中: 綁定時千萬不要加()

                  <元素 @事件名="處理函數">

                  因為加上空的()，表示什麼參數都不傳！浏覽器一旦看到空的()，就不會自動傳事件對象了！

                  ii. methods: {

                          處理函數(e){

                                   ... e和DOM中的e，完全一樣！...

                          }

                  3). 示例: 獲得滑鼠位置，實作點哪兒，喊哪兒疼！

                  1_v-on2.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--點在div的哪個位置，就喊哪個位置疼！-->
    <div id="d1" @click="say">d1</div>
    <div id="d2" @click="say">d2</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因為界面上需要一個事件處理函數
        say(e){
          console.log(`x:${e.offsetX},y:${e.offsetY} - 疼！`)
        }
      }
    })
  </script>
</body>
</html>
運作結果： 
【vue】vue的常用指令及用法總結（續）_03

                  4). 問題: 沖突:

                  a. 本來vue的事件處理函數，是可以傳實參值的

                  b. 但是，要想獲得事件對象e，又必須不能加()

         b. 即獲得事件對象，又可傳實參值:

                  1). 界面中: 綁定事件處理函數時，要用$event代替事件對象。

                  a. 凡是$開頭的都是vue中的關鍵字，有特殊功能！不能改變！

                  b. 什麼是$event: 提前獲得浏覽器自動建立的事件對象！

                  c. 如何:

                                          提前接住浏覽器的event對象

                          <元素 @事件名="處理函數($event, 其它實參值)"

                  2). new Vue()中:

                          methods:{

                                   處理函數(e, 其它形參){

                                   }

                          }

                  🕵️ Tips：$event和其它實參值的放置順序可以調換

                  3). 示例: 即獲得事件對象，又傳入其它實參值:

                  1_v-on3.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--點在div的哪個位置，就喊哪個位置疼！-->
    <div id="d1" @click="say($event, '亮哥')">亮哥</div>
    <div id="d2" @click="say($event, '然哥')">然哥</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因為界面上需要一個事件處理函數
        say(e,dname){
          console.log(`${dname}的x:${e.offsetX},y:${e.offsetY}位置 - 疼！`)
        }
      }
    })
  </script>
</body>
</html>
運作結果： 
【vue】vue的常用指令及用法總結（續）_03

7. v-html

         (1). 問題: 使用{{}}綁定一段HTML内容時，顯示在頁面上的結果是未解析的原始的HTML内容。

         (2). 解決: 今後隻要綁定的是一段HTML内容，都要用v-html代替{{}}

         (3). 如何: <元素 v-html="變量或js表達式">     </元素>

         (4). 示例: 使用v-html綁定HTML内容:

         2_v-html.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:`來自<a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >&lt;&lt;新華社&gt;&gt;</a>的消息`
      }
    })
  </script>
</body>
</html>

運作結果： 

來自<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >&lt;&lt;新華社&gt;&gt;</a>的消息

來自<<新華社>>的消息

8. v-cloak和v-text

         (1). 問題: 當網速慢時，new Vue()下載下傳和運作有些延遲，對界面的解析也有些延遲。導緻使用者短暫看到{{}}文法！

         (2). 解決:

         a. v-cloak:

                  鬥篷

                  1). 什麼是: 專門在new Vue()加載之前，臨時隐藏元素的特殊指令

                  2). 何時: 今後隻要希望即使new Vue()加載之前，也不希望使用者看到{{}}時，都用v-cloak隐藏

                  3). 如何: 2步

                  a. 因為v-cloak本身不帶任何樣式！是以，必須靠我們自己定義v-cloak屬性選擇器，添加隐藏的樣式！

                          css中:  [v-cloak]{ display:none }

                  b. <元素 v-cloak>

                  4). 原理:

                  i. 開局: v-cloak在元素上，發揮作用，元素隐藏

                  ii. 當new Vue()加載完之後，會自動掃描頁面中所有v-cloak屬性，并自動删除所有v-cloak屬性。v-cloak不再發揮作用。元素就顯示出來了。

         b. v-text:

                  1). 什麼是: 專門代替{{}}綁定元素内容的特殊指令

                  2). 為什麼: 因為{{}}出現在元素的内容中，一旦解析延遲，使用者就會短暫看到{{}}。而v-text是寫在元素的開始标簽中的屬性，即使new Vue()加載延遲，使用者也不可能看到元素的屬性！

                  3). 何時: 今後隻要想避免使用者短暫看到{{}}，都可以用v-text代替{{}}綁定元素的内容.

                  4). 如何: <元素 v-text="變量或表達式">     </元素>

                 🕵️ Tips：标簽之間的内容不用寫，因為v-text=後的"變量或表達式"會代替元素内容

                  5). v-text vs v-html

                  i. v-text和{{}}性質是一樣的，如果綁定的内容是一段HTML片段，則也不會解析，而是原樣顯示在界面上。是以，不能用v-text來綁定html片段内容.

                  ii. v-html可以将原始的HTML片段先解析後，再顯示給人看。是以，今後，隻要綁定的内容是HTML片段内容，都用v-html。

         c. 示例: 防止使用者短暫看到{{}}

         3_v-cloak_v-text.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    /*複習屬性選擇器*/
    [v-cloak]{ 
      display:none 
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 v-cloak>使用者名:{{uname}}</h3>
            <!--js程式的底盤    -->
    <h3 v-text="`積分:${score}`"></h3>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:3000
        }
      })
    },3000)
  </script>
</body>
</html>
運作結果： 
【vue】vue的常用指令及用法總結（續）_03
【vue】vue的常用指令及用法總結（續）_03

🕵️Tips：v-cloak與v-text解決的問題都是：new Vue()延遲加載時，使用者短暫看到{{}}的問題，至于使用哪個更好，沒有定論，看個人習慣

9. v-once:

         (1). 什麼是: 專門控制一個元素隻在首次加載時，動态綁定一次内容。今後，即使變量發生變化，該元素也不更新。

         (2). 何時: 今後隻要一個元素的内容，隻需要在首次加載時，動态綁定一次，今後，不再改變，都用v-once來修飾。

         (3). 如何: <元素 v-once>

         (4). 原理: 凡是帶有v-once的元素，隻在首次加載時更新内容。并不會被儲存到虛拟DOM樹。是以，即使将來變量變化，也無法通知到該元素。自然，内容不會再改變。

         (5). 優化: 凡是隻在首次加載時更新，今後不更新的元素，如果用v-once标記，就不會被加入到虛拟DOM樹中。減小了虛拟DOM樹的大小，跟提高了周遊和查找的效率。

         (6). 示例: 頁面顯示上線時間和目前系統時間

         4_v-once.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3 v-once>上線時間: {{time}}</h3>
    <h3>目前系統時間: {{time}}</h3>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        time:new Date().toLocaleString()
      }
    });
    //每隔1秒，重新獲得系統時間，顯示在網頁上
    setInterval(function(){
      vm.time=new Date().toLocaleString();
    },1000)
  </script>
</body>
</html>

運作結果： 

上線時間: 2020/10/26 下午2:16:42

目前系統時間: 2020/10/26 下午2:16:58

10. v-pre

         (1). 什麼是: 專門保護元素内容中的{{}}不被vue編譯！

         (2). 何時: 如果内容正文中，剛好有{{}}，又不想被vue編譯時，就可用v-pre來保護.

         (3). 如何: <元素 v-pre>

         (4). 結果: 内容中的{{}}會原樣顯示在網頁中。

         (5). 示例: 使用v-pre保護内容中的{{}}不被new Vue()編譯

         5_v-pre.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3 v-pre>Vue中都是用{{變量名}}文法來标記頁面中可能發生變化的位置</h3>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

運作結果：

Vue中都是用{{變量名}}文法來标記頁面中可能發生變化的位置

11. v-model

         (1). 什麼: v-model 指令，能輕松實作表單輸入和應用狀态之間的雙向綁定。

         (2). 何時: 擷取到使用者表單送出的資料，我們通常會使用v-model指令來完成。

◼️ v-model的作用

👉 vue中使用v-model指令來實作表單元素和資料的雙向綁定。

👉 将表單中使用者送出的資訊和程式員設定的變量進行綁定。

❓ 差別于v-bind：動态更新HTML元素上的屬性的值

v-model屬性的值是一個資料的變量，如果資料的值發生變化，會影響input的值，input的值的變化同時影響資料的變化

◼️ v-mode的原理

官方文檔：『

v-model

 本質上不過是文法糖。它負責監聽使用者的輸入事件以更新資料，并對一些極端場景進行一些特殊處理。』

因為官方文檔裡有說到，v-model其實是一個文法糖，他背後的原理本質上是包含兩個操作

  • v-bind綁定元素的value屬性
  • v-on指令給目前元素綁定input事件

是以上述代碼等價于

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    /*簡寫: <input type="text" :value="message" @input="message=$event.target.value" placeholder="請輸入"> */   
    <input type="text" v-bind:value="message" v-on:input="message = $event.target.value" placeholder="請輸入">
    <p>輸入的内容是:{{ message }}</p>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       message: ''
     }
   })
 </script>
</body>
</html>

當然，我們也可以把input事件定義為一個方法去調用——v-on綁定input事件監聽到函數中，函數會擷取最新的值指派到綁定的屬性中；

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" :value="message" @input="handleInput" placeholder="請輸入">
    <p>輸入的内容是:{{ message }}</p>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       message: ''
     },
     methods: {
    //對象方法簡寫
      // handleInput(e){
      //   this.messsge = e.target.value;
      // }
      handleInput: function (e) {
         this.messsge = e.target.value;
       }
     }
   })
 </script>
</body>
</html>
【vue】vue的常用指令及用法總結（續）_03

💥 擴充：this判斷—8種指向

this  8種指向: 判斷this，一定不要看定義在哪兒！隻看調用時！

➡️ 1. obj.fun()   this->obj

➡️ 2. fun() 或 (function(){ ... })() 或 多數回調函數 或 定時器函數   this->window

➡️ 3. new Fun()   this->new正在建立的新對象

➡️ 4. 類型名.prototype.共有方法=function(){ ... }   this->将來誰調用指誰，同第一種情況

➡️ 5. DOM或jq中事件處理函數中的this->目前正在觸發事件的DOM元素對象

                               如果需要使用簡化版函數，必須$(this)

➡️ 6. 箭頭函數中的this->箭頭函數外部作用域中的this

➡️ 7. jQuery.fn.自定義函數=function(){ ... }   this->将來調用這個自定義函數的.前的jQuery子對象，不用再$(this)

➡️ 8. new Vue()中methods中的函數中的this->目前new Vue()對象 

【vue】vue的常用指令及用法總結（續）_03

⬛ 總結：知識點提煉

1. MVVM: 界面View+模型Model+視圖模型ViewModel

2. Vue綁定原理: 通路器屬性+虛拟DOM樹

         變量被修改時: 通路器屬性發出通知，虛拟DOM樹掃描并僅更新受影響的元素

3. 虛拟DOM樹優點:

(1). 小: 隻包含可能變化的元素。

(2). 周遊查找快

(3). 修改效率高: 隻修改受影響的元素。

(4). 避免重複編碼: 已封裝DOM增删改查代碼

4. Vue功能3步:

(1). 先建立增強版的界面:

  a. 整個界面必須包含在一個唯一的父元素下:

    通常是<div id="app">

  b. 可能變化的元素内容用{{自定義變量名}}标記

  c. 觸發事件的元素用@click="自定義處理函數名"标記

(2). 再建立new Vue()對象,其中el:指向new Vue()要監控的頁面區域

(3). 在new Vue()對象内定義模型對象data和methods

  a.界面所需的所有變量都放在data中

  b.界面所需的所有事件處理函數都放在methods中

5. 總結: 綁定文法+13種指令

(1). 如果元素的内容需要随變量自動變化:  {{}}

(2). 如果元素的屬性值需要随變量自動變化:  :

(3). 控制一個元素顯示隐藏: v-show //使用display:none隐藏元素

(4). 控制兩個元素二選一顯示:  v-if  v-else //使用删除元素方式隐藏元素

(5). 多個元素多選一顯示: v-if  v-else-if   v-else

(6). 隻要反複生成多個相同結構的元素組成清單時: v-for  :key="唯一辨別"

強調: 為什麼必須加:key="i"？給每個元素副本添加唯一辨別。修改數組中某個元素值時，避免重建整個清單，隻需要修改一個DOM元素副本即可！提高修改效率。

(7). 隻要綁定事件: @  $event

(8). 防止使用者短暫看到{{}}: v-cloak和v-text

(9). 隻要綁定原始HTML代碼片段内容: v-html

(10). 如果元素的内容隻在首次加載時綁定一次，之後都不會改變: v-once

         優化: 減少虛拟DOM樹中元素個數。

(11). 保護内容中的{{}}不被編譯: v-pre

(12). 今後隻要想獲得表單元素的值或狀态: v-model

更多v-model指令詳解，待續...👇

 【後文傳送門】👉  vue雙向資料綁定的原了解析及代碼實作_04

【vue】vue的常用指令及用法總結（續）_03

​​​

如果這篇【文章】有幫助到你，希望可以給【青春木魚】點個贊👍，創作不易，相比官方的陳述，我更喜歡用【通俗易懂】的文筆去講解每一個知識點，如果有對【前端技術】感興趣的小可愛，也歡迎關注❤️❤️❤️【青春木魚】❤️❤️❤️，我将會給你帶來巨大的【收獲與驚喜】💕💕！
# ⭐ Vue.js入門基礎 vue.js javascript vue指令 前端架構 前端
上一篇: RK3568平台開發系列講解（圖像篇）BMP圖像處理一、BMP檔案格式解析
下一篇: 八、SpringBoot整合多線程異步前言一、異步調用實作二、@Async整合線程池

繼續閱讀