Vue基本指令實(shí)例圖文講解

更新時(shí)間：2021年02月25日 12:04:21 作者：盛開(kāi)的太陽(yáng)

這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對(duì)于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下

Vue (讀音 /vjuː/，類(lèi)似于 view) 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

一. v-on指令

1. 基礎(chǔ)用法

v-on是事件監(jiān)聽(tīng)的指令, 下面來(lái)看簡(jiǎn)單用法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <h2>{{counter}}</h2>
 <button v-on:click="add"> + </button>
 <button v-on:click="sub"> - </button>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   counter: 0
  },
  methods: {
   add() {
    this.counter ++
   },
   sub() {
    this.counter --
   }
  }
 });
</script>
</body>
</html>

我們給按鈕綁定了點(diǎn)擊事件. v-on:click = "add"

v-on: 后面加時(shí)間名稱(chēng)
需要指定綁定事件的事件名

來(lái)看看運(yùn)行效果

2. 語(yǔ)法糖

我們知道, v-bind指令可以簡(jiǎn)寫(xiě)為:, 同樣v-on也可以簡(jiǎn)寫(xiě), 簡(jiǎn)寫(xiě)為@, 如上寫(xiě)法可以簡(jiǎn)寫(xiě)如下:

<button @click="add"> + </button>
<button @click="sub"> - </button>

3. 事件的參數(shù)

無(wú)參方法

上面的案例都是不帶參數(shù). 如果方法沒(méi)有參數(shù), 那么我們?cè)谡{(diào)用的時(shí)候可以省略括號(hào)

add方法不帶參數(shù), 調(diào)用的時(shí)候可以有如下兩種寫(xiě)法:

復(fù)制代碼 代碼如下:
<button @click="add"> + </button>或者<button @click="add()"> + </button>

兩種寫(xiě)法都可.

有參方法

如果一個(gè)方法有參數(shù), 如下案例

<script>
 var app = new Vue({
  el: "#app",
  data: {
   num1: 10,
   num2: 100
  },
  methods: {
   print(message) {
    console.log("打印" + message)
   }
  }
 });
</script>

調(diào)用方式1: 那么調(diào)用的時(shí)候括號(hào)里不帶參數(shù).

<div id="app">
 <button @click="print()"> 打印 </button>
</div>

這是方法的參數(shù)傳入的是undefined.

調(diào)用方式2: 不帶括號(hào)

<div id="app">
 <button @click="print"> 打印 </button>
</div>

這里和方式1的區(qū)別是, 調(diào)用方法的括號(hào)都省了.

這時(shí)會(huì)是什么效果呢?

可以看到, 這時(shí)不是undefined了, 而是一個(gè)MouseEvent鼠標(biāo)事件.

為什么呢? 其實(shí), 當(dāng)鼠標(biāo)點(diǎn)擊按鈕的時(shí)候, 頁(yè)面會(huì)自動(dòng)生成一個(gè)事件, 如果沒(méi)有傳遞參數(shù), 那么會(huì)自動(dòng)將這個(gè)事件作為參數(shù)傳遞過(guò)了, 如果需要調(diào)用這個(gè)事件, 那么, 可以在方法入?yún)?顯示的接收event參數(shù).

調(diào)用方式3: 參數(shù)中既有普通參數(shù), 又有event參數(shù)

這是我們調(diào)用的時(shí)候, 要使用$event

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <button @click="print"> button1 </button>
 <button @click="print1('aaa')"> button2 </button>
 <button @click="print1('aaa', $event)"> button3 </button>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   num1: 10,
   num2: 100
  },
  methods: {
   print(message) {
    console.log("打印" + message)
   },
   print1(message, event){
    console.log("打印" + event + ", message:" + message)
   },
   print2(message, event) {
    console.log("event:" + event + ", message:" + message)
   }
  }
 });
</script>
</body>
</html>

然后來(lái)看效果

同時(shí)將message和event都傳遞過(guò)來(lái)了

4. 事件修飾符

stop : 調(diào)用event.stopPropagation() 阻止冒泡事件

看如下代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app" @click="divClick">
 <button @click="btnClick">按鈕</button>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello"
  },
  methods:{
   divClick(){
    console.log("divClick")
   },
   btnClick(){
    console.log("btnClick")
   }
  }
 });
</script>
</body>
</html>

div里面有一個(gè)btn, div有一個(gè)click事件, btn也有一個(gè)click事件, 當(dāng)我們點(diǎn)擊btn的時(shí)候, 回調(diào)用兩個(gè)方法么?我們來(lái)看看效果

