Vue3?中的模板語法小結(jié)

更新時間：2023年03月06日 08:49:01 作者：清風(fēng)?與我

Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上，這篇文章主要介紹了Vue3?中的模板語法,需要的朋友可以參考下

前言

Vue.js 從版本 1.x 到版本 3.x，官方代碼案例和推薦使用都是模板語法，那么本篇文章我們也根據(jù)官方的推薦，來了解一下模板語法是怎么一回事。

一、什么是模板語法？

我們可以把 Vue.js 的模板語法，直接理解為 HTML 語法的一種擴(kuò)展，它所有的模板節(jié)點(diǎn)聲明、屬性設(shè)置和事件注冊等都是按照 HTML 的語法來進(jìn)行擴(kuò)展設(shè)計的。按照官方的說法就是“所有的 Vue 模板都是語法層面合法的 HTML，可以被符合規(guī)范的瀏覽器和 HTML 解析器解析”。

Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上

二、內(nèi)容渲染指令

1. v-text

使用 v-tex t指令，將數(shù)據(jù)采用純文本方式填充其空元素中

// 組合式
<script setup>

    import { reactive } from 'vue'

    let student = reactive({
        name: 'Jack',
        desc: '<h3>我是來自中國的小朋友！</h3>'
    })
    
</script>

<template>

  <!-- 使用v-text指令，將數(shù)據(jù)采用純文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text：以純文本的方式顯示數(shù)據(jù) -->
  <div v-text="student.desc"></div>

  <!-- 下面的代碼會報錯：div 元素不是空元素 -->
  <!-- <div v-text="student.name">這是原始的div數(shù)據(jù)</div> -->
   
</template>

2. {{ }} 插值表達(dá)式

在元素中的某一位置采用純文本的方式渲染數(shù)據(jù)

// 組合式
<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h3>我是來自中國的小朋友！</h3>'
})

</script>

<template>

    <!-- 插值表達(dá)式：在元素中的某一位置采用純文本的方式渲染數(shù)據(jù) -->
    <div>這是一個 DIV 元素，{{ student.name }}，{{ student.desc }}</div>

</template>

3. v-html

使用 v-html 指令，將數(shù)據(jù)采用 HTML 語法填充其空元素中

// 組合式
<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h3>我是來自中國的小朋友！</h3>'
})


</script>

<template>

    <!-- 使用v-html指令，將數(shù)據(jù)采用HTML語法填充其空元素中 -->

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 語法顯示數(shù)據(jù) -->
    <div v-html="student.desc"></div>

    <!-- 下面的代碼會報錯：div 元素不是空元素 -->
    <!-- <div v-html="student.name">這是原始的div數(shù)據(jù)</div> -->

</template>

三、雙向綁定指令

1. v-model

v-model 雙向數(shù)據(jù)綁定指令，視圖數(shù)據(jù)和數(shù)據(jù)源同步
一般情況下 v-model 指令用在表單元素中：

文本類型的 <input> 和 <textarea> 元素會綁定 value 屬性并偵聽 input 事件
<input type="checkbox"> 和 <input type="radio"> 會綁定 checked 屬性并偵聽 change 事件
<select>會綁定 value 屬性并偵聽 change 事件

// 組合式
<script setup>

import { ref } from 'vue' 

let inputText = ref('ABC')  // 單行文本框
let message = ref('本次更新有以下幾點(diǎn)：……') // 多行文本框
let open = ref(true) // 開燈（復(fù)選框）
let determine = ref('不確定') // 是否確定（復(fù)選框）
let likes = ref(['YMQ']) // 興趣愛好（復(fù)選框）
let sex = ref('woman') // 性別（單選按鈕）
let level = ref('B') //  // 證書等級（單選下拉框）
let city = ref(['蘇C', '蘇B']) // 去過的城市（多選下拉框）

</script>

