我們可以把Vue.js
的模板語法,直接理解為HTML
語法的一種擴展,它所有的模板節點宣告、屬性設定和事件註冊等都是依照HTML
的語法來進行擴充設計的。依照官方的說法是「所有的 Vue
範本都是語法層面合法的 HTML
,可以被符合規範的瀏覽器和 HTML
解析器解析」。
Vue 使用基於HTML 的模板語法,使我們能夠聲明式地將其元件實例的資料綁定到呈現的DOM 上
使用v-tex
t指令,將資料以純文字方式填入其空元素中
// 组合式 <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>
在元素中的某一位置採用純文字的方式渲染資料
// 组合式 <script setup> import { reactive } from 'vue' let student = reactive({ name: 'Jack', desc: '<h4>我是来自中国的小朋友!</h4>' }) </script> <template> <!-- 插值表达式:在元素中的某一位置采用纯文本的方式渲染数据 --> <div>这是一个 DIV 元素,{{ student.name }},{{ student.desc }}</div> </template>
使用v-html
指令,將資料採用HTML
語法填入其空元素中
// 组合式 <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>
v-model
雙向資料綁定指令,視圖資料和資料來源同步<br>一般情況下v-model
指令用在表單元素中:
文字類型的d5fd7aea971a85678ba271703566ebfd 和4750256ae76b6b9d804861d8f69e79d3 元素會綁定value 屬性並偵聽input 事件
71050641259ae4cd41fe7eedda24c55b 和d11dad02a1f3abd212da65221b2dc681 會綁定checked 屬性並偵聽change 事件
// 组合式 <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. v-model的修飾符
作用 | 範例 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
.number
| #會自動將使用者的輸入值轉為數值類型af56722035af59fd461cdc6f7e4667a1
|
|||||||||||||||
#.trim ##自動過濾使用者輸入的首尾空白字元 |
50548d2b5c87e461898528f37fc59e13 |
|
||||||||||||||
在 chang | 時而非input
#080ca90234e44cd666b68e8a5c21d589 |
|
事件修饰符 | 说明 |
---|---|
.prevent |
阻止默认行为 |
.stop |
阻止事件冒泡 |
.capture |
以捕获模式触发当前的事件处理函数 |
.once |
绑定的事件只触发1次 |
.self |
只有在event.target是当前元素自身时触发事件处理函数 |
.passive |
向浏览器表明了不想阻止事件的默认行为 |
.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
:阻止事件产生的冒泡现象
// 组合式 <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
:绑定的事件只触发 1
次
// 组合式 <script setup> // 打招呼 function say(name) { window.alert('你好:' + name) } </script> <template> <!-- .once:绑定的事件只触发一次 --> <button @click.once="say('BUTTON')">点我试一下</button> </template>
.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
给元素添加一个监听器
当元素事件产生冒泡时,先触发的是该修饰符的元素的事件
如果有多个该修饰符,则由外向内依次触发
// 组合式 <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
:不阻止事件的默认行为,与 .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>
按键别名:.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>
鼠标按键修饰符:.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
指令基于一个数组来渲染一个列表
语法:
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>
使用 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>
当列表的数据变化时,默认情况下,vue
会尽可能的复用已存在的 DOM
元素,从而提升渲染的性能;但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。<br>为了给 vue
一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能;此时,需要为每项提供一个唯一的key属性:<br>key
的注意事项:
key
的类型只能是 Number/String
key
值必须具有唯一性
建议循环的列表有一个属性当 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>
以上是如何使用Vue3的模板語法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!