確實(shí)調(diào)用了btn的click()方法, 而且還調(diào)用了div的click()方法. 這是事件冒泡機(jī)制, 通常我們?cè)陧?yè)面是要避免這樣的情況發(fā)生的. 所以會(huì)寫(xiě)一個(gè)方法阻止事件冒泡.

但是在vue里面, 使用stop修飾符就可以解決這個(gè)問(wèn)題. 在btn按鈕的click事件上增加stop修飾符

<div id="app" @click="divClick">
 <button @click.stop="btnClick">按鈕</button>
</div>

這樣就阻止了冒泡事件

prevent: 調(diào)用event.preventDefault() 阻止默認(rèn)事件

我們現(xiàn)在methods中定義一個(gè)方法

stopDefaultEventBtn(){
 console.log("stopDefaultEventBtn")
}

調(diào)用的時(shí)候, 我們定義一個(gè)submit表單提交按鈕, 我們知道表單有自己的提價(jià)時(shí)間, 點(diǎn)擊按鈕將跳轉(zhuǎn)到form表單指定的action地址.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" value="阻止默認(rèn)事件"></input>
 </form>
</div>

現(xiàn)在我們不想使用submit的自動(dòng)提交事件, 我們要阻止他, 而是使用我么自定義的stopDefaultEventBtn事件.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent="stopDefaultEventBtn" value="阻止默認(rèn)事件"></input>
 </form>
 <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認(rèn)的提交時(shí)間, 而是使用我自定義的事件. -->
</div>

這時(shí), 我們?cè)谡{(diào)用方法, 發(fā)現(xiàn)不會(huì)自動(dòng)跳轉(zhuǎn)到action指定的事件了, 而是進(jìn)入到click事件.

但是有個(gè)問(wèn)題, 雖然調(diào)用了click指定的事件, 但是依然有事件冒泡, 同時(shí)還調(diào)用和div的click事件, 這個(gè)簡(jiǎn)單, 在增加阻止冒泡事件就可以了.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="阻止默認(rèn)事件"></input>
 </form>
 <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認(rèn)的提交時(shí)間, 而是使用我自定義的事件. -->
</div>

(keyCode | keyAlias): 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)

我們來(lái)監(jiān)聽(tīng)一個(gè)鍵盤(pán)的按鍵事件 --- 監(jiān)聽(tīng)鍵盤(pán)上回車(chē)按鈕的按鍵事件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <input type="text" @keyup.enter="keyup" /><br/><br/>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello"
  },
  methods:{
   keyup() {
    console.log("keyup")
   }
  }
 });
</script>
</body>
</html>

@keyup.enter="keyup" 在keyup事件后面增加.enter即可

once: 只觸發(fā)一次回調(diào)

增加了 .once的事件, 只有第一次點(diǎn)擊有反應(yīng), 后面點(diǎn)擊就沒(méi)有反應(yīng)了.

二. v-if指令

條件判斷, 有三個(gè)指令

v-if
v-else-if
v-else

來(lái)看案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開(kāi)發(fā)過(guò)程中通常會(huì)遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
 <h2 v-if = "status == 1"> 啟用 </h2>
 <h2 v-else-if = "status == 2"> 禁用 </h2>
 <h2 v-else> 刪除 </h2>
 
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   status: 1
  }
 });
</script>
</body>
</html>

這個(gè)案例很簡(jiǎn)單,就不說(shuō)了. 有一點(diǎn)可以說(shuō), 就是通常只有兩種情況, 很簡(jiǎn)單的兩種情況,我們會(huì)使用v-if, v-else. 如果情況很復(fù)雜, 不建議在代碼寫(xiě)很多v-else-if, 因?yàn)榭勺x性差, 我們應(yīng)該吧條件判斷放到methods或者computed中進(jìn)行計(jì)算, 最后返回結(jié)果.

案例: 登錄界面使用賬號(hào)登錄和郵箱登錄的切換

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開(kāi)發(fā)過(guò)程中通常會(huì)遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
 <label v-if="userLogin">賬號(hào)登錄
 <input type="text" placeholder="請(qǐng)輸入賬號(hào)">
 </label>
 <label v-else>郵箱登錄
  <input type="text" placeholder="請(qǐng)輸入郵箱">
 </label>
 <button @click="userLogin = !userLogin" >切換</button>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   userLogin: true
  }
 });
