品牌网站建设费用,北京最新消息发布,专业的网站制作公司,如何做网络营销方案策划文章目录前言#xff1a;1. 内容渲染指令1.1 v-text1.2 {{ }}插值表达式1.3 v-html2. 双向绑定指令2.1 v-model2.2 v-model的修饰符3. 属性绑定指令3.1 动态绑定多个属性值3.2 绑定class和style属性4.条件渲染指令4.1 v-if、v-else-if、v-else4.2 v-show4.3 v-if与v-show的区别…
文章目录前言1. 内容渲染指令1.1 v-text1.2 {{ }}插值表达式1.3 v-html2. 双向绑定指令2.1 v-model2.2 v-model的修饰符3. 属性绑定指令3.1 动态绑定多个属性值3.2 绑定class和style属性4.条件渲染指令4.1 v-if、v-else-if、v-else4.2 v-show4.3 v-if与v-show的区别5. 事件绑定指令5.1 事件修饰符6. 列表渲染指令6.1 v-for渲染数组6.2 v-for渲染对象6.2 通过 key 管理状态总结前言
Vue 使用一种基于HTML的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上 1. 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容
1.1 v-text
使用v-text指令将数据采用纯文本方式填充其空元素中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 --/template1.2 {{ }}插值表达式
在元素中的某一位置采用纯文本的方式渲染数据script setupimport { reactive } from vuelet student reactive({name: Jack,desc: h3我是来自中国的小朋友/h3
})/scripttemplate!-- 插值表达式在元素中的某一位置采用纯文本的方式渲染数据 --div这是一个 DIV 元素{{ student.name }}{{ student.desc }}/div/template1.3 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 --/template2. 双向绑定指令
2.1 v-model
v-model双向数据绑定指令视图数据和数据源同步
一般情况下v-model指令用在表单元素中1. 文本类型的input和textarea元素会绑定value属性并侦听input事件2. input typecheckbox和input typeradio会绑定checked属性并侦听change事件3. 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.2 v-model的修饰符 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/template3. 属性绑定指令
● 响应式地绑定一个元素属性应该使用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/template3.1 动态绑定多个属性值
直接使用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);}
/style3.2 绑定class和style属性
class和style可以和其他属性一样使用v-bind将它们和动态的字符串绑定
但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且易出错的
因此Vue专门为class和style的v-bind用法提供了特殊的功能增强
除了字符串外表达式的值也可以是对象或数组。class属性绑定
1.绑定对象
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属性绑定
1.绑定对象
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);
}
/style2.绑定数组
还可以给: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;
}
/style4.条件渲染指令
4.1 v-if、v-else-if、v-else
1. v-if 指令用于条件性地渲染元素该内容只会在指令的表达式返回真值时才被渲染
2. v-else-if提供的是相应于v-if的else if区块它可以连续多次重复使用
3. 你也可以使用v-else为v-if添加一个else区块
4. v-else和v-else-if指令必须配合v-if指令一起使用 否则它将不会被识别而且语句块中间不能出现无关其他元素
5. 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/template4.2 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 --/template4.3 v-if与v-show的区别
● v-if是“真实的”按条件渲染因为它确保了在切换时条件区块内的事件监听器和子组件都会被销毁与重建
● v-if也是惰性的如果在初次渲染时条件值为false则不会做任何事条件区块只有当条件首次变为true时才被渲染
● v-show元素无论初始条件如何始终会被渲染只有 CSSdisplay属性会被切换
● v-if有更高的切换开销而v-show有更高的初始渲染开销如果需要频繁切换则使用v-show 较好如果在运行时绑定条件很少改变则v-if会更合适5. 事件绑定指令
我们可以使用v-on:指令 (简写为) 来监听 DOM 事件并在事件触发时执行对应的JavaScript
用法v-on:click或 clickscript
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/template5.1 事件修饰符
事件修饰符说明.prevent阻止默认行为.stop.stop 阻止事件冒泡.capture以捕获模式触发当前的事件处理函数.once.once 绑定的事件只触发1次.self只有在event.target是当前元素自身时触发事件处理函数.passive.passive 向浏览器表明了不想阻止事件的默认行为
按键修饰符
按键别名.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获Delete和Backspace两个按键)
系统修饰符.ctrl、.alt、.shift、.meta
准确的修饰符.exact鼠标修饰符
鼠标按键修饰符.left、.right、.middle6. 列表渲染指令
使用v-for指令基于一个数组来渲染一个列表6.1 v-for渲染数组
语法
1. in前一个参数item in items item值 items需要循环的数组
2. 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
/template6.2 v-for渲染对象
使用v-for来遍历一个对象的所有属性遍历的顺序会基于对该对象调用Object.keys()的返回值来决定
语法
1. in前一个参数value in object value属性值 items需要循环的对象
2. in前两个参数(value, name) in object value属性值 name键 items需要循环的对象
3. 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
/template6.2 通过 key 管理状态
当列表的数据变化时默认情况下vue会尽可能的复用已存在的DOM元素从而提升渲染的性能
但这种默认的性能优化策略会导致有状态的列表无法被正确更新。
为了给vue一个提示以便它能跟踪每个节点的身份从而在保证有状态的列表被正确更新的前提下提升渲染的性能
此时需要为每项提供一个唯一的key属性
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 })
}
/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总结
以上就是vue3.0 模板语法的全部内容和基本用法文章的代码为一个一个的案例感兴趣可以敲一敲看一看。希望本篇文章能够帮助到你不懂得可以评论区或者私信问我我也会一 一解答。谢谢观看 我的其他文章:https://blog.csdn.net/m0_60970928?typeblog
