Home > Article > Web Front-end > How to use Vue3’s template syntax?
How to use Vue3’s template syntax?
- WBOYforward
- 2023-05-10 09:34:161221browse
1. What is template syntax?
We can directly understand the template syntax of Vue.js as an extension of the HTML syntax, including all its template node declarations, attribute settings and event registrations. etc. are designed to be extended according to the syntax of HTML. According to the official statement, "all Vue templates are syntactically legal HTML and can be parsed by browsers and HTML parsers that comply with the specification."
Vue uses an HTML-based template syntax that allows us to declaratively bind the data of its component instances to the rendered DOM
2. Content Rendering instructions
1. v-text
Use the v-tex t instruction to fill the empty elements with data in plain text
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</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. {{ }} interpolation expression
Render data as plain text at a certain position in the element
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</script>
<template>
<!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
<div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>
</template>3. v-html
Usev-html instruction, fill the empty elements with data using HTML syntax
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</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>3. Two-way binding instruction
1. v-model
v-model Two-way data binding instructions, view data and data source synchronization<br>Generally, v-model instructions are used in form elements:
The d5fd7aea971a85678ba271703566ebfd and 4750256ae76b6b9d804861d8f69e79d3 elements of text type will bind the value attribute and listen to the input event
71050641259ae4cd41fe7eedda24c55b and d11dad02a1f3abd212da65221b2dc681 will bind the checked attribute and listen for the change event
221f08282418e2996498697df914ce4e will bind the value attribute and listen for it change event
// 组合式
<script setup>
import { ref } from 'vue'
let inputText = ref('ABC') // 单行文本框
let message = ref('本次更新有以下几点：……') // 多行文本框
let open = ref(true) // 开灯（复选框）
let determine = ref('不确定') // 是否确定（复选框）
let likes = ref(['YMQ']) // 兴趣爱好（复选框）
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>
<!-- 默认情况下，复选框的值：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. Modifier of v-model
| Modifier | Function | Example |
|---|---|---|
.number |
Automatically convert the user’s input value to a numeric type | af56722035af59fd461cdc6f7e4667a1 |
##.trim | automatic Filter the leading and trailing blank characters entered by the user 50548d2b5c87e461898528f37fc59e13 |
|
. lazy | updates at chang instead of input |
080ca90234e44cd666b68e8a5c21d589 |
| 事件修饰符 | 说明 |
|---|---|
.prevent |
阻止默认行为 |
.stop |
阻止事件冒泡 |
.capture |
以捕获模式触发当前的事件处理函数 |
.once |
绑定的事件只触发1次 |
.self |
只有在event.target是当前元素自身时触发事件处理函数 |
.passive |
向浏览器表明了不想阻止事件的默认行为 |
.prevent
.prevent ：阻止该事件的默认行为
// 组合式
<script setup>
// 打招呼
function say(name) {
window.alert('你好：' + name)
}
</script>
<template>
<!-- .prevent 修饰符阻止了超链接的默认行为（跳转到百度页） -->
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="say('baiDu')">百度</a>
</template>.stop
.stop ：阻止事件产生的冒泡现象
// 组合式
<script setup>
// 打招呼
function say(name) {
console.log('你好：' + name)
}
</script>
<template>
<div class="divArea" @click="say('DIV')">
<!-- .stop：阻止产生冒泡事件 -->
<button @click.stop="say('BUTTON')">冒泡按钮</button>
</div>
</template>
<style>
.divArea {
padding: 30px;
border: 2px solid blue;
}
</style>.once
.once ：绑定的事件只触发 1 次
// 组合式
<script setup>
// 打招呼
function say(name) {
window.alert('你好：' + name)
}
</script>
<template>
<!-- .once：绑定的事件只触发一次 -->
<button @click.once="say('BUTTON')">点我试一下</button>
</template>.self
.self ：只有在 event.target 是当前元素自身时触发事件处理函数
// 组合式
<script setup>
// 打招呼
function say(name) {
window.alert('你好：' + name)
}
</script>
<template>
<!-- .self：只在该元素上触发事件有效，其子元素无效 -->
<div class="divArea" @click.self="say('DIV')">
<button>我是一普通的按钮</button>
</div>
</template>
<style>
.divArea {
padding: 30px;
border: 2px solid blue;
}
</style>.capture
.capture 给元素添加一个监听器
当元素事件产生冒泡时，先触发的是该修饰符的元素的事件
如果有多个该修饰符，则由外向内依次触发
// 组合式
<script setup>
// 打招呼
function say(name) {
console.log('你好：' + name)
}
</script>
<template>
<!--
.capture 给元素添加一个监听器
1：当元素事件产生冒泡时，先触发的是该修饰符的元素的事件
2：如果有多个该修饰符，则由外向内依次触发
-->
<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 ：不阻止事件的默认行为，与 .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 (捕获 Delete 和 Backspace 两个按键)<br>系统修饰符：.ctrl、.alt、.shift、.meta<br>准确的修饰符：.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. 鼠标按键修饰符
鼠标按键修饰符：.left、.right、.middle
// 组合式
<!-- 脚本区域 -->
<script setup>
function showTest(text) {
window.alert(text)
}
</script>
<!-- 视图区域 -->
<template>
<!-- 鼠标右键按下 -->
<button @mousedown.right="showTest('按下的是鼠标右键')">鼠标右键按下</button>
<hr>
<!-- 点击时，采用的是鼠标中键 -->
<button @click.middle="showTest('按下的是鼠标中键')">点击时，采用的是鼠标中键</button>
<hr>
<!-- 鼠标左键按下 -->
<button @mousedown.left="showTest('按下的是鼠标左键')">鼠标左键按下</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 'vue'
// 课程
let subject = ref([
{ id: 1, name: 'Vue' },
{ id: 2, name: 'Java' },
{ id: 3, name: 'UI设计' },
{ id: 4, name: 'Hadoop' },
{ id: 5, name: '影视后期' },
])
</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 'vue'
let student = reactive({
styNum: '007', // 学号
name: 'Jack', // 名字
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/Stringkey值必须具有唯一性建议循环的列表有一个属性当
key（该属性的值在此列表中唯一）不使用索引当
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() {
// （数组最前面）添加
subject.value.unshift({ id: 4, name: 'Python' })
}
</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>The above is the detailed content of How to use Vue3’s template syntax?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to access data in Vue3 reactive proxy object?Next article：How to access data in Vue3 reactive proxy object?
Related articles
See more- About vue using validator: VeeValidate3
- What are the differences between computed and method in Vue?
- Introduction to the method of turning off Eslint verification in the vue project
- Introduction to several methods of defining component templates in Vue.js
- Four places to implement AJAX in Vue applications