</script>
</body>
</html>

在這里, 我們定義了一個(gè)變量userLogin, 是否是用戶(hù)登錄, 默認(rèn)是true; 定義兩個(gè)label和一個(gè)button, 點(diǎn)擊切換按鈕, 來(lái)兩個(gè)label之間來(lái)回切換.效果如下圖

但是這里有個(gè)問(wèn)題, 當(dāng)我們輸入內(nèi)容以后, 切換文本框的時(shí)候, 內(nèi)容卻不會(huì)消失. 如下圖

存在的問(wèn)題: 切換了類(lèi)型, 輸入的文字卻沒(méi)有被清空.

我們發(fā)現(xiàn), 在賬號(hào)登錄里面輸入了1234, 切換到郵箱登錄的時(shí)候, 卻沒(méi)有被清空. 這是兩個(gè)文本框, 但是值怎么被帶過(guò)來(lái)了呢?

原因

這是由于vue在進(jìn)行dom渲染時(shí), 考慮到性能問(wèn)題, 會(huì)盡可能復(fù)用已經(jīng)存在的元素. 而不是每次都創(chuàng)建新的元素. 這就是vue的虛擬dom.

如上圖, 我們的dom元素, 之前都是直接渲染到瀏覽器頁(yè)面的. 但是增加了vue以后, vue會(huì)幫我們將dom元素先進(jìn)行緩存, 緩存為虛擬dom.

當(dāng)我們使用v-if指令的時(shí)候, 兩個(gè)div的元素不可能同時(shí)執(zhí)行. 第一個(gè)div元素被渲染了以后, 在渲染第二個(gè)div的時(shí)候, 他發(fā)現(xiàn)有類(lèi)似的元素, 那么vue就緩存一份. 當(dāng)執(zhí)行到else的時(shí)候, vue判斷元素一樣, 只是部分內(nèi)容不同, 那就渲染不同的部分,相同的不會(huì)修改. 而我們輸入的內(nèi)容, 不在比較的范圍內(nèi), 所以, 會(huì)被帶過(guò)去.

如何避免這種情況呢? 使用屬性key

<div id="app">
 <label v-if="userLogin">賬號(hào)登錄
 <input type="text" placeholder="請(qǐng)輸入賬號(hào)" key="user">
 </label>
 <label v-else>郵箱登錄
  <input type="text" placeholder="請(qǐng)輸入郵箱" key="email">
 </label>
 <button @click="userLogin = !userLogin" >切換</button>
</div>

如果兩個(gè)key是一樣的, 那么就虛擬dom就緩存一份, 如果兩個(gè)key是不同的, 那么虛擬dom就會(huì)緩存兩份. 來(lái)看看這次的效果

三. v-show指令

v-show很簡(jiǎn)單, 就是隱藏/顯示元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開(kāi)發(fā)過(guò)程中通常會(huì)遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
 <h2 v-if = "isShow"> 啟用 </h2>
 <h2 v-show = "isShow"> 啟用 </h2>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   isShow: true
  }
 });
</script>
</body>
</html>

這兩個(gè)都是可以顯示出來(lái), 我們?cè)O(shè)置isShow=false, 都隱藏了,但隱藏的結(jié)果是不同的. 我們來(lái)看看html代碼

我們發(fā)現(xiàn)代碼里只有useShow對(duì)象, 并且增加了display:none樣式, 而沒(méi)有useIf對(duì)象. 也就是被直接刪除了

總結(jié): v-if和v-show的區(qū)別

v-if: true: 添加元素, false: 刪除元素
v-show: true: 增加樣式display:block; false: 修改樣式display:none

那么如何選擇呢?

當(dāng)現(xiàn)實(shí)與隱藏切換的很頻繁的時(shí)候, 使用v-show
當(dāng)只有一次切換時(shí), 使用v-if

四. v-for指令

遍歷有遍歷數(shù)組, 遍歷對(duì)象兩種形式

1. 遍歷數(shù)組

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Title</title>
</head>
<body>
<div id="app">
 <ul>
  <li v-for="item in languages">{{item}}</li>
  <li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   languages: ["java", "php", "python"]
  }
 });
</script>
</body>
</html>

遍歷數(shù)組如果不帶下標(biāo), 可以這么寫(xiě)

<li v-for="item in languages">{{item}}</li>

如果帶有下標(biāo), 可以這么寫(xiě)

<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>

2. 遍歷對(duì)象

遍歷對(duì)象有三種方式