<template>

    <!-- 單行文本框 -->
    <input type="text" v-model="inputText">

    <hr>
    <!-- 多行文本框 -->
    <textarea v-model="message"></textarea>

    <hr>
    <!-- 默認(rèn)情況下，復(fù)選框的值：true/false -->
    <input type="checkbox" v-model="open"> 燈

    <hr>
    <!-- 自定義復(fù)選框值： true-value/false-value -->
    <input type="checkbox" true-value="確定" false-value="不確定" v-model="determine"> 是否確定

    <hr>
    <input type="checkbox" value="LQ" v-model="likes"> 籃球
    <input type="checkbox" value="ZQ" v-model="likes"> 足球
    <input type="checkbox" value="YMQ" v-model="likes"> 羽毛球
    <input type="checkbox" value="PPQ" v-model="likes"> 乒乓球

    <hr>
    <input type="radio" value="man" v-model="sex"> 男
    <input type="radio" value="woman" v-model="sex"> 女

    <hr>
    證書等級：
    <select v-model="level">
        <option value="C">初級</option>
        <option value="B">中級</option>
        <option value="A">高級</option>
    </select>

    <hr>
    去過的城市：
    <select multiple v-model="city">
        <option value="蘇A">南京</option>
        <option value="蘇B">無錫</option>
        <option value="蘇C">徐州</option>
        <option value="蘇D">常州</option>
    </select>

</template>

2. v-model的修飾符

修飾符	作用	示例
`.number`	自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型	`<input v-model.number="age" />`
`.trim`	自動過濾用戶輸入的首尾空白字符	`<input v-model.trim="msg" />`
`.lazy`	在 `chang` 時而非 `input` 時更新	`<input v-model.lazy="msg" />`

// 組合式
<script setup>

import { ref } from 'vue' 

let age = ref(20)
let nickname = ref('')

</script>

<template>
    
    <p>將用戶輸入的值轉(zhuǎn)成數(shù)值 .number，懶更新 .lazy</p>
    <!-- 。number 將用戶輸入的值轉(zhuǎn)成數(shù)值，如果用戶輸入的內(nèi)容無法轉(zhuǎn)成數(shù)字，將不會更新數(shù)據(jù)源 -->
    <!-- .lazy 在 change 跟新數(shù)據(jù)源，而不是 input  -->
    <input type="text" v-model.lazy.number="age">

    <hr>
    <p>去掉首尾空白字符</p>
    <input type="text" v-model.trim="nickname">

</template>

四、屬性綁定指令

響應(yīng)式地綁定一個元素屬性，應(yīng)該使用 v-bind: 指令
如果綁定的值是 null 或者 undefined，那么該屬性將會從渲染的元素上移除
因?yàn)?v-bind 非常常用，我們提供了特定的簡寫語法:

// 組合式
<script setup>

import { reactive } from 'vue'

let picture = reactive({
    src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 圖像地址
    width: 200 // 顯示寬度
})

</script>

<template>

    <input type="range" min="100" max="500" v-model="picture.width">

    <hr>
    <!-- v-bind: 為 src 屬性綁定指定的數(shù)據(jù)源 -->
    <img v-bind:src="picture.src" v-bind:width="picture.width">

    <hr>
    <!-- : 是 v-bind: 的縮寫形式 -->
    <img :src="picture.src" :width="picture.width">

    <hr>

    <!-- 如果綁定的值是 null 或者 undefined，那么該屬性將會從渲染的元素上移除 -->
    <button @click="picture.width = null">設(shè)置寬度為NULL</button>

</template>

1. 動態(tài)綁定多個屬性值

直接使用 v-bind 來為元素綁定多個屬性及其值

// 組合式
<script setup>

import {reactive} from 'vue'

let attrs = reactive({
    class: 'error',
    id: 'borderBlue'
})

</script>

<template>
    
    <!-- 直接使用 v-bind 來為元素綁定多個屬性及其值 -->
    <button v-bind="attrs">我是一個普通的按鈕</button>

