>웹 프론트엔드 >View.js >Vue3의 템플릿 구문을 사용하는 방법은 무엇입니까?

Vue3의 템플릿 구문을 사용하는 방법은 무엇입니까?

WBOY
WBOY앞으로
2023-05-10 09:34:161252검색

1. 템플릿 구문이란 무엇인가요?

우리는 HTML 구문의 확장으로 Vue.js의 템플릿 구문을 직접 이해할 수 있습니다. 모든 템플릿 노드 선언, 속성 설정 및 이벤트 등록은 다음과 같이 설계되었습니다. HTML 구문에 따라 확장됩니다. 공식 성명에 따르면 "모든 Vue 템플릿은 구문적으로 합법적인 HTML이며 사양을 준수하는 브라우저 및 HTML 파서에서 사용할 수 있습니다. 분석".

Vue.js 的模板语法,直接理解为 HTML 语法的一种扩展,它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析”。

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上

二、内容渲染指令

1. v-text

使用 v-tex t指令,将数据采用纯文本方式填充其空元素中

// 组合式
<script setup>

    import { reactive } from &#39;vue&#39;

    let student = reactive({
        name: &#39;Jack&#39;,
        desc: &#39;<h4>我是来自中国的小朋友!</h4>&#39;
    })
    
</script>

<template>

  <!-- 使用v-text指令,将数据采用纯文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text:以纯文本的方式显示数据 -->
  <div v-text="student.desc"></div>

  <!-- 下面的代码会报错:div 元素不是空元素 -->
  <!-- <div v-text="student.name">这是原始的div数据</div> -->
   
</template>

2. {{ }} 插值表达式

在元素中的某一位置采用纯文本的方式渲染数据

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友!</h4>&#39;
})

</script>

<template>

    <!-- 插值表达式:在元素中的某一位置采用纯文本的方式渲染数据 -->
    <div>这是一个 DIV 元素,{{ student.name }},{{ student.desc }}</div>

</template>

3. v-html

使用 v-html 指令,将数据采用 HTML 语法填充其空元素中

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友!</h4>&#39;
})


</script>

<template>

    <!-- 使用v-html指令,将数据采用HTML语法填充其空元素中 -->

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

    <!-- v-html:以 HTML 语法显示数据 -->
    <div v-html="student.desc"></div>

    <!-- 下面的代码会报错:div 元素不是空元素 -->
    <!-- <div v-html="student.name">这是原始的div数据</div> -->

</template>

三、双向绑定指令

1. v-model

v-model 双向数据绑定指令,视图数据和数据源同步<br>一般情况下 v-model 指令用在表单元素中:

  • 文本类型的 d5fd7aea971a85678ba271703566ebfd 和 4750256ae76b6b9d804861d8f69e79d3 元素会绑定 value 属性并侦听 input 事件

  • 514d05be645eb7d51e331036aaf6fa36 和 5531b4c9ceb3f990b641fa70a3e40caa 会绑定 checked 属性并侦听 change 事件

  • 221f08282418e2996498697df914ce4e会绑定 value 属性并侦听 change 事件

// 组合式
<script setup>

import { ref } from &#39;vue&#39; 