只顯示對(duì)象的value
顯示對(duì)象的key和value
顯示對(duì)象的index, key和value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Title</title>
</head>
<body>
<div id="app">
 <p> 只顯示對(duì)象的value </p>
 <ul>
  <li v-for="item in students">{{item}}</li>
 </ul>

 <p> 顯示對(duì)象的key 和 value </p>
 <ul>
  <li v-for="(value, key) in students">{{key}} -- {{value}}</li>
 </ul>

 <p> 顯示對(duì)象的編號(hào) </p>
 <ul>
  <li v-for="(value, key, index) in students">{{index}} -- {{key}} -- {{value}} </li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   students: {
    name: "zhangsan",
    age: 20,
    sex: "male"
   }
  }
 });
</script>
</body>
</html>

具體寫(xiě)法如上圖. 需要注意的是, 當(dāng)顯示key和value的時(shí)候, value寫(xiě)在前面, key寫(xiě)在后面

3. 組件的key屬性

官方推薦, 我們?cè)谑褂胿-for的時(shí)候, 應(yīng)該給對(duì)應(yīng)的元素添加一個(gè):key屬性

為什么要添加key屬性呢?

詳細(xì)參考這篇文章:www.jianshu.com/p/4bd5e745ce95

增加了:key以后,會(huì)讓內(nèi)部的計(jì)算性能提高, 那么應(yīng)該怎么加呢?

<ul>
 <li v-for="item in students" :key="item">{{item}}</li>
</ul>

使用的時(shí)候, 如上示例: :key="item",

寫(xiě)法: :key
值是什么? 這里的值必須是要可以和value一一對(duì)應(yīng)的. 所以, 我們這里直接設(shè)置為item. 如果設(shè)置為index可以么? 當(dāng)然不可以, 因?yàn)楫?dāng)想數(shù)組中增減元素的時(shí)候, index就變化了

4. 數(shù)組中哪些方法是響應(yīng)式的

其實(shí), 通常我們?cè)诒闅v數(shù)組, 修改數(shù)組的值的時(shí)候, 習(xí)慣于使用下標(biāo)修改.

如:

this.languages[0] = "aaaa";

但是, 我們看看,下標(biāo)修改在vue中會(huì)怎么樣呢?

我們發(fā)現(xiàn)修改了languages,但是頁(yè)面沒(méi)變化, 實(shí)際上確實(shí)是修改了

所以, 我們得出結(jié)論: 直接通過(guò)下標(biāo)修改元素, 是非響應(yīng)式的.

那么數(shù)組的其他方法呢?看下面的案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <ul>
  <li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
 </ul>
 <br><br/><br/><br/><br/>
 <button @click="pushMethod">push</button>
 <button @click="popMethod">pop</button>
 <button @click="shiftMethod">shift</button>
 <button @click="unShiftMethod">unshift</button>
 <button @click="updateElement"></button>
 <button @click="spliceMethod">splice</button>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   languages: ["java", "php", "python", "go", "c語(yǔ)言"]
  },
  methods: {
   pushMethod() {
    this.languages.push("其他語(yǔ)言")
   },
   popMethod() {
    this.languages.pop()
   },
   shiftMethod() {
    this.languages.shift()
   },
   unShiftMethod() {
    this.languages.unshift("其他語(yǔ)言")
   },
   updateElement(){
    this.languages[0] = "aaaa";
   },
   spliceMethod() {
    /**
     * splice可以進(jìn)行
     * 1. 添加元素 splice(從第幾個(gè)元素開(kāi)始, 0, "未來(lái)語(yǔ)言1", "未來(lái)語(yǔ)言2")
     * 2. 刪除元素 splice(從第幾個(gè)元素開(kāi)始, 刪除幾個(gè)元素)
     * 3. 修改元素: 其實(shí)是刪除以后在添加 splice(從第幾個(gè)元素開(kāi)始, 修改幾個(gè)元素, 修改的元素內(nèi)容)
     */
    // 刪除元素
    //this.languages.splice(1, 1)
    // 修改元素
     //this.languages.splice(1, 2, "pthoon語(yǔ)言", "go語(yǔ)言")
    // 添加元素
    this.languages.splice(1, 0, "未來(lái)語(yǔ)言1", "未來(lái)語(yǔ)言2")

   }
  }
 });
</script>
</body>
</html>

