福州培训网站建设,wordpress如何设置用户中心,看楼盘的app,中企动力邮箱网页版目录前言一、什么是模板语法#xff1f;二、内容渲染指令1. v-text2. {{ }} 插值表达式3. v-html三、双向绑定指令1. v-model2. v-model的修饰符四、属性绑定指令1. 动态绑定多个属性值2. 绑定class和style属性五、条件渲染指令1. v-if、v-else-if、v-else2. v-show3. v-if和v…
目录前言一、什么是模板语法二、内容渲染指令1. v-text2. {{ }} 插值表达式3. v-html三、双向绑定指令1. v-model2. v-model的修饰符四、属性绑定指令1. 动态绑定多个属性值2. 绑定class和style属性五、条件渲染指令1. v-if、v-else-if、v-else2. v-show3. v-if和v-show的区别六、事件绑定指令1. 事件修饰符2. 按键修饰符3. 鼠标按键修饰符七、列表渲染指令1. v-for渲染数组2. v-for渲染对象3. 通过 key 管理状态总结前言 Vue.js 从版本 1.x 到版本 3.x官方代码案例和推荐使用都是模板语法那么本篇文章我们也根据官方的推荐来了解一下模板语法是怎么一回事。 一、什么是模板语法
我们可以把 Vue.js 的模板语法直接理解为 HTML 语法的一种扩展它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析”。 Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上 二、内容渲染指令
1. v-text
使用 v-tex t指令将数据采用纯文本方式填充其空元素中
// 组合式
script setupimport { reactive } from vuelet student reactive({name: Jack,desc: h3我是来自中国的小朋友/h3})/scripttemplate!-- 使用v-text指令将数据采用纯文本方式填充其空元素中 --div v-textstudent.name/div!-- v-text以纯文本的方式显示数据 --div v-textstudent.desc/div!-- 下面的代码会报错div 元素不是空元素 --!-- div v-textstudent.name这是原始的div数据/div --/template2. {{ }} 插值表达式
在元素中的某一位置采用纯文本的方式渲染数据
// 组合式
script setupimport { reactive } from vuelet student reactive({name: Jack,desc: h3我是来自中国的小朋友/h3
})/scripttemplate!-- 插值表达式在元素中的某一位置采用纯文本的方式渲染数据 --div这是一个 DIV 元素{{ student.name }}{{ student.desc }}/div/template3. v-html
使用 v-html 指令将数据采用 HTML 语法填充其空元素中
// 组合式
script setupimport { reactive } from vuelet student reactive({name: Jack,desc: h3我是来自中国的小朋友/h3
})/scripttemplate!-- 使用v-html指令将数据采用HTML语法填充其空元素中 --div v-htmlstudent.name/div!-- v-html以 HTML 语法显示数据 --div v-htmlstudent.desc/div!-- 下面的代码会报错div 元素不是空元素 --!-- div v-htmlstudent.name这是原始的div数据/div --/template三、双向绑定指令
1. v-model
v-model 双向数据绑定指令视图数据和数据源同步 一般情况下 v-model 指令用在表单元素中
文本类型的 input 和 textarea 元素会绑定 value 属性并侦听 input 事件input typecheckbox 和 input typeradio 会绑定 checked 属性并侦听 change 事件select会绑定 value 属性并侦听 change 事件
// 组合式
script setupimport { 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]) // 去过的城市多选下拉框/scripttemplate!-- 单行文本框 --input typetext v-modelinputTexthr!-- 多行文本框 --textarea v-modelmessage/textareahr!-- 默认情况下复选框的值true/false --input typecheckbox v-modelopen 灯hr!-- 自定义复选框值 true-value/false-value --input typecheckbox true-value确定 false-value不确定 v-modeldetermine 是否确定hrinput typecheckbox valueLQ v-modellikes 篮球input typecheckbox valueZQ v-modellikes 足球input typecheckbox valueYMQ v-modellikes 羽毛球input typecheckbox valuePPQ v-modellikes 乒乓球hrinput typeradio valueman v-modelsex 男input typeradio valuewoman v-modelsex 女hr证书等级select v-modelleveloption valueC初级/optionoption valueB中级/optionoption valueA高级/option/selecthr去过的城市select multiple v-modelcityoption value苏A南京/optionoption value苏B无锡/optionoption value苏C徐州/optionoption value苏D常州/option/select/template2. v-model的修饰符
修饰符作用示例.number自动将用户的输入值转为数值类型input v-model.numberage /.trim自动过滤用户输入的首尾空白字符input v-model.trimmsg /.lazy在 chang 时而非 input 时更新input v-model.lazymsg /
// 组合式
script setupimport { ref } from vue let age ref(20)
let nickname ref()/scripttemplatep将用户输入的值转成数值 .number懒更新 .lazy/p!-- 。number 将用户输入的值转成数值如果用户输入的内容无法转成数字将不会更新数据源 --!-- .lazy 在 change 跟新数据源而不是 input --input typetext v-model.lazy.numberagehrp去掉首尾空白字符/pinput typetext v-model.trimnickname/template四、属性绑定指令
响应式地绑定一个元素属性应该使用 v-bind: 指令如果绑定的值是 null 或者 undefined那么该属性将会从渲染的元素上移除因为 v-bind 非常常用我们提供了特定的简写语法:
// 组合式
script setupimport { reactive } from vuelet picture reactive({src: https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg, // 图像地址width: 200 // 显示宽度
})/scripttemplateinput typerange min100 max500 v-modelpicture.widthhr!-- v-bind: 为 src 属性绑定指定的数据源 --img v-bind:srcpicture.src v-bind:widthpicture.widthhr!-- : 是 v-bind: 的缩写形式 --img :srcpicture.src :widthpicture.widthhr!-- 如果绑定的值是 null 或者 undefined那么该属性将会从渲染的元素上移除 --button clickpicture.width null设置宽度为NULL/button/template1. 动态绑定多个属性值
直接使用 v-bind 来为元素绑定多个属性及其值
// 组合式
script setupimport {reactive} from vuelet attrs reactive({class: error,id: borderBlue
})/scripttemplate!-- 直接使用 v-bind 来为元素绑定多个属性及其值 --button v-bindattrs我是一个普通的按钮/button/templatestyle.error {background-color: rgb(167, 58, 58);color: white;}#borderBlue {border: 2px solid rgb(44, 67, 167);}
/style渲染结果 button classredBack idbtnBorderBlue我是一个普通按钮/button 2. 绑定class和style属性
class 和 style 可以和其他属性一样使用 v-bind 将它们和动态的字符串绑定但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且易出错的因此 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强除了字符串外表达式的值也可以是对象或数组。
class属性绑定
绑定对象
// 组合式
script setupimport { ref, reactive } from vuelet btnClassObject reactive({error: false, // 主题色flat: false // 阴影
})let capsule ref(false)// 胶囊
let block ref(false)// 块/scripttemplateinput typecheckbox v-modelbtnClassObject.error errorinput typecheckbox v-modelbtnClassObject.flat flatbrbrbutton :classbtnClassObject我是一个普通的按钮/buttonhrinput typecheckbox v-modelcapsule 胶囊input typecheckbox v-modelblock 块brbrbutton :class{ rounded: capsule, fullWidth: block }我是一个普通的按钮/button/templatestyle
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 setupimport { ref, reactive } from vuelet btnTheme ref([]) // 按钮class数组let capsule ref(false)// 胶囊
let widthTheme ref([])// 宽度数组/scripttemplateinput typecheckbox valueerror v-modelbtnTheme errorinput typecheckbox valueflat v-modelbtnTheme flatbrbr!-- 直接使用数组数据源数组中有哪些值直接在该元素的class里出现对应的类名 --button :classbtnTheme我是一个普通的按钮/buttonhrinput typecheckbox v-modelcapsule 胶囊input typecheckbox valuefullWidth v-modelwidthTheme 块brbr!-- 数组和对象一起使用 --button :class[{ rounded: capsule }, widthTheme]我是一个普通的按钮/button/templatestyle
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%;
}
/stylestyle属性绑定
绑定对象
// 组合式
script setupimport { reactive, ref } from vuelet btnTheme reactive({backgroundColor: #FF0000, // 背景色color: #000000 // 文本色
})let backColor ref(#0000FF) // 背景色
let color ref(#FFFFFF) // 文本色
let borRadius ref(20) // 边框圆角/scripttemplate背景色input typecolor v-modelbtnTheme.backgroundColor文本色input typecolor v-modelbtnTheme.colorbrbr!-- style可以直接绑定对象数据源但是对象数据源的属性名当样式属性驼峰命名法kebab-cased形式 --button :stylebtnTheme我是一个普通的按钮/buttonhr背景色input typecolor v-modelbackColor文本色input typecolor v-modelcolor边框圆角input typerange min0 max20 v-modelborRadiusbrbr!-- style可以直接写对象但是对象的属性名当样式属性驼峰命名法kebab-cased形式 --button :style{backgroundColor: backColor,color,border-radius: borRadius px}我是一个普通的按钮/button/templatestyle
button {border: none;padding: 15px 20px;background-color: rgb(179, 175, 175);
}
/style绑定数组
还可以给 :style 绑定一个包含多个样式对象的数组这些对象会被合并后渲染到同一元素上
// 组合式
!-- 脚本区域 --
script setup
import { ref, reactive } from vueconst btnTheme ref([{backgroundColor: #FF0000, // 背景色color: #FFFFFF // 文本色},{borderRadius: 0 // 边框圆角}
])const colorTheme reactive({backgroundColor: #000000, // 背景色color: #FFFFFF // 文本色
})const radiusTheme reactive({borderRadius: 0 // 边框圆角
})
/script!-- 视图区域 --
template背景色input typecolor v-modelbtnTheme[0].backgroundColor文本色input typecolor v-modelbtnTheme[0].color胶囊input typecheckbox true-value5px false-value0 v-modelbtnTheme[1].borderRadiusbrbr!-- 直接传入数组 --button :stylebtnTheme我是一个普通按钮/buttonhr背景色input typecolor v-modelcolorTheme.backgroundColor文本色input typecolor v-modelcolorTheme.color胶囊input typecheckbox true-value5px false-value0 v-modelradiusTheme.borderRadiusbrbr!-- 直接写数组 --button :style[colorTheme, radiusTheme]我是一个普通按钮/button
/templatestyle
button {padding: 15px 20px;border: none;
}
/style五、条件渲染指令
1. v-if、v-else-if、v-else
v-if 指令用于条件性地渲染元素该内容只会在指令的表达式返回真值时才被渲染v-else-if 提供的是相应于 v-if 的 else if 区块它可以连续多次重复使用你也可以使用 v-else 为 v-if 添加一个 else 区块v-else 和 v-else-if 指令必须配合 v-if 指令一起使用 否则它将不会被识别而且语句块中间不能出现无关其他元素v-if 支持在 template 元素上使用这只是一个不可见的包装器元素最后渲染的结果并不会包含这个 template 元素
// 组合式
script setupimport { ref } from vuelet isShow ref(false) // 是否显示
let age ref(20) // 年龄
let week ref(3) // 周几/scripttemplate是否显示input typecheckbox v-modelisShow!-- v-if指令表达式为真时才会渲染该元素 为true时会创建该元素为false时会销毁该元素--h3 v-ifisShow这是一个普通的标题标签/h3hr年龄: input typerange min0 max100 v-modelage {{ age }}!-- v-if可以配合 v-else-if 和 v-else 来搭建多重判断条件他们中间不要参杂无关紧要的元素 --h1 v-ifage 18未成年/h1!-- span无关紧要的元素/span --h2 v-else-ifage 35青年/h2h3 v-else-ifage 50中年/h3h4 v-else老年/h4hr周几: input typerange min1 max7 v-modelweek {{ week }}!-- v-if可以配合 template 元素使用最后渲染的结果并不会包含这个 template元素 --template v-ifweek 1 || week 3 || week 5 || week 7h1可以游泳/h1/templatetemplate v-elseh1不可以游泳/h1/template/template2. v-show
v-show 按条件显示一个元素的指令v-show 会在 DOM 渲染中保留该元素v-show 仅切换了该元素上名为 display 的 CSS 属性v-show 不支持在 template 元素上使用也不能和 v-else 搭配使用
// 组合式
script setupimport { ref } from vuelet isShow ref(false) // 是否显示
let age ref(20) // 年龄
let week ref(3) // 周几/scripttemplate是否显示input typecheckbox v-modelisShow!-- v-show指令表达式为真时才会渲染该元素 无论该指令的表达式是否 true 或 false该元素在元素中是保留该元素的为 true 时会删除该元素的 display:none 样式为 false 时会给该元素添加 display:none 样式--h3 v-showisShow这是一个普通的标题标签/h3hr年龄: input typerange min0 max100 v-modelage {{ age }}h1 v-showage 18未成年/h1h2 v-showage 18 age 35青年/h2h3 v-showage 35 age 50中年/h3h4 v-showage 50老年/h4hr周几: input typerange min1 max7 v-modelweek {{ week }}!-- v-show不可以配合 template 元素使用 --!-- template v-showweek 1 || week 3 || week 5 || week 7h1可以游泳/h1/templatetemplate v-shwweek 12 || week 4 || week 6h1不可以游泳/h1/template --/template3. 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 用法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}}}
}
/scripttemplateh3当前音量{{ volume }}/h3!-- v-on: 事件绑定 --button v-on:clickaddVolume添加音量/buttonbutton v-on:clicksubVolume减小音量/buttonhr!-- 是 v-on: 的缩写 --button clicksetVolume(0)静音/buttonbutton clicksetVolume(5)音量适中/buttonbutton clicksetVolume(10)音量最大/button/template1. 事件修饰符
事件修饰符说明.prevent阻止默认行为.stop阻止事件冒泡.capture以捕获模式触发当前的事件处理函数.once绑定的事件只触发1次.self只有在event.target是当前元素自身时触发事件处理函数.passive向浏览器表明了不想阻止事件的默认行为
.prevent
.prevent 阻止该事件的默认行为
// 组合式
script setup// 打招呼
function say(name) {window.alert(你好 name)
}/scripttemplate!-- .prevent 修饰符阻止了超链接的默认行为跳转到百度页 --a hrefhttp://www.baidu.com click.preventsay(baiDu)百度/a/template.stop
.stop 阻止事件产生的冒泡现象
// 组合式
script setup
// 打招呼
function say(name) {console.log(你好 name)
}
/scripttemplatediv classdivArea clicksay(DIV)!-- .stop阻止产生冒泡事件 --button click.stopsay(BUTTON)冒泡按钮/button/div
/templatestyle
.divArea {padding: 30px;border: 2px solid blue;
}
/style.once
.once 绑定的事件只触发 1 次
// 组合式
script setup
// 打招呼
function say(name) {window.alert(你好 name)
}
/scripttemplate!-- .once绑定的事件只触发一次 --button click.oncesay(BUTTON)点我试一下/button
/template.self
.self 只有在 event.target 是当前元素自身时触发事件处理函数
// 组合式
script setup
// 打招呼
function say(name) {window.alert(你好 name)
}
/scripttemplate!-- .self只在该元素上触发事件有效其子元素无效 --div classdivArea click.selfsay(DIV)button我是一普通的按钮/button/div
/templatestyle
.divArea {padding: 30px;border: 2px solid blue;
}
/style.capture
.capture 给元素添加一个监听器
当元素事件产生冒泡时先触发的是该修饰符的元素的事件如果有多个该修饰符则由外向内依次触发
// 组合式
script setup
// 打招呼
function say(name) {console.log(你好 name)
}
/scripttemplate!-- .capture 给元素添加一个监听器1当元素事件产生冒泡时先触发的是该修饰符的元素的事件2如果有多个该修饰符则由外向内依次触发--div classdivArea click.capturesay(DIV-1)div classdivArea clicksay(DIV-2)div classdivArea click.capturesay(DIV-3)button我是一普通的按钮/button/div/div/div
/templatestyle
.divArea {padding: 30px;border: 2px solid blue;
}
/style.passive
.passive 不阻止事件的默认行为与 .prevent 不要同时使用
// 组合式
script setup
function eventPrevent() {// 阻止事件默认行为event.preventDefault()
}
/scripttemplate!-- .passive先执行默认行为不考虑执行的代码中是否包含 event.preventDefault() --a hrefhttp://www.baidu.com click.passiveeventPrevent百度/a
/template2. 按键修饰符
按键别名.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获 Delete 和 Backspace 两个按键) 系统修饰符.ctrl、.alt、.shift、.meta 准确的修饰符.exact
// 组合式
script setup
// 弹出消息
function showMessage(message) {window.alert(message)
}
/scripttemplate按下的键中包含 Enter 键事件 input typetext keydown.entershowMessage(你按下了 Enter 键)hr按下的键中包含 Shift Enter 键事件input typetext keydown.enter.shiftshowMessage(你按下了 Shift Enter 键)/hr按下的键只有 Shift Enter 键事件input typetext keydown.enter.shift.exactshowMessage(你只按下了 Shift Enter 键)/
/template3. 鼠标按键修饰符
鼠标按键修饰符.left、.right、.middle
// 组合式
!-- 脚本区域 --
script setupfunction showTest(text) {window.alert(text)}
/script!-- 视图区域 --
template!-- 鼠标右键按下 --button mousedown.rightshowTest(按下的是鼠标右键)鼠标右键按下/buttonhr!-- 点击时采用的是鼠标中键 --button click.middleshowTest(按下的是鼠标中键)点击时采用的是鼠标中键/buttonhr!-- 鼠标左键按下 --button mousedown.leftshowTest(按下的是鼠标左键)鼠标左键按下/button
/template!-- 样式区域 --
stylebutton {border: none;padding: 15px 20px;}button:active {box-shadow: 0 0 5px grey;}
/style七、列表渲染指令
使用 v-for 指令基于一个数组来渲染一个列表
1. v-for渲染数组
语法
in 前一个参数item in items item 值 items 需要循环的数组in 前两个参数(value, index) in items value 值 index 索引 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: 影视后期 },
])
/scripttemplate!-- item in itmesitem值当前循环的数组值itmes循环的数组--h6v-for 渲染数组 v-foritem in itmes/h6ulli v-forsub in subject编号{{ sub.id }} --- 名称{{ sub.name }}/li/ulhr!-- 解构对象 --h6v-for 渲染数组 v-for{ 解构…… } in itmes/h6ulli v-for{ id , name } in subject编号{{ id }} --- 名称{{ name }}/li/ulhr!-- (value, index) in itmesvalue值index索引itmes循环的数组--h6v-for 渲染数组 v-for(value, index) in itmes/h6ulli v-for(sub, index) in subject编号{{ sub.id }} --- 名称{{ sub.name }} --- 索引{{ index }}/li/ulhr!-- 解构对象 --h6v-for 渲染数组 v-for({ 解构…… }, index) in itmes/h6ulli v-for({ id , name } , index) in subject编号{{ id }} --- 名称{{ name }} --- 索引{{ index }}/li/ul
/template2. v-for渲染对象
使用 v-for 来遍历一个对象的所有属性遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定 语法
in 前一个参数value in object value 属性值 items 需要循环的对象in 前两个参数(value, name) in object value 属性值 name 键 items 需要循环的对象in 前三个参数(value, name, index) in object value 属性值 name 键 index 索引 items 需要循环的对象
// 组合式
script setup
import { reactive } from vue
let student reactive({styNum: 007, // 学号name: Jack, // 名字age: 18 //年龄
})
/scripttemplate!-- value in objectvalue属性值object循环的对象--h6v-for 渲染对象 v-forvalue in object/h6ulli v-forvalue in student{{ value }}/li/ulhr!-- (value, name) in objectvalue属性值name属性名object循环的对象--h6v-for 渲染对象 v-for(value, name) in object/h6ulli v-for(value, name) in student属性名{{ name }} --- 属性值 {{ value }}/li/ulhr!-- (value, name, index) in objectvalue属性值name属性名index: 索引object循环的对象--h6v-for 渲染对象 v-for(value, name, index) in object/h6ulli v-for(value, name, index) in student属性名{{ name }} --- 属性值 {{ value }} --- 索引{{ index }}/li/ul
/template3. 通过 key 管理状态
当列表的数据变化时默认情况下vue 会尽可能的复用已存在的 DOM 元素从而提升渲染的性能但这种默认的性能优化策略会导致有状态的列表无法被正确更新。 为了给 vue 一个提示以便它能跟踪每个节点的身份从而在保证有状态的列表被正确更新的前提下提升渲染的性能此时需要为每项提供一个唯一的key属性 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 })
}
/scripttemplatebutton click.onceaddSubject添加课程数组最前面/buttonh3不使用key值/h3ulli v-forsub in subjectinput typecheckbox{{ sub }}/li/ulhrh3使用索引当key值/h3ulli v-for(sub, index) in subject :keyindexinput typecheckbox{{ sub }}/li/ulhrh3使用列表属性当key值该属性必须再此列表中唯一/h3ulli v-forsub in subject :keysub.idinput typecheckbox{{ sub }}/li/ul/template总结 欢迎大家加入我的社区在社区中会不定时发布一些精选内容https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category10003 以上就是 Vue3 中的模板语法不懂得也可以在评论区里问我或私聊我询问以后会持续发布一些新的功能敬请关注。 我的其他文章https://blog.csdn.net/weixin_62897746?typeblog