let inputText = ref(&#39;ABC&#39;)  // 单行文本框
let message = ref(&#39;本次更新有以下几点:……&#39;) // 多行文本框
let open = ref(true) // 开灯(复选框)
let determine = ref(&#39;不确定&#39;) // 是否确定(复选框)
let likes = ref([&#39;YMQ&#39;]) // 兴趣爱好(复选框)
let sex = ref(&#39;woman&#39;) // 性别(单选按钮)
let level = ref(&#39;B&#39;) //  // 证书等级(单选下拉框)
let city = ref([&#39;苏C&#39;, &#39;苏B&#39;]) // 去过的城市(多选下拉框)

</script>

<template>

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

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

    <hr>
    <!-- 默认情况下,复选框的值:true/false -->
    <input type="checkbox" v-model="open"> 灯

    <hr>
    <!-- 自定义复选框值: 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的修饰符

2 콘텐츠 렌더링 명령

1. v-text

v-tex t 명령을 사용하여 빈 요소를 일반 텍스트의 데이터로 채웁니다.
// 组合式
<script setup>

import { ref } from &#39;vue&#39; 

let age = ref(20)
let nickname = ref(&#39;&#39;)

</script>

<template>
    
    <p>将用户输入的值转成数值 .number,懒更新 .lazy</p>
    <!-- 。number 将用户输入的值转成数值,如果用户输入的内容无法转成数字,将不会更新数据源 -->
    <!-- .lazy 在 change 跟新数据源,而不是 input  -->
    <input type="text" v-model.lazy.number="age">

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

</template>

2 {{ }} 보간 표현식

修饰符 作用 示例
.number 自动将用户的输入值转为数值类型 60d0cae1e6da586a184541b88925d9b9
.trim 自动过滤用户输入的首尾空白字符 810f27537cafb7299c7213b53eb37225
.lazy chang 时而非 input 时更新 5855cc01fbe082a8ddd4c0d3338421f7Vue는 구성 요소 인스턴스의 데이터를 렌더링된 DOM에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다.
요소의 특정 위치에서 데이터를 일반 텍스트로 렌더링합니다.
// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let picture = reactive({
    src: &#39;https://cache.yisu.com/upload/information/20230306/112/35391.jpg&#39;, // 图像地址
    width: 200 // 显示宽度
})

</script>

<template>

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

    <hr>
    <!-- v-bind: 为 src 属性绑定指定的数据源 -->
    <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">设置宽度为NULL</button>

</template>

3. v-html

🎜v-html 명령을 사용하여 HTML 구문
// 组合式
<script setup>

import {reactive} from &#39;vue&#39;

let attrs = reactive({
    class: &#39;error&#39;,
    id: &#39;borderBlue&#39;
})

</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>
🎜3을 사용하는 데이터가 있는 빈 요소. 양방향 바인딩 지침🎜

1. v-model

🎜 v-model 양방향 데이터 바인딩 명령, 뷰 데이터와 데이터 소스의 동기화<br>일반적으로 v-model 명령은 양식 요소에 사용됩니다.
  • 🎜텍스트 유형의 d5fd7aea971a85678ba271703566ebfd 및 4750256ae76b6b9d804861d8f69e79d3 요소는 값 속성을 바인딩하고 입력 이벤트를 수신합니다.
  • 🎜42108f299897db7ea6b3451f3205a98d 및 d11dad02a1f3abd212da65221b2dc681는 확인된 속성을 바인딩하고 변경 이벤트를 수신합니다.
  • 🎜221f08282418e2996498697df914ce4e 변경 이벤트를 수신합니다
// 组合式
<script setup>

import { ref, reactive } from &#39;vue&#39;

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="{ &#39;rounded&#39;: capsule, &#39;fullWidth&#39;:  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>

2. v-model의 수정자

🎜
수정자 함수
.number🎜자동 변환 사용자의 입력 값을 숫자 유형🎜 af56722035af59fd461cdc6f7e4667a1🎜🎜
로 변환합니다. >🎜<td>사용자가 입력한 앞뒤 공백 문자를 자동으로 필터링합니다🎜</td> <td> <code>50548d2b5c87e461898528f37fc59e13🎜🎜
.lazy🎜 input🎜 4ff37eb13f62d2d8dc108945394796e1🎜🎜🎜🎜
// 组合式
<script setup>

import { ref } from &#39;vue&#39; 

let age = ref(20)
let nickname = ref(&#39;&#39;)

</script>

<template>
    
    <p>将用户输入的值转成数值 .number,懒更新 .lazy</p>
    <!-- 。number 将用户输入的值转成数值,如果用户输入的内容无法转成数字,将不会更新数据源 -->
    <!-- .lazy 在 change 跟新数据源,而不是 input  -->
    <input type="text" v-model.lazy.number="age">

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

</template>

四、属性绑定指令

  • 响应式地绑定一个元素属性,应该使用 v-bind: 指令

  • 如果绑定的值是 null 或者 undefined,那么该属性将会从渲染的元素上移除

  • 因为 v-bind 非常常用,我们提供了特定的简写语法:

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let picture = reactive({
    src: &#39;https://cache.yisu.com/upload/information/20230306/112/35391.jpg&#39;, // 图像地址
    width: 200 // 显示宽度
})

</script>

<template>

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

    <hr>
    <!-- v-bind: 为 src 属性绑定指定的数据源 -->
    <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">设置宽度为NULL</button>

</template>

1. 动态绑定多个属性值

直接使用 v-bind 来为元素绑定多个属性及其值

// 组合式
<script setup>

import {reactive} from &#39;vue&#39;

let attrs = reactive({
    class: &#39;error&#39;,
    id: &#39;borderBlue&#39;
})

</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>

渲染结果:<br>6c63a828682f31b17528342285133479我是一个普通按钮65281c5ac262bf6d81768915a4a77ac0

2. 绑定class和style属性

classstyle 可以和其他属性一样使用 v-bind 将它们和动态的字符串绑定;但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的;因此, Vue 专门为 classstylev-bind 用法提供了特殊的功能增强;除了字符串外,表达式的值也可以是对象或数组。

class属性绑定

绑定对象

// 组合式
<script setup>

import { ref, reactive } from &#39;vue&#39;

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="{ &#39;rounded&#39;: capsule, &#39;fullWidth&#39;:  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>

绑定数组

// 组合式
<script setup>

import { ref, reactive } from &#39;vue&#39;

let btnTheme = ref([]) // 按钮class数组

let capsule = ref(false)// 胶囊
let widthTheme = ref([])// 宽度数组

</script>

<template>

    <input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    <!-- 直接使用数组数据源,数组中有哪些值,直接在该元素的class里出现对应的类名 -->
    <button :class="btnTheme">我是一个普通的按钮</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 胶囊
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 块
    <br>
    <br>
    <!-- 数组和对象一起使用 -->
    <button :class="[{ &#39;rounded&#39;: 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 &#39;vue&#39;

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

let backColor = ref(&#39;#0000FF&#39;)  // 背景色
let color = ref(&#39;#FFFFFF&#39;)  // 文本色
let borRadius = ref(20) // 边框圆角

</script>

<template>

    背景色:<input type="color" v-model="btnTheme.backgroundColor">
    文本色:<input type="color" v-model="btnTheme.color">
    <br>
    <br>
    <!-- style:可以直接绑定对象数据源,但是对象数据源的属性名当样式属性(驼峰命名法,kebab-cased形式) -->
    <button :>我是一个普通的按钮</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:可以直接写对象,但是对象的属性名当样式属性(驼峰命名法,kebab-cased形式) -->
    <button :style="{
        backgroundColor: backColor,
        color,
        &#39;border-radius&#39;: borRadius + &#39;px&#39;
    }">我是一个普通的按钮</button>

</template>

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

绑定数组

还可以给 :style 绑定一个包含多个样式对象的数组,这些对象会被合并后渲染到同一元素上

// 组合式
<!-- 脚本区域 -->
<script setup>
import { ref, reactive } from &#39;vue&#39;

const btnTheme = ref([
    {
        backgroundColor: &#39;#FF0000&#39;, // 背景色
        color: &#39;#FFFFFF&#39; // 文本色
    },
    {
        borderRadius: 0 // 边框圆角
    }
])

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

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

<!-- 视图区域 -->
<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>
    <!-- 直接传入数组 -->
    <button :>我是一个普通按钮</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>
    <!-- 直接写数组 -->
    <button :>我是一个普通按钮</button>
</template>

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

五、条件渲染指令

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

  • v-if 指令用于条件性地渲染元素;该内容只会在指令的表达式返回真值时才被渲染

  • v-else-if 提供的是相应于 v-ifelse if 区块,它可以连续多次重复使用

  • 你也可以使用 v-elsev-if 添加一个 else 区块

  • v-elsev-else-if 指令必须配合

  • v-if 指令一起使用 ,否则它将不会被识别,而且语句块中间不能出现无关其他元素v-if 支持在 d477f9ce7bf77f53fbcf36bec1b69b7a 元素上使用,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 d477f9ce7bf77f53fbcf36bec1b69b7a 元素

// 组合式
<script setup>

import { ref } from &#39;vue&#39;

let isShow = ref(false)  // 是否显示
let age = ref(20)  // 年龄
let week = ref(3)  // 周几

</script>


<template>

    是否显示:<input type="checkbox" v-model="isShow">
    <!-- 
        v-if:指令表达式为真时才会渲染该元素 
        为true时会创建该元素,为false时会销毁该元素
    -->
    <h4 v-if="isShow">这是一个普通的标题标签</h4>

    <hr>

    年龄: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if:可以配合 v-else-if 和 v-else 来搭建多重判断条件,他们中间不要参杂无关紧要的元素 
    -->
    <h2 v-if="age < 18">未成年</h2>
    <!-- <span>无关紧要的元素</span> -->
    <h3 v-else-if="age < 35">青年</h3>
    <h4 v-else-if="age < 50">中年</h4>
    <h5 v-else>老年</h5>

    <hr>

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

    <!-- v-if:可以配合 template 元素使用,最后渲染的结果并不会包含这个 <template>元素 -->
    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h2>可以游泳</h2>
    </template>
    <template v-else>
        <h2>不可以游泳</h2>
    </template>

</template>

2. v-show

  • v-show 按条件显示一个元素的指令v-show 会在 DOM 渲染中保留该元素

  • v-show 仅切换了该元素上名为 displayCSS 属性

  • v-show 不支持在 d477f9ce7bf77f53fbcf36bec1b69b7a 元素上使用,也不能和 v-else 搭配使用

<br>
// 组合式
<script setup>

import { ref } from &#39;vue&#39;

let isShow = ref(false)  // 是否显示
let age = ref(20)  // 年龄
let week = ref(3)  // 周几

</script>


<template>

    是否显示:<input type="checkbox" v-model="isShow">
    <!-- 
        v-show:指令表达式为真时才会渲染该元素 
        无论该指令的表达式是否 true 或 false,该元素在元素中是保留该元素的
        为 true 时会删除该元素的 display:none 样式,为 false 时会给该元素添加 display:none 样式
    -->
    <h4 v-show="isShow">这是一个普通的标题标签</h4>

    <hr>

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

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

    <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">
        <h2>可以游泳</h2>
    </template>
    <template v-shw="week == 12 || week == 4 || week == 6">
        <h2>不可以游泳</h2>
    </template> -->

</template>

3. v-if和v-show的区别

  • v-if 是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建

  • v-if 也是惰性的:如果在初次渲染时条件值为 false,则不会做任何事;条件区块只有当条件首次变为 true 时才被渲染

  • v-show 元素无论初始条件如何,始终会被渲染,只有 CSS display 属性会被切换

  • v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销;如果需要频繁切换,则使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适

六、事件绑定指令

我们可以使用 v-on: 指令 (简写为@) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript<br>用法: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--
            }
        },
        // 设置音量
        setVolume(value) {
            // 判断音量是否在取值范围之间
            if (value >= 0 && value <= 10) {
                this.volume = value
            }

        }
    }
}
</script>
<template>

    <h4>当前音量:{{ volume }}</h4>

    <!-- 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 阻止默认行为
.stop 阻止事件冒泡
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发1次
.self 只有在event.target是当前元素自身时触发事件处理函数
.passive 向浏览器表明了不想阻止事件的默认行为

.prevent

.prevent :阻止该事件的默认行为

// 组合式
<script setup>

// 打招呼
function say(name) {
    window.alert(&#39;你好:&#39; + name)
}

</script>


<template>

    <!-- .prevent 修饰符阻止了超链接的默认行为(跳转到百度页) -->
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent="say(&#39;baiDu&#39;)">百度</a>

</template>

.stop

.stop :阻止事件产生的冒泡现象

// 组合式
<script setup>
// 打招呼
function say(name) {
    console.log(&#39;你好:&#39; + name)
}
</script>

<template>
    <div class="divArea" @click="say(&#39;DIV&#39;)">
        <!-- .stop:阻止产生冒泡事件 -->
        <button @click.stop="say(&#39;BUTTON&#39;)">冒泡按钮</button>
    </div>
</template>

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

.once

.once :绑定的事件只触发 1

// 组合式
<script setup>
// 打招呼
function say(name) {
    window.alert(&#39;你好:&#39; + name)
}
</script>

<template>
    <!-- .once:绑定的事件只触发一次 -->
    <button @click.once="say(&#39;BUTTON&#39;)">点我试一下</button>
</template>

.self

.self :只有在 event.target 是当前元素自身时触发事件处理函数

// 组合式
<script setup>
// 打招呼
function say(name) {
    window.alert(&#39;你好:&#39; + name)
}
</script>

<template>
    <!-- .self:只在该元素上触发事件有效,其子元素无效 -->
    <div class="divArea" @click.self="say(&#39;DIV&#39;)">
        <button>我是一普通的按钮</button>
    </div>
</template>

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

.capture

.capture 给元素添加一个监听器

  • 当元素事件产生冒泡时,先触发的是该修饰符的元素的事件

  • 如果有多个该修饰符,则由外向内依次触发

// 组合式
<script setup>
// 打招呼
function say(name) {
    console.log(&#39;你好:&#39; + name)
}
</script>

<template>
    <!-- 
        .capture 给元素添加一个监听器
        1:当元素事件产生冒泡时,先触发的是该修饰符的元素的事件
        2:如果有多个该修饰符,则由外向内依次触发
     -->
    <div class="divArea" @click.capture="say(&#39;DIV-1&#39;)">
        <div class="divArea" @click="say(&#39;DIV-2&#39;)">
            <div class="divArea" @click.capture="say(&#39;DIV-3&#39;)">
                <button>我是一普通的按钮</button>
            </div>
        </div>
    </div>
</template>

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

.passive

.passive :不阻止事件的默认行为,与 .prevent 不要同时使用

// 组合式
<script setup>
function eventPrevent() {
    // 阻止事件默认行为
    event.preventDefault()
}
</script>

<template>
    <!-- .passive:先执行默认行为,不考虑执行的代码中是否包含 event.preventDefault() -->
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.passive="eventPrevent">百度</a>
</template>

2. 按键修饰符

按键别名:.enter.tab.esc.space.up.down.left.right.delete (捕获 DeleteBackspace 两个按键)<br>系统修饰符:.ctrl.alt.shift.meta<br>准确的修饰符:.exact

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

<template>
    按下的键中包含 Enter 键事件: <input type="text" @keydown.enter="showMessage(&#39;你按下了 Enter 键&#39;)">
    <hr>
    按下的键中包含 Shift Enter 键事件:<input type="text" @keydown.enter.shift="showMessage(&#39;你按下了 Shift + Enter 键&#39;)"/>
    <hr>
    按下的键只有 Shift Enter 键事件:<input type="text" @keydown.enter.shift.exact="showMessage(&#39;你只按下了 Shift + Enter 键&#39;)"/>
</template>

3. 鼠标按键修饰符

鼠标按键修饰符:.left.right.middle

// 组合式
<!-- 脚本区域 -->
<script setup>
    function showTest(text) {
        window.alert(text)
    }
</script>

<!-- 视图区域 -->
<template>
    <!-- 鼠标右键按下 -->
    <button @mousedown.right="showTest(&#39;按下的是鼠标右键&#39;)">鼠标右键按下</button>

    <hr>
    <!-- 点击时,采用的是鼠标中键 -->
    <button @click.middle="showTest(&#39;按下的是鼠标中键&#39;)">点击时,采用的是鼠标中键</button>

    <hr>
    <!-- 鼠标左键按下 -->
    <button @mousedown.left="showTest(&#39;按下的是鼠标左键&#39;)">鼠标左键按下</button>
</template>

<!-- 样式区域 -->
<style>
    button {
        border: none;
        padding: 15px 20px;
    }

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

七、列表渲染指令

使用 v-for 指令基于一个数组来渲染一个列表

1. v-for渲染数组

语法:

in 前一个参数:item in items<br>item :值<br>items :需要循环的数组in 前两个参数:(value, index) in items<br>value :值<br>index :索引<br>items :需要循环的数组

// 组合式
<script setup>
import { ref } from &#39;vue&#39;
// 课程
let subject = ref([
    { id: 1, name: &#39;Vue&#39; },
    { id: 2, name: &#39;Java&#39; },
    { id: 3, name: &#39;UI设计&#39; },
    { id: 4, name: &#39;Hadoop&#39; },
    { id: 5, name: &#39;影视后期&#39; },
])
</script>

<template>
    <!-- 
        item in itmes
        item:值,当前循环的数组值
        itmes:循环的数组
     -->
    <h7>v-for 渲染数组, v-for="item in itmes"</h7>
    <ul>
        <li v-for="sub in subject">
            编号:{{ sub.id }} --- 名称:{{ sub.name }}
        </li>
    </ul>

    <hr>

    <!-- 解构对象 -->
    <h7>v-for 渲染数组, v-for="{ 解构…… } in itmes"</h7>
    <ul>
        <li v-for="{ id , name } in subject">
            编号:{{ id }} --- 名称:{{ name }}
        </li>
    </ul>

    <hr>
    <!-- 
        (value, index) in itmes
        value:值
        index:索引
        itmes:循环的数组
     -->
    <h7>v-for 渲染数组, v-for="(value, index) in itmes"</h7>
    <ul>
        <li v-for="(sub, index) in subject">
            编号:{{ sub.id }} --- 名称:{{ sub.name }} --- 索引:{{ index }}
        </li>
    </ul>

    <hr>

    <!-- 解构对象 -->
    <h7>v-for 渲染数组, v-for="({ 解构…… }, index) in itmes"</h7>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            编号:{{ id }} --- 名称:{{ name }} --- 索引:{{ index }}
        </li>
    </ul>
</template>

2. v-for渲染对象

使用 v-for 来遍历一个对象的所有属性,遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定<br>语法:

in 前一个参数:value in object<br>value :属性值<br>items :需要循环的对象in 前两个参数:(value, name) in object<br>value :属性值<br>name :键<br>items :需要循环的对象in 前三个参数:(value, name, index) in object<br>value :属性值<br>name :键<br>index :索引<br>items :需要循环的对象

// 组合式
<script setup>
import { reactive } from &#39;vue&#39;
let student = reactive({
    styNum: &#39;007&#39;, // 学号
    name: &#39;Jack&#39;, // 名字
    age: 18 //年龄
})
</script>

<template>
    <!-- 
        value in object
        value:属性值
        object:循环的对象
     -->
    <h7>v-for 渲染对象, v-for="value in object"</h7>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name) in object
        value:属性值
        name:属性名
        object:循环的对象
     -->
    <h7>v-for 渲染对象, v-for="(value, name) in object"</h7>
    <ul>
        <li v-for="(value, name) in student">
            属性名:{{ name }} --- 属性值: {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name, index) in object
        value:属性值
        name:属性名
        index: 索引
        object:循环的对象
     -->
    <h7>v-for 渲染对象, v-for="(value, name, index) in object"</h7>
    <ul>
        <li v-for="(value, name, index) in student">
            属性名:{{ name }} --- 属性值: {{ value }} --- 索引:{{ index }}
        </li>
    </ul>
</template>

3. 通过 key 管理状态

当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能;但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。<br>为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能;此时,需要为每项提供一个唯一的key属性:<br>key 的注意事项:

  • key 的类型只能是 Number/String

  • key 值必须具有唯一性

  • 建议循环的列表有一个属性当 key(该属性的值在此列表中唯一)

  • 不使用索引当 key

  • 建议使用 v-for 指令时一定要指定 key 的值

// 组合式
<script setup>
import { ref } from &#39;vue&#39;
// 课程
let subject = ref([
    { id: 1, name: &#39;Vue&#39; },
    { id: 2, name: &#39;Java&#39; },
    { id: 3, name: &#39;Hadoop&#39; }
])

// 添加课程
function addSubject() {
    // (数组最前面)添加
    subject.value.unshift({ id: 4, name: &#39;Python&#39; })
}
</script>

<template>

    <button @click.once="addSubject">添加课程(数组最前面)</button>

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

    <hr>

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

    <hr>

    <h4>使用列表属性当key值(该属性必须再此列表中唯一)</h4>
    
    <ul>
        <li v-for="sub in subject" :key="sub.id">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template>

위 내용은 Vue3의 템플릿 구문을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제