Vue常用指令

1.簡(jiǎn)介

本小節(jié)我們將介紹在 Vue 項(xiàng)目中常用的一些指令。包括每個(gè)指令的含義以及如何使用他們。我們?cè)谌粘ｍ?xiàng)目中會(huì)大量地使用指令，指令是 Vue 中相對(duì)基礎(chǔ)和簡(jiǎn)單的知識(shí)點(diǎn)。同學(xué)們只需要了解每個(gè)指令的含義，對(duì)案例中的代碼反復(fù)練習(xí)就可以熟練掌握。

2.小簡(jiǎn)白解釋

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況，稍后我們?cè)儆懻?。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。 — 官方定義：Vue 指令是帶有 v- 前綴的特殊 attribute，它的值是一個(gè)表達(dá)式，指令幫助我們操作 DOM，當(dāng)表達(dá)式的值發(fā)生改變時(shí)更新渲染 DOM。

3.常用指令介紹

接下來(lái)我們將逐個(gè)介紹各個(gè)指令的含義和使用方式。

3.1 v-text

v-text是元素的 InnerText 屬性，它的作用和之前我們使用的 {{}} 一樣，用于數(shù)據(jù)綁定：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-text="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
    el: '#app',
  data: {
    message: "Hello!"
  },
})
</script>
</html>

運(yùn)行結(jié)果

Hello!

代碼解釋：
在 HTML 代碼第 2 行，我們使用了 v-text 指令，它綁定 message 值，會(huì)將 message 的值動(dòng)態(tài)插入 <div> 標(biāo)簽內(nèi)。

3.2 v-html

v-html是元素的 innerHTML，它用于綁定一段 html 標(biāo)簽：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
    el: '#app',
    data: {
        message: "<div>您好，我是小簡(jiǎn)白！</div>",
    }
  })
</script>
</html>

運(yùn)行結(jié)果

您好，我是小簡(jiǎn)白！

代碼解釋：
在 HTML 代碼第 2 行，我們使用了 v-html 指令，它綁定 message 值，會(huì)將 html 元素插入 <div> 標(biāo)簽內(nèi)。

3.3 v-bind

v-bind用于給元素的屬性賦值。v-bind后面是 ：屬性名=[變量名]。例如:v-bind:title="message"：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-bind:title="title">
      鼠標(biāo)懸停查看消息！
    </div>
    <div>
      <a v-bind:href="href">小簡(jiǎn)白</a>
    </div>
    <div>
      <img style="width: 200px;" v-bind:src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按鈕</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        title: "您好，我是小簡(jiǎn)白，歡迎來(lái)到小簡(jiǎn)白的簡(jiǎn)書(shū)！希望你可以在這里學(xué)到更多的東西！",
      href: 'http://www.itdecent.cn/u/2c22b1194089',
      src: 'https://cn.vuejs.org/images/logo.svg',
      disabled: true
    }
  })
</script>
</html>

運(yùn)行結(jié)果

<img src="C:\Users\Administrator\Desktop\微信圖片_20210806161407.png" style="zoom:50%;" />

代碼解釋：
在 HTML 代碼第 2 行，我們使用了 v-bind 指令給 div 標(biāo)簽的 title 屬性賦值。
在 HTML 代碼第 6 行，我們使用了 v-bind 指令給 a 標(biāo)簽的 href 屬性賦值。
在 HTML 代碼第 9 行，我們使用了 v-bind 指令給 img 標(biāo)簽的 src 屬性賦值。
在 HTML 代碼第 12 行，我們使用了 v-bind 指令給 bitton 標(biāo)簽的 disabled 屬性賦值。