</template>

<style>
    .error {
        background-color: rgb(167, 58, 58);
        color: white;
    }

    #borderBlue {
        border: 2px solid rgb(44, 67, 167);
    }
</style>

渲染結(jié)果：
<button class="redBack" id="btnBorderBlue">我是一個普通按鈕</button>

2. 綁定class和style屬性

class 和 style 可以和其他屬性一樣使用 v-bind 將它們和動態(tài)的字符串綁定；但是，在處理比較復(fù)雜的綁定時，通過拼接生成字符串是麻煩且易出錯的；因此， Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強(qiáng)；除了字符串外，表達(dá)式的值也可以是對象或數(shù)組。

class屬性綁定

綁定對象

// 組合式
<script setup>

import { ref, reactive } from 'vue'

let btnClassObject = reactive({
    error: false, // 主題色
    flat: false // 陰影
})

let capsule = ref(false)// 膠囊
let block = ref(false)// 塊

</script>

<template>

    <input type="checkbox" v-model="btnClassObject.error"> error
    <input type="checkbox" v-model="btnClassObject.flat"> flat
    <br>
    <br>
    <button :class="btnClassObject">我是一個普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" v-model="block"> 塊
    <br>
    <br>
    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style>

綁定數(shù)組

// 組合式
<script setup>

import { ref, reactive } from 'vue'

let btnTheme = ref([]) // 按鈕class數(shù)組

let capsule = ref(false)// 膠囊
let widthTheme = ref([])// 寬度數(shù)組

</script>

<template>

    <input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    <!-- 直接使用數(shù)組數(shù)據(jù)源，數(shù)組中有哪些值，直接在該元素的class里出現(xiàn)對應(yīng)的類名 -->
    <button :class="btnTheme">我是一個普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 塊
    <br>
    <br>
    <!-- 數(shù)組和對象一起使用 -->
    <button :class="[{ 'rounded': capsule }, widthTheme]">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style>

style屬性綁定

綁定對象

// 組合式
<script setup>

import { reactive, ref } from 'vue'

let btnTheme = reactive({
    backgroundColor: '#FF0000', // 背景色
    color: '#000000' // 文本色
})

let backColor = ref('#0000FF')  // 背景色
let color = ref('#FFFFFF')  // 文本色
let borRadius = ref(20) // 邊框圓角

</script>

<template>

    背景色：<input type="color" v-model="btnTheme.backgroundColor">
    文本色：<input type="color" v-model="btnTheme.color">
    <br>
    <br>
    <!-- style：可以直接綁定對象數(shù)據(jù)源，但是對象數(shù)據(jù)源的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="btnTheme">我是一個普通的按鈕</button>

    <hr>

    背景色：<input type="color" v-model="backColor">
    文本色：<input type="color" v-model="color">
    邊框圓角：<input type="range" min="0" max="20" v-model="borRadius">
    <br>
    <br>
    <!-- style：可以直接寫對象，但是對象的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="{
        backgroundColor: backColor,
        color,
        'border-radius': borRadius + 'px'
    }">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}
</style>

綁定數(shù)組

還可以給 :style 綁定一個包含多個樣式對象的數(shù)組，這些對象會被合并后渲染到同一元素上

// 組合式
<!-- 腳本區(qū)域 -->
<script setup>
import { ref, reactive } from 'vue'

const btnTheme = ref([
    {
        backgroundColor: '#FF0000', // 背景色
        color: '#FFFFFF' // 文本色
    },
    {
        borderRadius: 0 // 邊框圓角
    }
])

const colorTheme = reactive({
    backgroundColor: '#000000', // 背景色
    color: '#FFFFFF' // 文本色
})

const radiusTheme = reactive({
    borderRadius: 0 // 邊框圓角
})
</script>

