黑马程序员技术交流社区

标题: 【上海校区】Vue常见的系统指令 [打印本页]

作者: wendyYao 时间: 2018-3-29 15:05
标题: 【上海校区】Vue常见的系统指令
本帖最后由上海分校-小影于 2018-3-29 15:13 编辑

vue是mvvm模式的，直接操作dom开销较大，先获取dom，修改里边的内容，但是用vue的话，直接视图和模型绑定，不管是视图的数据发生改变还是模型的数据发生改变，其都是关联的，不需要直接操作dom，效率更高。1、系统指令v-text和v-html

⚠️v-text和v-html的区别，v-html被插入的内容都会被当作html，但是对于没有html标签的数据绑定时作用同v-text和{{}}
⚠️使用v-html渲染数据可能会非常危险，因为它很容易导致XSS(跨站脚本)攻击，使用的时候需要谨慎。
2、系统指令v-cloak
v-cloak指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签知道实例准备完毕。通常用来防止{{}}表达式闪烁问题。

3、系统指令v-bind
可以给html元素动态的绑定一个或多个特性。

4、系统指令v-model以及双向绑定

使用场景：注册功能

5、系统指令-v-for

vue1.0和vue2.0的区别，两种方法的索引和值不一样。

6、系统指令-v-if和v-show的使用和区别
v-if和v-show都能够实现对一个元素的显示和隐藏的操作，但是v-if是将这个元素添加和移除到dom中，而v-show是在这个元素上添加style="display:none"和移除它来控制元素的显示和隐藏的

7、系统指令v-on

其他特殊事件行为

这些指令学完，你就可以做一个简单的小案例了喽！

image1.png (129.26 KB, 下载次数: 67)

image.png (151.02 KB, 下载次数: 59)

作者: 不二晨 时间: 2018-7-18 11:23
奈斯，优秀

作者: 吴琼老师 时间: 2018-7-18 14:34

作者: 摩西摩西OvO 时间: 2018-7-19 17:16

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2