push(從尾部添加元素---響應(yīng)式的
pop : 從尾部刪除元素---響應(yīng)式的
shift : 從頂部刪除元素---響應(yīng)式的
unshift : 從頂部添加元素---響應(yīng)式的
splice : 添加元素, 修改元素, 刪除元素---響應(yīng)式的

通過(guò)測(cè)試, 這幾個(gè)方法都是響應(yīng)式的.

所以, 如果我們想要修改/刪除元素, 建議使用splice, 這樣可以立刻看到效果.

五. v-model指令

1. v-model的基本用法

v-model指令用來(lái)實(shí)現(xiàn)表單元素和數(shù)組元素的雙向綁定

在輸入框輸入內(nèi)容時(shí), 會(huì)實(shí)時(shí)將輸入內(nèi)容傳遞給data數(shù)據(jù)
data數(shù)據(jù)發(fā)生變更, 也會(huì)實(shí)時(shí)同步給輸入框
雙向綁定

案例: 文本框輸入雙向同步

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <form>
  <input type="text" placeholder="請(qǐng)輸入" v-model="message">
 </form>
 message的內(nèi)容是:{{message}}
</div>

<script src="../js/vue.js"></script>
<script>
 let app = new Vue({
  el: "#app",
  data: {
   message: "hello"
  }
 });
</script>
</body>
</html>

我們定義了一個(gè)變量message, 然后在input輸入框中使用v-model="message"就可以和這個(gè)變量進(jìn)行雙向綁定了

2. v-model的原理

其實(shí)v-model包含了兩個(gè)操作

一個(gè)是v-bind: 綁定data數(shù)據(jù)給input屬性
另一個(gè)是v-on: 調(diào)用輸入框的input事件, 實(shí)時(shí)修改data數(shù)據(jù)

案例: 模擬v-model的兩步操作

首先, 我們知道讓文本框顯示data中message的值, 可以直接使用v-bind:value, 這樣我們修改了message的值, 文本框自動(dòng)響應(yīng)

<input type="text" placeholder="請(qǐng)輸入" :value="message">

這是將數(shù)據(jù)響應(yīng)給文本框. 那么, 如何將文本框修改的內(nèi)容,同步給數(shù)據(jù)呢? 使用文本框的輸入事件: v-on:input

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <input type="text" placeholder="請(qǐng)輸入" :value="message" @input="change">

 <p>message的內(nèi)容是:{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
 let app = new Vue({
  el: "#app",
  data: {
   message: "hello"
  },
  methods: {
   change(event) {
    this.message = event.target.value;
   }
  }
 });
</script>
</body>
</html>

這里使用了@input給文本框綁定了input事件, change()方法沒(méi)有加括號(hào), 會(huì)自動(dòng)將默認(rèn)的參數(shù)event傳過(guò)去, 如果想要顯示的設(shè)置event參數(shù), 可以試用@input="change($event)".

然后在change方法中, 設(shè)置this.message=event.target.value;

結(jié)論:

<input type="text" v-model="message">

等同于

<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

2. v-model在radio中的使用

案例: 性別選擇

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <form>
  <input type="radio" name="sex" id="male" value="男" v-model="sex">男
  <input type="radio" name="sex" id="female" value="女" v-model="sex">女
 </form>
 當(dāng)前選中的是: {{sex}}
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   sex: "男"
  }
 });
</script>
</body>
</html>

使用了v-model以后, 就可以不使用name屬性了, 默認(rèn)將具有同一個(gè)v-model值的radio作為一組

3. v-model在checkbox中的使用

1) checkbox單選框

案例: 是否同意協(xié)議

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <label for="agreeContent">
 　　<input type="checkbox" name="agreeContent" id="agreeContent" value="同意協(xié)議" v-model="agreeContent">統(tǒng)一協(xié)議
 　　<br/>當(dāng)前選中的是: {{agreeContent}}
 </label>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   agreeContent: false
  }
 });
</script>
</body>
</html>

是否同意協(xié)議: data數(shù)據(jù)中agreeContent: 值是true或者false. true表示選中文本框, false表示取消選中

注意: label的好處

input被包在了label中, 這樣的好處是, 點(diǎn)擊文字也可以選中和取消. 如果不放在lable中,就必須選擇復(fù)選框.

2) checkbox復(fù)選框