<!-- 視圖區(qū)域 -->
<template>

    背景色：<input type="color" v-model="btnTheme[0].backgroundColor">
    文本色：<input type="color" v-model="btnTheme[0].color">
    膠囊：<input type="checkbox" true-value="5px" false-value="0" v-model="btnTheme[1].borderRadius">
    <br>
    <br>
    <!-- 直接傳入數(shù)組 -->
    <button :style="btnTheme">我是一個普通按鈕</button>

    <hr>

    背景色：<input type="color" v-model="colorTheme.backgroundColor">
    文本色：<input type="color" v-model="colorTheme.color">
    膠囊：<input type="checkbox" true-value="5px" false-value="0" v-model="radiusTheme.borderRadius">
    <br>
    <br>
    <!-- 直接寫數(shù)組 -->
    <button :style="[colorTheme, radiusTheme]">我是一個普通按鈕</button>
</template>

<style>
button {
    padding: 15px 20px;
    border: none;
}
</style>

五、條件渲染指令

1. v-if、v-else-if、v-else

v-if 指令用于條件性地渲染元素；該內(nèi)容只會在指令的表達(dá)式返回真值時才被渲染
v-else-if 提供的是相應(yīng)于 v-if 的 else if 區(qū)塊，它可以連續(xù)多次重復(fù)使用
你也可以使用 v-else 為 v-if 添加一個 else 區(qū)塊
v-else 和 v-else-if 指令必須配合
v-if 指令一起使用，否則它將不會被識別，而且語句塊中間不能出現(xiàn)無關(guān)其他元素v-if 支持在 <template> 元素上使用，這只是一個不可見的包裝器元素，最后渲染的結(jié)果并不會包含這個 <template> 元素

// 組合式
<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // 是否顯示
let age = ref(20)  // 年齡
let week = ref(3)  // 周幾

</script>


<template>

    是否顯示：<input type="checkbox" v-model="isShow">
    <!-- 
        v-if：指令表達(dá)式為真時才會渲染該元素 
        為true時會創(chuàng)建該元素，為false時會銷毀該元素
    -->
    <h3 v-if="isShow">這是一個普通的標(biāo)題標(biāo)簽</h3>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if：可以配合 v-else-if 和 v-else 來搭建多重判斷條件，他們中間不要參雜無關(guān)緊要的元素 
    -->
    <h1 v-if="age < 18">未成年</h1>
    <!-- <span>無關(guān)緊要的元素</span> -->
    <h2 v-else-if="age < 35">青年</h2>
    <h3 v-else-if="age < 50">中年</h3>
    <h4 v-else>老年</h4>

    <hr>

    周幾: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-if：可以配合 template 元素使用，最后渲染的結(jié)果并不會包含這個 <template>元素 -->
    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h1>可以游泳</h1>
    </template>
    <template v-else>
        <h1>不可以游泳</h1>
    </template>

</template>

2. v-show

v-show 按條件顯示一個元素的指令v-show 會在 DOM 渲染中保留該元素
v-show 僅切換了該元素上名為 display 的 CSS 屬性
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

// 組合式
<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // 是否顯示
let age = ref(20)  // 年齡
let week = ref(3)  // 周幾

</script>


<template>

    是否顯示：<input type="checkbox" v-model="isShow">
    <!-- 
        v-show：指令表達(dá)式為真時才會渲染該元素 
        無論該指令的表達(dá)式是否 true 或 false，該元素在元素中是保留該元素的
        為 true 時會刪除該元素的 display:none 樣式，為 false 時會給該元素添加 display:none 樣式
    -->
    <h3 v-show="isShow">這是一個普通的標(biāo)題標(biāo)簽</h3>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}

    <h1 v-show="age < 18">未成年</h1>
    <h2 v-show="age >= 18 && age < 35">青年</h2>
    <h3 v-show="age >= 35 && age < 50">中年</h3>
    <h4 v-show="age >= 50">老年</h4>

    <hr>

    周幾: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-show：不可以配合 template 元素使用 -->
    <!-- <template v-show="week == 1 || week == 3 || week == 5 || week == 7">
        <h1>可以游泳</h1>
    </template>
    <template v-shw="week == 12 || week == 4 || week == 6">
        <h1>不可以游泳</h1>
    </template> -->