vue 還提供了指令 v-bind 的簡(jiǎn)寫方式，可以直接通過(guò):屬性名的方式。例如在上述例子中我們可以改寫成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div :title="title">
      鼠標(biāo)懸停查看消息！
    </div>
    <div>
      <a :href="href">小簡(jiǎn)白</a>
    </div>
    <div>
      <img :src="src"/>
    </div>
    <div>
      <button :disabled="disabled">禁用按鈕</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        title: "您好，我是小簡(jiǎn)白，歡迎來(lái)到小簡(jiǎn)白的簡(jiǎn)書(shū)！希望你可以在這里學(xué)到更多的東西！",
      href: 'http://www.itdecent.cn/u/2c22b1194089',
      src: 'https://cn.vuejs.org/images/logo.svg',
      disabled: true
    }
  })
</script>
</html>

運(yùn)行結(jié)果同上

3.4 v-for

v-for 用于列表的循環(huán)渲染。基本語(yǔ)法：v-for="item in data"，data 可以是數(shù)組或者對(duì)象，接下來(lái)我們介紹對(duì)兩種數(shù)據(jù)類型的循環(huán)。

3.4.1 v-for 對(duì)數(shù)組的循環(huán)渲染

當(dāng)我們對(duì)數(shù)組進(jìn)行循環(huán)的時(shí)候，item 表示數(shù)組中具體的某一項(xiàng)：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in music">{{item.name}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data() {
    return {
      // 要循環(huán)的數(shù)組
      music: [
        { name: '青花瓷' },
        { name: '陽(yáng)光總在風(fēng)雨后' },
        { name: '十年' }
      ]
    }
  }
})
</script>
</html>

代碼解釋：
在 JS 代碼第 6-10 行，我們定義了數(shù)組 music。
在 HTML 第 3 行，我們使用 v-for 對(duì)數(shù)組進(jìn)行遍歷，循環(huán)輸出<li></li>，并在每次循環(huán)的時(shí)候?qū)?name 插入到 <li> 標(biāo)簽內(nèi)。
頁(yè)面展現(xiàn)結(jié)果：

  • 青花瓷
  • 陽(yáng)光總在風(fēng)雨后
  • 十年

3.4.2 v-for 對(duì)象的循環(huán)渲染

當(dāng)我們對(duì)數(shù)組進(jìn)行循環(huán)的時(shí)候，item 表示對(duì)象中某一屬性的值：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in obj">{{item}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        name: '句號(hào)',
        age: 18,
        sex: '男'
      }
    }
  }
})
</script>
</html>

代碼解釋：
在 JS 代碼第 5-9 行，我們定義了對(duì)象 obj；
在 HTML 第 3 行，我們使用 v-for 對(duì)數(shù)組進(jìn)行遍歷，循環(huán)輸出<li></li>，并在每次循環(huán)的時(shí)候?qū)傩缘闹挡迦氲?<li> 標(biāo)簽內(nèi)。

運(yùn)行結(jié)果

  • 句號(hào)
  • 18
  • 男

3.5 v-if和v-show

vue提供了v-if和v-show兩個(gè)指令來(lái)控制頁(yè)面元素的顯示和隱藏。我們先通過(guò)一段代碼來(lái)看一下使用兩個(gè)指令各有什么效果：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <button>我是添加按鈕，我一直在</button>
    </div>
    <div>
      <button id="show" v-show="deleteButton">我是刪除按鈕，我通過(guò)v-show控制顯隱</button>
      <button v-on:click="deleteButton = true">設(shè)置顯示</button>
      <button v-on:click="deleteButton = false">設(shè)置隱藏</button>
    </div>
    <div>
      <button id="if" v-if="editButton">我是修改按鈕，我通過(guò)v-if控制顯隱</button>
      <button v-on:click="editButton = true">設(shè)置顯示</button>
      <button v-on:click="editButton = false">設(shè)置隱藏</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app',
   data() {
     return {
       deleteButton: true,
       editButton: true
     }
   }
})
</script>
</html>

代碼解釋：
在 HTML 中我們?cè)O(shè)置了兩個(gè)按鈕：1. id 為 show 的 button 通過(guò) v-show 控制顯隱。2. id 為 if 的按鈕通過(guò) v-if控制顯隱。通過(guò)點(diǎn)擊事件修改綁定的值。

