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 id="我是来自中国的小朋友">我是来自中国的小朋友！</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 id="我是来自中国的小朋友">我是来自中国的小朋友！</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 id="我是来自中国的小朋友">我是来自中国的小朋友！</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 and
and will bind the checked attribute and listen for the 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 | <input v-model.number="age"> |
##.trim | automatic Filter the leading and trailing blank characters entered by the user
|
|
. lazy | updates at chang instead of input |
|
| 事件修饰符 | 说明 |
|---|---|
.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 id="不使用key值">不使用key值</h4>
<ul>
<li v-for="sub in subject">
<input type="checkbox">
{{ sub }}
</li>
</ul>
<hr>
<h4 id="使用索引当key值">使用索引当key值</h4>
<ul>
<li v-for="(sub, index) in subject" :key="index">
<input type="checkbox">
{{ sub }}
</li>
</ul>
<hr>
<h4 id="使用列表属性当key值-该属性必须再此列表中唯一">使用列表属性当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!
分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM前端有没有现成的库，可以直接用来绘制 Flowable 流程图的？下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。
vue是前端css框架吗Aug 26, 2022 pm 07:37 PMvue不是前端css框架，而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架，是基于MVVM设计模式的前端框架，且专注于View层。Vue.js的优点：1、体积小；2、基于虚拟DOM，有更高的运行效率；3、双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；4、生态丰富、学习成本低。
聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PMVue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。
手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM本篇文章我们来了解 Vue2.X 响应式原理，然后我们来实现一个 vue 响应式原理（写的内容简单）实现步骤和注释写的很清晰，大家有兴趣可以耐心观看，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Linux new version
SublimeText3 Linux latest version
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
