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

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

 更新時(shí)間：2023年03月06日 08:49:01   作者：清風(fēng)?與我  
Vue 使用一種基于 HTML 的模板語(yǔ)法，使我們能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上，這篇文章主要介紹了Vue3?中的模板語(yǔ)法,需要的朋友可以參考下

前言

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

一、什么是模板語(yǔ)法？

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

Vue 使用一種基于 HTML 的模板語(yǔ)法，使我們能夠聲明式地將其組件實(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>我是來自中國(guó)的小朋友！</h3>'
    })
    
</script>

<template>

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

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

  <!-- 下面的代碼會(huì)報(bào)錯(cuò)：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>我是來自中國(guó)的小朋友！</h3>'
})

</script>

<template>

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

</template>

3. v-html

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

// 組合式
<script setup>

import { reactive } from 'vue'

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


</script>

<template>

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

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

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

    <!-- 下面的代碼會(huì)報(bào)錯(cuò)：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> 元素會(huì)綁定 value 屬性并偵聽 input 事件
  • <input type="checkbox"> 和 <input type="radio"> 會(huì)綁定 checked 屬性并偵聽 change 事件
  • <select>會(huì)綁定 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') //  // 證書等級(jí)（單選下拉框）
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>
    證書等級(jí)：
    <select v-model="level">
        <option value="C">初級(jí)</option>
        <option value="B">中級(jí)</option>
        <option value="A">高級(jí)</option>
    </select>

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

</template>

2. v-model的修飾符

修飾符作用示例
.number自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型<input v-model.number="age" />
.trim自動(dòng)過濾用戶輸入的首尾空白字符<input v-model.trim="msg" />
.lazy在 chang 時(shí)而非 input 時(shí)更新<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)容無(wú)法轉(zhuǎn)成數(shù)字，將不會(huì)更新數(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)式地綁定一個(gè)元素屬性，應(yīng)該使用 v-bind: 指令
  • 如果綁定的值是 null 或者 undefined，那么該屬性將會(huì)從渲染的元素上移除
  • 因?yàn)?v-bind 非常常用，我們提供了特定的簡(jiǎn)寫語(yǔ)法:
// 組合式
<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，那么該屬性將會(huì)從渲染的元素上移除 -->
    <button @click="picture.width = null">設(shè)置寬度為NULL</button>

</template>

1. 動(dòng)態(tài)綁定多個(gè)屬性值

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

// 組合式
<script setup>

import {reactive} from 'vue'

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

</script>

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

2. 綁定class和style屬性

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

class屬性綁定

綁定對(duì)象

// 組合式
<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">我是一個(gè)普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" v-model="block"> 塊
    <br>
    <br>
    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一個(gè)普通的按鈕</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)對(duì)應(yīng)的類名 -->
    <button :class="btnTheme">我是一個(gè)普通的按鈕</button>


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

綁定對(duì)象

// 組合式
<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：可以直接綁定對(duì)象數(shù)據(jù)源，但是對(duì)象數(shù)據(jù)源的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="btnTheme">我是一個(gè)普通的按鈕</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：可以直接寫對(duì)象，但是對(duì)象的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="{
        backgroundColor: backColor,
        color,
        'border-radius': borRadius + 'px'
    }">我是一個(gè)普通的按鈕</button>

</template>

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

綁定數(shù)組

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

