一些零零散散的知识点总结
v-for遍历数组,对象,字符串,指定次数
v-if做判断,隐藏(是否存在)
区别:对于元素只是一次可以选择使用v-if(消耗内存 ),操作次数多v-show(并没有销毁元素)
1.在vue2中,v-for优先级比v-if高
在vue3中,v-if优先级比v-for高
2、v-if和v-for不能同时使用
3、同时使用需要在外层嵌套盒子,在外层进行v_if判断, 在内层进行v-for循环
v-if判断和v-show显示隐藏
v-else和v-else-if判断注:使用v-else,v-else-if前必须有v-if
v-text和v-html,插值区别
1.v-text和v-html相同点:都会覆盖文本
不同点: v-text只读取文本,v-html读取标签
2.插值添加值,
注:不要在用提交时使用v-htm,不要在动态渲染时时使用v-html[v-cloak]{
display: none;
解决屏幕闪烁的问题,第一在标签上添加v-cloak,第二需要设置上面样式,是属性是class #是id
不要设置值的指令
v-else,v-cloak,v-once, v-pre
v-once设置了以后,更改值不会发生改变,优化性能v-pre设置了以后,会让插值和指令失效
v-bind:单向数据绑定:只能由data中的数据流向页面
v-mode|双向数据绑定:可以由data中的数据流向页面,也可以由页面(用户输入)流向data
事件修饰符、
1.prevent阻止浏览器默认事件
2.stop阻止冒泡事件
3.once只触发- -次
4.capture捕获模式打乱冒泡顺序(即可以理解为给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发
5.self阻止自身事件促发,但不会阻止冒泡,间接性有捕获效果
在冒泡事件中,点击设置了self的子类,坏会触发自身
点击设置了self本身是可以触发的
event.stopPropagation()阻止冒 泡
6.passiv;事件的默认行为立即执行,无需等待事件回调执行完毕;
v-model|修饰符
.lazy失去焦点后提交值
.number有效转换"1"== 1为数字
.trim清除前后空格
注:使用v-model时尽量使用v-model=""不要使用v-model:value=""只有在需要设置初始值才使用v-model:value=""
v-model.number有效转换"1"== 1为数字v-model.lazy失去焦点后提交值
事件:
1.whell鼠标轮滚动时触发但是要先处理完函数再滚动,可与passiv- 起scroll鼠标和滚动条滚动触发,会优先滚动滚动条
2.scroll鼠标和滚动条触发,会优先滚动滚动条
事件的基本使用:
1.使用v- onIxxx或@xx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3. methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象;5. @click=" demo”和@click="demo($event)”效果一 致,但后者可以传参;
回车=> enter | 删除=> delete.( 捕获“删除”和“退格”键) |
退出=> esc | 换行=> tab (特殊,必须配合keydown去使用) |
空格=> space | 上.=>.up/下.=>. down/左.=>.left /右.=>.righ |