Vue.js指令讲解

Vue.js指令讲解

v-text
将一段纯文本渲染到使用v-text的元素中。 且会覆盖标签内原有的内容。

渲染在指令所在的标签内

v-html
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

注：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。
只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-bind
用于动态地绑定一个或多个特性，或一个组件 prop 到表达式。

绑定class属性时：

绑定style属性时

**注：**在vue中，双引号中使用单引号的的变量将会被解析成字符串，所以" ‘px’ "表示是字符串。

v-model
用于双向数据绑定：当视图模型改变时，数据模型随之改变；当数据模型改变时，
视图模型随之改变；即为同步变化。

v-if
通过操作DOM创建与删除元素来 操作显示与隐藏；在切换时元素及它的数据绑定被销毁并重建。

注：

1. 渲染大量数据时严重消耗性能。
2. 涉及异步数据渲染时，用v-if。

v-show
通过添加 style="display:none"和移除它来控制元素的显示和隐藏

**注：**涉及到大量元素的切换显示与隐藏时，使用v-show，相比使用 v-if 消耗性能更小。