細(xì)心的同學(xué)可能會(huì)想，既然v-if和v-show都能實(shí)現(xiàn)元素的顯示隱藏，那為什么需要提供兩個(gè)指令呢？在回答這個(gè)問(wèn)題之前，我們先看一下剛剛寫的案例頁(yè)面。打開(kāi)瀏覽器開(kāi)發(fā)者工具，通過(guò)元素審查找到刪除按鈕和修改的DOM元素。

接下來(lái)我們通過(guò)點(diǎn)擊隱藏，將兩個(gè)按鈕設(shè)置為隱藏狀態(tài)，頁(yè)面效果如下：
[圖片上傳失敗...(image-b745fe-1628241403700)]

從圖中可以發(fā)現(xiàn)：通過(guò)v-show設(shè)置狀態(tài)的按鈕元素還在頁(yè)面中，只是通過(guò)樣式display:none設(shè)置隱藏。而通過(guò)v-if設(shè)置狀態(tài)的按鈕元素從頁(yè)面中刪除了。現(xiàn)在同學(xué)們是不是已經(jīng)知道v-show和v-if的區(qū)別了呢？

v-if：根據(jù)表達(dá)式的值在 DOM 中生成或移除一個(gè)元素。

v-show：根據(jù)表達(dá)式的值通過(guò)樣式的改變來(lái)顯示或者隱藏 HTML 元素。

3.6 v-if、v-else-if、v-else

上面我們已經(jīng)了解了v-if的使用方法。事實(shí)上，v-if的條件渲染和JavaScript條件判斷語(yǔ)句中的if、else、else if非常類似。

3.6.1 使用 v-else 指令來(lái)表示 v-if 的 “else 塊”：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="Math.random() > 0.5">
      你好，小簡(jiǎn)白！
    </div>
    <div v-else>
      Hello， World!
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app'
})
</script>
</html>

代碼解釋：
在 HTML 代碼中，當(dāng)隨機(jī)數(shù)大于 0.5 的時(shí)候會(huì)顯示中文的“你好，小簡(jiǎn)白！”，否則，顯示英文的 “ Hello， World!”。

3.6.2 v-else-if，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="number === 1">
      A
    </div>
    <div v-else-if="number === 2">
      B
    </div>
    <div v-else>
     C
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app',
   data() {
     return {
       number: 1
     }
   }
})
</script>
</html>

在 HTML 代碼中，我們通過(guò)判斷 number 的值來(lái)控制元素的顯示隱藏。首先判斷 number 是否為 1 ，如果是顯示 A，如果不是，則判斷 number 是否為 2，如果是顯示 B，否則顯示 C。

3.7 v-on

有時(shí)候，我們需要給元素綁定事件，vue 中提供了指令 v-on 來(lái)進(jìn)行事件的綁定。用法：v-on:事件名="方法"，例如：v-on：click=“alert”。

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="hello">hello</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    hello() {
        alert('hello')
    }
  }
})
</script>
</html>

代碼解釋：
在 HTML 代碼第 2 行，我們給按鈕定義來(lái)點(diǎn)擊事件，并在點(diǎn)擊的時(shí)候觸發(fā) methods 中的 hello 方法。

和v-bind一樣vue同樣給v-on提供了簡(jiǎn)寫方式，只需要通過(guò)@事件類型的方式就可以了。例如：@click="hello"。

當(dāng)然，v-on不僅只有click一種事件，還有 v-on:keyup.enter、v-on:keyup.page-down、v-on:submit等。

更多用法我們?cè)诮酉聛?lái)的章節(jié)中繼續(xù)深入。

3.8 v-model

