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) 值,键,索引

学习心得

事情多的做不完了,需要做项目,还需要学习新知识,还要去看旧知识,不知道搞哪个。

评论