</template>

3. v-if和v-show的區(qū)別

v-if 是“真實(shí)的”按條件渲染，因?yàn)樗_保了在切換時，條件區(qū)塊內(nèi)的事件監(jiān)聽器和子組件都會被銷毀與重建
v-if 也是惰性的：如果在初次渲染時條件值為 false，則不會做任何事；條件區(qū)塊只有當(dāng)條件首次變?yōu)?true 時才被渲染
v-show 元素?zé)o論初始條件如何，始終會被渲染，只有 CSS display 屬性會被切換
v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷；如果需要頻繁切換，則使用 v-show 較好；如果在運(yùn)行時綁定條件很少改變，則 v-if 會更合適

六、事件綁定指令

我們可以使用 v-on: 指令 (簡寫為@) 來監(jiān)聽 DOM 事件，并在事件觸發(fā)時執(zhí)行對應(yīng)的 JavaScript
用法：v-on:click="" 或 @click=""

用法：

// 組合式
<script>
export default {
    data: () => ({
        volume: 5  // 音量[0, 10]
    }),
    methods: {
        // 添大音量
        addVolume() {
            // 如果音量沒有在最高值，則添加音量
            if (this.volume !== 10) {
                this.volume++
            }
        },
        // 減小音量
        subVolume() {
            // 如果音量沒有在最小值，則減小音量
            if (this.volume !== 0) {
                this.volume--
            }
        },
        // 設(shè)置音量
        setVolume(value) {
            // 判斷音量是否在取值范圍之間
            if (value >= 0 && value <= 10) {
                this.volume = value
            }

        }
    }
}
</script>
<template>

    <h3>當(dāng)前音量：{{ volume }}</h3>

    <!-- v-on: 事件綁定 -->
    <button v-on:click="addVolume">添加音量</button>
    <button v-on:click="subVolume">減小音量</button>

    <hr>

    <!-- @ 是 v-on: 的縮寫 -->
    <button @click="setVolume(0)">靜音</button>
    <button @click="setVolume(5)">音量適中</button>
    <button @click="setVolume(10)">音量最大</button>

</template>

1. 事件修飾符

事件修飾符	說明
`.prevent`	阻止默認(rèn)行為
`.stop`	阻止事件冒泡
`.capture`	以捕獲模式觸發(fā)當(dāng)前的事件處理函數(shù)
`.once`	綁定的事件只觸發(fā)1次
`.self`	只有在event.target是當(dāng)前元素自身時觸發(fā)事件處理函數(shù)
`.passive`	向?yàn)g覽器表明了不想阻止事件的默認(rèn)行為

.prevent

.prevent ：阻止該事件的默認(rèn)行為

// 組合式
<script setup>

// 打招呼
function say(name) {
    window.alert('你好：' + name)
}

</script>


<template>

    <!-- .prevent 修飾符阻止了超鏈接的默認(rèn)行為（跳轉(zhuǎn)到百度頁） -->
    <a  rel="external nofollow"  rel="external nofollow"  @click.prevent="say('baiDu')">百度</a>

</template>

.stop

.stop ：阻止事件產(chǎn)生的冒泡現(xiàn)象

// 組合式
<script setup>
// 打招呼
function say(name) {
    console.log('你好：' + name)
}
</script>

<template>
    <div class="divArea" @click="say('DIV')">
        <!-- .stop：阻止產(chǎn)生冒泡事件 -->
        <button @click.stop="say('BUTTON')">冒泡按鈕</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.once

.once ：綁定的事件只觸發(fā) 1 次

// 組合式
<script setup>
// 打招呼
function say(name) {
    window.alert('你好：' + name)
}
</script>