// 組合式
<!-- 腳本區(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">我是一個(gè)普通按鈕</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]">我是一個(gè)普通按鈕</button>
</template>

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

五、條件渲染指令

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

  • v-if 指令用于條件性地渲染元素；該內(nèi)容只會(huì)在指令的表達(dá)式返回真值時(shí)才被渲染
  • v-else-if 提供的是相應(yīng)于 v-if 的 else if 區(qū)塊，它可以連續(xù)多次重復(fù)使用
  • 你也可以使用 v-else 為 v-if 添加一個(gè) else 區(qū)塊
  • v-else 和 v-else-if 指令必須配合
  • v-if 指令一起使用 ，否則它將不會(huì)被識(shí)別，而且語(yǔ)句塊中間不能出現(xiàn)無(wú)關(guān)其他元素v-if 支持在 <template> 元素上使用，這只是一個(gè)不可見的包裝器元素，最后渲染的結(jié)果并不會(huì)包含這個(gè) <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á)式為真時(shí)才會(huì)渲染該元素 
        為true時(shí)會(huì)創(chuàng)建該元素，為false時(shí)會(huì)銷毀該元素
    -->
    <h3 v-if="isShow">這是一個(gè)普通的標(biāo)題標(biāo)簽</h3>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if：可以配合 v-else-if 和 v-else 來搭建多重判斷條件，他們中間不要參雜無(wú)關(guān)緊要的元素 
    -->
    <h1 v-if="age < 18">未成年</h1>
    <!-- <span>無(wú)關(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é)果并不會(huì)包含這個(gè) <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 按條件顯示一個(gè)元素的指令v-show 會(huì)在 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á)式為真時(shí)才會(huì)渲染該元素 
        無(wú)論該指令的表達(dá)式是否 true 或 false，該元素在元素中是保留該元素的
        為 true 時(shí)會(huì)刪除該元素的 display:none 樣式，為 false 時(shí)會(huì)給該元素添加 display:none 樣式
    -->
    <h3 v-show="isShow">這是一個(gè)普通的標(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)樗_保了在切換時(shí)，條件區(qū)塊內(nèi)的事件監(jiān)聽器和子組件都會(huì)被銷毀與重建
  • v-if 也是惰性的：如果在初次渲染時(shí)條件值為 false，則不會(huì)做任何事；條件區(qū)塊只有當(dāng)條件首次變?yōu)?true 時(shí)才被渲染
  • v-show 元素?zé)o論初始條件如何，始終會(huì)被渲染，只有 CSS display 屬性會(huì)被切換
  • v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷；如果需要頻繁切換，則使用 v-show 較好；如果在運(yùn)行時(shí)綁定條件很少改變，則 v-if 會(huì)更合適


六、事件綁定指令


我們可以使用 v-on: 指令 (簡(jiǎn)寫為@) 來監(jiān)聽 DOM 事件，并在事件觸發(fā)時(shí)執(zhí)行對(duì)應(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)前元素自身時(shí)觸發(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)到百度頁(yè)） -->
    <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)前元素自身時(shí)觸發(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 給元素添加一個(gè)監(jiān)聽器


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


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

<template>
    <!-- 
        .capture 給元素添加一個(gè)監(jiān)聽器
        1：當(dāng)元素事件產(chǎn)生冒泡時(shí)，先觸發(fā)的是該修飾符的元素的事件
        2：如果有多個(gè)該修飾符，則由外向內(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 不要同時(shí)使用


// 組合式
<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 兩個(gè)按鍵)
系統(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)擊時(shí)，采用的是鼠標(biāo)中鍵 -->
    <button @click.middle="showTest('按下的是鼠標(biāo)中鍵')">點(diǎn)擊時(shí)，采用的是鼠標(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 指令基于一個(gè)數(shù)組來渲染一個(gè)列表


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


語(yǔ)法：


in 前一個(gè)參數(shù)：item in items
item ：值
items ：需要循環(huán)的數(shù)組in 前兩個(gè)參數(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è)計(jì)' },
    { 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">
            編號(hào)：{{ sub.id }} --- 名稱：{{ sub.name }}
        </li>
    </ul>

    <hr>

    <!-- 解構(gòu)對(duì)象 -->
    <h6>v-for 渲染數(shù)組， v-for="{ 解構(gòu)…… } in itmes"</h6>
    <ul>
        <li v-for="{ id , name } in subject">
            編號(hào)：{{ 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">
            編號(hào)：{{ sub.id }} --- 名稱：{{ sub.name }} --- 索引：{{ index }}
        </li>
    </ul>

    <hr>

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



2. v-for渲染對(duì)象


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


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


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

<template>
    <!-- 
        value in object
        value：屬性值
        object：循環(huán)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， 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)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， 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)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， 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ù)變化時(shí)，默認(rèn)情況下，vue 會(huì)盡可能的復(fù)用已存在的 DOM 元素，從而提升渲染的性能；但這種默認(rèn)的性能優(yōu)化策略，會(huì)導(dǎo)致有狀態(tài)的列表無(wú)法被正確更新。
為了給 vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能；此時(shí)，需要為每項(xiàng)提供一個(gè)唯一的key屬性：
key 的注意事項(xiàng)：


  • key 的類型只能是 Number/String
  • key 值必須具有唯一性
  • 建議循環(huán)的列表有一個(gè)屬性當(dāng) key（該屬性的值在此列表中唯一）
  • 不使用索引當(dāng) key
  • 建議使用 v-for 指令時(shí)一定要指定 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ū)中會(huì)不定時(shí)發(fā)布一些精選內(nèi)容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003


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


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

                            
                            

                        

                        
                        

                            
                        

                        
                        

                            
                        

                        

                        

                            
相關(guān)文章

                            
                        

                        

                            
                        

                        
                        

                            
最新評(píng)論