龙华网站建设全包,wordpress contactus,四川华鸿建设有限公司网站,手机app定制一、模板语法
主要还是记录一些指令的使用和vue2的区别#xff1b;vue3指令导航#xff1b;
1.1 v-text 和 v-html
指令的区别#xff1a; v-text#xff1a; 更新元素的文本内容#xff1b;v-text 通过设置元素的 textContent 属性来工作#xff0c;因此它将覆盖元素…一、模板语法
主要还是记录一些指令的使用和vue2的区别vue3指令导航
1.1 v-text 和 v-html
指令的区别 v-text 更新元素的文本内容v-text 通过设置元素的 textContent 属性来工作因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分应该使用 mustache interpolations 代替。不能解析标签 v-html 更新元素的innerHTMLv-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板不如重新想想怎么使用组件来代替。可以解析标签在单文件组件scoped 样式将不会作用于 v-html 里的内容因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS你可以使用 CSS modules 或使用一个额外的全局 style 元素手动设置类似 BEM 的作用域策略。 vue2这两个指令的使用的时候没什么需要注意的地方即使标签里面有内容也可以正常使用和在浏览器中正常显示内容vue3绑定指令的元素必须是空标签如果该标签里面有内容或其他标签都会报错 相比vue2vue3源码在这两个指令绑定的时候去做了进一步的处理
1.2 v-model
注意 一般情况下v-model指令用在表单元素中文本类型的 input、textarea 会绑定元素的 value 属性并侦听 input 事件单选和复选 radio、checkbox 会绑定元素的 checked 属性并侦听 change 事件下拉菜单 select 会绑定元素的 value 属性并侦听 change 事件 指令绑定在 select元素 上给 子元素option 设置 value属性 示例展示script setupimport { ref, reactive, toRef, toRefs, onMounted } from vue;let text ref(111)let textarea ref(222)let radio ref(man)let open ref(true)let determine ref(确定)let checkbox ref([YMQ])let select ref(B)let selects ref([苏C, 苏B])onMounted(() {});
/scripttemplateh4单行文本框/h4input typetext v-modeltexthrh4多行文本框/h4input typetextarea v-modeltextareahrh4单选框/h4input typeradio valueman v-modelradio 男input typeradio valuewoman v-modelradio 女hrh4默认复选框/h4input typecheckbox name id v-modelopen 灯h4自定义复选框的值/h4!-- 默认状态下复选框的值是 true / false 既 open 的值为 true / false--input typecheckbox true-value确定 false-value不确定 v-modeldetermine 是否确定!-- true-value - 表示选中状态下既 determine 的值false-value - 表示未选中状态下表示选中状态下既 determine 的值--hrh4复选框/h4input typecheckbox valueLQ v-modelcheckbox 篮球input typecheckbox valueZQ v-modelcheckbox 足球input typecheckbox valueYMQ v-modelcheckbox 羽毛球input typecheckbox valuePPQ v-modelcheckbox 乒乓球hrh4单选下拉菜单/h4证书等级select v-modelselectoption valueC初级/optionoption valueB中级/optionoption valueA高级/option/selecthrh4多选下拉菜单/h4去过的城市select multiple v-modelselects!--NOTEmultiple - 规定可同时选择多个选项值 - 布尔值写该属性表示true不写表示false--option value苏A南京/optionoption value苏B无锡/optionoption value苏C徐州/optionoption value苏D常州/option/select
/template1.3 v-if 和 v-for 的 优先级
vue2 v-for v-if vue3 v-if v-for
1.4 v-for 循环 数组 和 对象
这块和 vue2 没啥区别主要是我自己在 vue2 里面主要是配合数组使用很少循环对象使用 v-for 的时候记得添加 key循环数组 写法一 v-for item in arritem数组的每一项元素arr需要循环的数组 写法二 v-for (item, index) in arritem数组的每一项元素index每一项元素对应的索引arr需要循环的数组 循环对象 使用 v-for 来遍历一个对象的所有属性遍历的顺序 会基于该对象调用 Object.keys() 的 返回值 来决定写法一 v-for value in objectvalue属性值object需要循环的对象 写法二 v-for (value, name) in objectvalue属性值name属性名object需要循环的对象 写法三 v-for (value, name, index) in objectvalue属性值name属性名index索引Object.keys()的返回值中 name 对应的索引object需要循环的对象 示例展示script setupimport { reactive } from vuelet student reactive({styNum: 007, // 学号name: Jack, // 名字age: 18 //年龄})
/scripttemplateh6Object.keys() 的 返回值/h6span{{ Object.keys(student) }}/span!-- value in objectvalue属性值object循环的对象--h6v-for 渲染对象 v-forvalue in object/h6ulli v-forvalue in student :keyvalue{{ value }}/li/ulhr!-- (value, name) in objectvalue属性值name属性名object循环的对象--h6v-for 渲染对象 v-for(value, name) in object/h6ulli v-for(value, name) in student :keyname属性名{{ 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 :keyname属性名{{ name }} --- 属性值 {{ value }} --- 索引{{ index }}/li/ul
/template效果展示 通过 key 提高更新性能 当列表的数据变化时默认情况下vue会尽可能的复用已存在的DOM元素从而提升渲染的性能但这种默认的性能优化策略会导致有状态的列表无法被正确更新为了给vue一个提示以便它能跟踪每个节点的身份从而在保证有状态的列表被正确更新的前提下提升渲染的性能此时需要为每项提供一个唯一的key属性key的注意事项 key的类型 只能 是 Number/Stringkey值必须具有 唯一性建议循环的列表有一个属性当 key该属性的值在此列表中唯一不使用 索引 当 key 使用 v-for 指令时一定要指定 key 的值 示例展示script setupimport { 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效果展示 观察 不使用key 使用索引作为key 的变化会导致有状态的列表无法被正确的更新
1.5 键盘按键修饰符
这块和 vue2 没啥区别主要是我自己在 vue2 里面就知道那么几个修饰符所以在这里记录了一下按键别名.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 键这个事件才会触发)/
/template1.6 鼠标按键修饰符
这块和 vue2 没啥区别主要是我自己在 vue2 里面基本没遇到过所以在这里记录了一下鼠标按键修饰符 .left鼠标左键.middle鼠标中键滚轮键.right鼠标右键 示例展示!-- 脚本区域 --
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二、vue2 和 vue3 v-model语法糖 区别
vue3官网组件 v-model在 vue2 中 v-mode 语法糖 简写的代码 text 和 textareaSon :valuemsg inputmsg$event.target.value /radio 和 checkboxSon :checkedmsg changemsg$event.target.checked / 在 vue3 中 v-model 语法糖 有所调整 Son :modelValuemsg update:modelValuemsg$event / 示例展示 父组件script setupimport { ref } from vue// NOTE 在使用 setup 语法糖的 单文件 里面导入组件的时候无需注册直接使用即可// TODO 导入组件import SonComponent from /components/SonComponent.vuelet searchText ref(禁止摆烂-才浅)
/scripttemplate!-- son-component :modelValuesearchText update:modelValuenewVal searchText newVal/son-component --son-component v-modelsearchText/son-component
/template子组件script setup// NOTE 接受父组件传递的数据 - 接收数据有两种形式数组 对象defineProps({modelValue: {type: String,required: true}})
/scripttemplateinput typetext :valuemodelValue input$emit(update:modelValue, $event.target.value)
/template总结 vue3封装组件支持 v-model 的时候 父传子 :modelValue 传递数据子传父 update:modelValue 触发事件更新数据 vue2的 xxx.sync 语法糖解析 父传子:xxx子传父 update:xxx 在vue3.0 使用 v-model:xxx 代替。