<template>
    <!-- .once：綁定的事件只觸發(fā)一次 -->
    <button @click.once="say('BUTTON')">點(diǎn)我試一下</button>
</template>

.self

.self ：只有在 event.target 是當(dāng)前元素自身時觸發(fā)事件處理函數(shù)

// 組合式
<script setup>
// 打招呼
function say(name) {
    window.alert('你好：' + name)
}
</script>

<template>
    <!-- .self：只在該元素上觸發(fā)事件有效，其子元素?zé)o效 -->
    <div class="divArea" @click.self="say('DIV')">
        <button>我是一普通的按鈕</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.capture

.capture 給元素添加一個監(jiān)聽器

當(dāng)元素事件產(chǎn)生冒泡時，先觸發(fā)的是該修飾符的元素的事件
如果有多個該修飾符，則由外向內(nèi)依次觸發(fā)

// 組合式
<script setup>
// 打招呼
function say(name) {
    console.log('你好：' + name)
}
</script>

<template>
    <!-- 
        .capture 給元素添加一個監(jiān)聽器
        1：當(dāng)元素事件產(chǎn)生冒泡時，先觸發(fā)的是該修飾符的元素的事件
        2：如果有多個該修飾符，則由外向內(nèi)依次觸發(fā)
     -->
    <div class="divArea" @click.capture="say('DIV-1')">
        <div class="divArea" @click="say('DIV-2')">
            <div class="divArea" @click.capture="say('DIV-3')">
                <button>我是一普通的按鈕</button>
            </div>
        </div>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.passive

.passive ：不阻止事件的默認(rèn)行為，與 .prevent 不要同時使用

// 組合式
<script setup>
function eventPrevent() {
    // 阻止事件默認(rèn)行為
    event.preventDefault()
}
</script>

<template>
    <!-- .passive：先執(zhí)行默認(rèn)行為，不考慮執(zhí)行的代碼中是否包含 event.preventDefault() -->
    <a  rel="external nofollow"  rel="external nofollow"  @click.passive="eventPrevent">百度</a>
</template>

2. 按鍵修飾符

按鍵別名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕獲 Delete 和 Backspace 兩個按鍵)
系統(tǒng)修飾符：.ctrl、.alt、.shift、.meta
準(zhǔn)確的修飾符：.exact

// 組合式
<script setup>
// 彈出消息
function showMessage(message) {
    window.alert(message)
}
</script>

<template>
    按下的鍵中包含 Enter 鍵事件： <input type="text" @keydown.enter="showMessage('你按下了 Enter 鍵')">
    <hr>
    按下的鍵中包含 Shift Enter 鍵事件：<input type="text" @keydown.enter.shift="showMessage('你按下了 Shift + Enter 鍵')"/>
    <hr>
    按下的鍵只有 Shift Enter 鍵事件：<input type="text" @keydown.enter.shift.exact="showMessage('你只按下了 Shift + Enter 鍵')"/>
</template>

3. 鼠標(biāo)按鍵修飾符

鼠標(biāo)按鍵修飾符：.left、.right、.middle

// 組合式
<!-- 腳本區(qū)域 -->
<script setup>
    function showTest(text) {
        window.alert(text)
    }
</script>

<!-- 視圖區(qū)域 -->
<template>
    <!-- 鼠標(biāo)右鍵按下 -->
    <button @mousedown.right="showTest('按下的是鼠標(biāo)右鍵')">鼠標(biāo)右鍵按下</button>

    <hr>
    <!-- 點(diǎn)擊時，采用的是鼠標(biāo)中鍵 -->
    <button @click.middle="showTest('按下的是鼠標(biāo)中鍵')">點(diǎn)擊時，采用的是鼠標(biāo)中鍵</button>

    <hr>
    <!-- 鼠標(biāo)左鍵按下 -->
    <button @mousedown.left="showTest('按下的是鼠標(biāo)左鍵')">鼠標(biāo)左鍵按下</button>
