20201015赵鑫
学习总结
vue中指令得本质就是自定义属性
v-cloak 解决闪动
1.提供样式
[v-cloak]{
display:none
}
2.在插值表达式中所在的标签中添加v-bloak
原理:先通过样式隐藏内容,然后在内存中进行值得替换,替换好之后再显示最终得结果
v-text不存在闪动问题,有更好得用户体验
v-html,插入html代码片段,但是使用该指令是非常危险得,容易导致XSS攻击,只在可信内容上使用v-html,永不再用户提交得内容上使用
原则:本网站内部数据可以使用,第三方得不行
v-pre跳过编译过程,显示原始信息
数据响应式
数据绑定:将数据填充到标签中
v-once:只编译一次,显示内容之后不再具有响应式功能
应用场景:如果显示得信息后续不需要修改,就可以使用v-once,可以提高性能
双向数据绑定
v-model
事件绑定-参数传递
v-on:click='num++'
@click='num++'
@click='fn'
如果事件直接绑定函数名称,那么会默认传递事件对象作为事件函数得第一个参数
2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数传递,并且事件对象得名称必须是$event
事件修饰符
.stop阻止冒泡
.prevent阻止默认行为
修饰符可以串联
注意,使用修饰符时,顺序很重要,响应的代码会以同样的顺序产生,因此
@click.prevent.self 会阻止所有的点击 而
@click.self.prevent 只会阻止元素对自身的点击
按键修饰符
.enter 回车键
.delete 删除键
@keyup.enter
自定义按键修饰符
Vue.config.keyCodes.f1 = 122
//属性绑定
v-bind:
简写为 :
样式绑定
class样式处理
对象语法
数组语法
[active,error]
在data里面定义active:'active',error:'error'
data里面可以直接定义数组放多个样式
也可以直接放对象
对象绑定和数组绑定可以结合使用
数组里面放对象
class绑定的值可以简化操作
默认的class如何处理
默认的class会保留
style样式处理
对象语法
数组语法
数组里面放对象或者单独的样式都可以
v-for(value,key,index) 值,键,索引
学习心得
事情多的做不完了,需要做项目,还需要学习新知识,还要去看旧知识,不知道搞哪个。
评论