復(fù)選框的值是一個(gè)數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <h2>單選框</h2>
 <label for="agreeContent">
 <input type="checkbox" name="agreeContent" id="agreeContent" value="同意協(xié)議" v-model="agreeContent">同意協(xié)議
 <br/>當(dāng)前選中的是: {{agreeContent}}
 </label>
 <br/><br/><br/><br/><br/>
 <h2>復(fù)選框</h2>
 <form>
  <input type="checkbox" name = "hobby" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" name = "hobby" value="籃球" v-model="hobbies">籃球
  <input type="checkbox" name = "hobby" value="足球" v-model="hobbies">足球
  <input type="checkbox" name = "hobby" value="排球" v-model="hobbies">排球
  <br/>當(dāng)前選中的愛(ài)好是: {{hobbies}}
 </form>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   agreeContent: false,
   hobbies:[]
  }
 });
</script>
</body>
</html>

在data中定義了一個(gè)hobbies數(shù)組. 并且將這個(gè)數(shù)組綁定給checkbox付款框的每一項(xiàng). 即可實(shí)現(xiàn)效果

區(qū)別:

單個(gè)復(fù)選框?qū)?yīng)的data是bool類(lèi)型
多個(gè)復(fù)選框?qū)?yīng)的data是數(shù)組類(lèi)型

4. v-model在select中的使用

1) select單選

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <select v-model="selectOne">
  <option id="apple" value="蘋(píng)果" >蘋(píng)果</option>
  <option id="banana" value="香蕉" >香蕉</option>
  <option id="strawberry" value="草莓" >草莓</option>
  <option id="grape" value="葡萄" >葡萄</option>
 </select>
 <br/>
 <p>當(dāng)前選中的是: {{selectOne}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   sex: "男",
   selectOne:"蘋(píng)果"
  }
 });
</script>
</body>
</html>

注意: 在select單選下拉框中, v-model要寫(xiě)在select元素上

2) select多選

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <br/>
 <br/>
 <br/>
 <select v-model="favoriteFrite" multiple>
  <option id="apple" value="蘋(píng)果" >蘋(píng)果</option>
  <option id="banana" value="香蕉" >香蕉</option>
  <option id="strawberry" value="草莓" >草莓</option>
  <option id="grape" value="葡萄" >葡萄</option>
 </select>
 <br/>
 <p>當(dāng)前選中的是: {{favoriteFrite}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   favoriteFrite:[]
  }
 });
</script>
</body>
</html>

在使用多選的時(shí)候, 在select中增加一個(gè)multiple即可設(shè)置為多復(fù)選.

在數(shù)據(jù)中, 我們需要將其設(shè)置為一個(gè)數(shù)組. 如favoriteFrite:[]

下面來(lái)看看效果

總結(jié):

單選: 只能選中一個(gè)值, v-model綁定的是一個(gè)值
多選: 可以選中多個(gè)值, v-model綁定的是一個(gè)數(shù)組

6. v-model的修飾符

1. Lazy修飾符

默認(rèn)情況下, v-model是實(shí)時(shí)雙向同步的. 但有時(shí)候, 我們不希望他每次變化都實(shí)時(shí)響應(yīng), 那么, 可以使用lazy修飾符

v-model.lazy , 使用了lazy以后按回車(chē)或者文本框是去焦點(diǎn)即同步內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 
 <input type="text" v-model.lazy="message"/>
 <p>message的內(nèi)容是:{{message}}</p>

</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   count: 0,
   name:"zhangsan"
  }
 });
</script>
</body>
</html>

看效果

2. number修飾符

通常我們?cè)趯?xiě)一個(gè)只能輸入數(shù)字的文本框時(shí), 會(huì)這么寫(xiě)<input type="number" v-model = "count">

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <input type="number" v-model = "count">
 <p>count的類(lèi)型: {{count}} --- {{typeof count}}</p>

</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   count: 0,
   name:"zhangsan"
  }
 });
</script>
</body>
</html>

但這么寫(xiě)獲取到的count值是什么類(lèi)型呢? 我們使用{{typeof count}}來(lái)看看count的類(lèi)型. 如下圖

我們看到count的類(lèi)型是String. 而不是number類(lèi)型
如何才能讓count是number類(lèi)型呢? 使用v-model.number="count", 如下圖:

<input type="number" v-model.number = "count">

3. trim修飾符

通常我們?cè)谖谋究蜉斎胛谋镜臅r(shí)候, 可能會(huì)誤輸入空格, 我們可以使用trim修飾符, 去掉文本框左右的空格

<input type="text" v-model.trim="name">

到此這篇關(guān)于Vue基本指令實(shí)例圖文講解的文章就介紹到這了,更多相關(guān)Vue基本指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
指令

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片