</template>

<!-- 樣式區(qū)域 -->
<style>
    button {
        border: none;
        padding: 15px 20px;
    }

    button:active {
        box-shadow: 0 0 5px grey;
    }
</style>

七、列表渲染指令

使用 v-for 指令基于一個數(shù)組來渲染一個列表

1. v-for渲染數(shù)組

語法：

in 前一個參數(shù)：item in items
item ：值
items ：需要循環(huán)的數(shù)組in 前兩個參數(shù)：(value, index) in items
value ：值
index ：索引
items ：需要循環(huán)的數(shù)組

// 組合式
<script setup>
import { ref } from 'vue'
// 課程
let subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'UI設(shè)計' },
    { id: 4, name: 'Hadoop' },
    { id: 5, name: '影視后期' },
])
</script>

<template>
    <!-- 
        item in itmes
        item：值，當(dāng)前循環(huán)的數(shù)組值
        itmes：循環(huán)的數(shù)組
     -->
    <h6>v-for 渲染數(shù)組， v-for="item in itmes"</h6>
    <ul>
        <li v-for="sub in subject">
            編號：{{ sub.id }} --- 名稱：{{ sub.name }}
        </li>
    </ul>

    <hr>

    <!-- 解構(gòu)對象 -->
    <h6>v-for 渲染數(shù)組， v-for="{ 解構(gòu)…… } in itmes"</h6>
    <ul>
        <li v-for="{ id , name } in subject">
            編號：{{ id }} --- 名稱：{{ name }}
        </li>
    </ul>

    <hr>
    <!-- 
        (value, index) in itmes
        value：值
        index：索引
        itmes：循環(huán)的數(shù)組
     -->
    <h6>v-for 渲染數(shù)組， v-for="(value, index) in itmes"</h6>
    <ul>
        <li v-for="(sub, index) in subject">
            編號：{{ sub.id }} --- 名稱：{{ sub.name }} --- 索引：{{ index }}
        </li>
    </ul>

    <hr>

    <!-- 解構(gòu)對象 -->
    <h6>v-for 渲染數(shù)組， v-for="({ 解構(gòu)…… }, index) in itmes"</h6>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            編號：{{ id }} --- 名稱：{{ name }} --- 索引：{{ index }}
        </li>
    </ul>
</template>

2. v-for渲染對象

使用 v-for 來遍歷一個對象的所有屬性，遍歷的順序會基于對該對象調(diào)用 Object.keys() 的返回值來決定
語法：

in 前一個參數(shù)：value in object
value ：屬性值
items ：需要循環(huán)的對象in 前兩個參數(shù)：(value, name) in object
value ：屬性值
name ：鍵
items ：需要循環(huán)的對象in 前三個參數(shù)：(value, name, index) in object
value ：屬性值
name ：鍵
index ：索引
items ：需要循環(huán)的對象

// 組合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
    styNum: '007', // 學(xué)號
    name: 'Jack', // 名字
    age: 18 //年齡
})
</script>

<template>
    <!-- 
        value in object
        value：屬性值
        object：循環(huán)的對象
     -->
    <h6>v-for 渲染對象， v-for="value in object"</h6>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name) in object
        value：屬性值
        name：屬性名
        object：循環(huán)的對象
     -->
    <h6>v-for 渲染對象， v-for="(value, name) in object"</h6>
    <ul>
        <li v-for="(value, name) in student">
            屬性名：{{ name }} --- 屬性值： {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name, index) in object
        value：屬性值
        name：屬性名
        index: 索引
        object：循環(huán)的對象
     -->
    <h6>v-for 渲染對象， v-for="(value, name, index) in object"</h6>
    <ul>
        <li v-for="(value, name, index) in student">
            屬性名：{{ name }} --- 屬性值： {{ value }} --- 索引：{{ index }}
        </li>
    </ul>