在原生 Javascript 的項(xiàng)目中，要獲取用戶輸入框輸入的內(nèi)容，需要通過(guò)DOM對(duì)象的方式。在Vue項(xiàng)目中則不用這么繁瑣，因?yàn)?code>vue通過(guò)了指令v-model來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。我們通過(guò)下面一段代碼來(lái)學(xué)習(xí)一下：

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年齡：</label>
      <input v-model="age"/>
    </div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
    <button @click="add">加一歲</button>
    <button @click="alertYear">彈出年齡</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  },
  methods: {
    add(){
        this.age = this.age + 1;
    },
    alertYear() {
        alert(this.age)
    }
  }
})
</script>
</html>

代碼解釋：
上述代碼中，我們通過(guò)給input元素綁定指令v-model, 使得輸入框中的數(shù)據(jù) 和 data中的age形成雙向綁定。這樣當(dāng)用戶在輸入框內(nèi)輸入值的時(shí)候age也會(huì)同時(shí)改變。同樣，當(dāng)我們?cè)?code>methods中通過(guò)add方法修改age的值時(shí)，輸入框中的值也會(huì)同時(shí)改變。

3.9 v-pre

該指令會(huì)跳過(guò)所在元素和它的子元素的編譯過(guò)程，也就是把這個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn)當(dāng)作一個(gè)靜態(tài)節(jié)點(diǎn)來(lái)處理，例如：
<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-pre>當(dāng)前輸入的年齡是: {{age}}</div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  },
  
})
</script>
</html>

代碼解釋：
在 HTML 代碼第 2 行，我們給 div 添加了 v-pre 指令，所以 插值表達(dá)式 {{age}} 并不會(huì)生效。同樣，第三行的 div 沒(méi)有添加 v-pre 指令，能正常編譯顯示。

其渲染結(jié)果為：

<>代碼塊

當(dāng)前輸入的年齡是: {{age}}
當(dāng)前輸入的年齡是： 10

3.10 v-once

模板只會(huì)在第一次更新時(shí)顯示數(shù)據(jù)，此后再次更新該 DOM 里面引用的數(shù)據(jù)時(shí)，內(nèi)容不會(huì)自動(dòng)更新。

<>實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年齡：</label>
      <input v-model="age"/>
    </div>
    <div v-once>當(dāng)前輸入的年齡是: {{age}}</div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  }
})
</script>
</html>

代碼解釋：
在 HTML 代碼第 6 行，我們給 div 添加了 v-once 指令，當(dāng)輸入框內(nèi)的數(shù)據(jù)發(fā)生改變時(shí)，被v-once作用的 div 并不會(huì)實(shí)時(shí)更新數(shù)據(jù)。

4. 小結(jié)

本小節(jié)我們學(xué)習(xí)了 Vue 中的一些常用的指令，主要有以下知識(shí)點(diǎn)：

  • v-text、v-html 用于頁(yè)面渲染；
  • v-show、v-if、v-else-if、v-else 條件渲染指令；
  • v-model 用于數(shù)據(jù)雙向綁定；
  • v-on 用于事件綁定；
  • v-for 用于循環(huán)。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、邏輯相關(guān) v-if 我們可以通過(guò)v-if、v-else-if、v-else來(lái)對(duì)頁(yè)面元素的條件進(jìn)行判斷輸出 效果...
    moutory閱讀 280評(píng)論 0贊 0
  • 1.v-html 往div里插入標(biāo)簽，v-html不僅可以渲染數(shù)據(jù)，而且可以解析標(biāo)簽 如果需要定義插入標(biāo)簽的樣式，...
    missChester閱讀 557評(píng)論 0贊 0
  • Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on Vue.js的指...
    干凈_79db閱讀 848評(píng)論 0贊 0
  • 模板語(yǔ)法（插值表達(dá)式） 數(shù)據(jù)綁定的最常見(jiàn)的形式是文本插值 {{ }} 指令 指令的作用：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)...
    聽(tīng)書(shū)先生閱讀 310評(píng)論 0贊 1
  • 指令目錄： 1.v-show2.v-if3.v-model4.v-on5.v-for6.v-bind7.v-tex...
    DonyK閱讀 272評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容