</template>

3. 通過 key 管理狀態(tài)

當(dāng)列表的數(shù)據(jù)變化時，默認(rèn)情況下，vue 會盡可能的復(fù)用已存在的 DOM 元素，從而提升渲染的性能；但這種默認(rèn)的性能優(yōu)化策略，會導(dǎo)致有狀態(tài)的列表無法被正確更新。
為了給 vue 一個提示，以便它能跟蹤每個節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能；此時，需要為每項(xiàng)提供一個唯一的key屬性：
key 的注意事項(xiàng)：

key 的類型只能是 Number/String
key 值必須具有唯一性
建議循環(huán)的列表有一個屬性當(dāng) key（該屬性的值在此列表中唯一）
不使用索引當(dāng) key
建議使用 v-for 指令時一定要指定 key 的值

// 組合式
<script setup>
import { ref } from 'vue'
// 課程
let subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'Hadoop' }
])

// 添加課程
function addSubject() {
    // （數(shù)組最前面）添加
    subject.value.unshift({ id: 4, name: 'Python' })
}
</script>

<template>

    <button @click.once="addSubject">添加課程（數(shù)組最前面）</button>

    <h3>不使用key值</h3>
    <ul>
        <li v-for="sub in subject">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>使用索引當(dāng)key值</h3>
    
    <ul>
        <li v-for="(sub, index) in subject" :key="index">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>使用列表屬性當(dāng)key值（該屬性必須再此列表中唯一）</h3>
    
    <ul>
        <li v-for="sub in subject" :key="sub.id">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template>

參考文獻(xiàn)：

歡迎大家加入我的社區(qū)，在社區(qū)中會不定時發(fā)布一些精選內(nèi)容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 Vue3 中的模板語法，不懂得也可以在評論區(qū)里問我或私聊我詢問，以后會持續(xù)發(fā)布一些新的功能，敬請關(guān)注。

到此這篇關(guān)于Vue3 中的模板語法的文章就介紹到這了,更多相關(guān)vue3模板語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3?中的模板語法小結(jié)

目錄

前言

一、什么是模板語法？

二、內(nèi)容渲染指令

1. v-text

2. {{ }} 插值表達(dá)式

3. v-html

三、雙向綁定指令

1. v-model

2. v-model的修飾符

四、屬性綁定指令

1. 動態(tài)綁定多個屬性值

2. 綁定class和style屬性

五、條件渲染指令

1. v-if、v-else-if、v-else

2. v-show

3. v-if和v-show的區(qū)別

六、事件綁定指令

1. 事件修飾符

.prevent

.stop

.once

.self

.capture

.passive

2. 按鍵修飾符

3. 鼠標(biāo)按鍵修飾符

七、列表渲染指令

1. v-for渲染數(shù)組

2. v-for渲染對象

3. 通過 key 管理狀態(tài)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3?中的模板語法小結(jié)

目錄

前言

一、什么是模板語法？

二、內(nèi)容渲染指令

1. v-text

2. {{ }} 插值表達(dá)式

3. v-html

三、雙向綁定指令

1. v-model

2. v-model的修飾符

四、屬性綁定指令

1. 動態(tài)綁定多個屬性值

2. 綁定class和style屬性

五、條件渲染指令

1. v-if、v-else-if、v-else

2. v-show

3. v-if和v-show的區(qū)別

六、事件綁定指令

1. 事件修飾符

.prevent

.stop

.once

.self

.capture

.passive

2. 按鍵修飾符

3. 鼠標(biāo)按鍵修飾符

七、列表渲染指令

1. v-for渲染數(shù)組

2. v-for渲染對象

3. 通過 key 管理狀態(tài)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、什么是模板語法？

二、內(nèi)容渲染指令

四、屬性綁定指令

五、條件渲染指令

1. v-if、v-else-if、v-else

六、事件綁定指令

七、列表渲染指令