条件
v-if
v-if 指令用于条件性地渲染一块内容. 这块内容只会在指令的表达式返回 truthy 值的时候被渲染.
v-show
v-show 指令也是用于根据条件展示一块内容. v-show 只是简单地切换元素的 CSS 属性 display.
v-if 与 v-show
v-if 有更高的切换开销, 而 v-show 有更高的初始渲染开销. 因此, 如果需要非常频繁地切换, 则使用 v-show 较好; 如果在运行时条件很少改变, 则使用 v-if 较好.
v-else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面, 否则它将不会被识别.
v-else-if
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后.
循环
v-for
可以用 v-for 遍历数组中的元素
两个参数: item - 数组元素 , index - 索引
- <ul>
- <li v-for="(item, index) in items">
- {{ parentMessage }} - {{ index }} - {{ item.message }}
- </li>
- </ul>
遍历对象中的属性
两个参数: value - 值 ,name - 键名
- <div v-for="(value, name) in object">
- {{ name }}: {{ value }}
- </div>
三个参数: value - 值 ,name - 键名 ,index - 索引
- <div v-for="(value, name, index) in object">
- {{ index }}. {{ name }}: {{ value }}
- </div>
也可以用 of 代替 in 作为分隔符
<div v-for="item of items"></div>
在进行遍历数据的同时需要为每项提供一个唯一 key 属性, 否则 vue 会有一个 warn 提示.
因为标记唯一的 key 属性能跟踪每个节点的身份, 从而重用和重新排序现有元素, 防止渲染错误.
事件
v-on
事件绑定监听器, 简写符号为 @.
用在普通元素上时, 只能监听原生 DOM 事件. 用在自定义元素组件上时, 也可以监听子组件触发的自定义事件.
修饰符
.stop- 调用 event.stopPropagation(). 阻止捕获和冒泡阶段中当前事件的进一步传播.
.prevent- 调用 event.preventDefault(). 阻止事件默认行为, 并不阻止事件传播
.capture- 添加事件侦听器时使用 capture 模式.
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调.
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调.
.native- 监听组件根元素的原生事件.
.once- 只触发一次回调.
.left- 只当点击鼠标左键时触发.
.right- 只当点击鼠标右键时触发.
.middle- 只当点击鼠标中键时触发.
.passive- 以 { passive: true } 模式添加侦听器
v-once
只渲染元素和组件一次. 如果一个组件中包含了大量静态内容, 就可以添加 v-once 指令来计算一次并进行缓存.
不要过度使用
属性
v-bind
动态地绑定一个或多个特性, 或一个组件 prop 到表达式. 简写为 :
修饰符:
.prop - 被用于绑定 DOM 属性 (property).
.camel - 将 kebab-case 特性名转换为 camelCase. 驼峰化
.sync 语法糖, 会扩展成一个更新父组件绑定值的 v-on 侦听器.
双向数据绑定
v-model
在表单控件或者组件上创建双向绑定.
修饰符:
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
其他
v-text
更新元素的 textContent. 如果要更新部分的 textContent, 需要使用 {{ Mustache }} 插值.
v-html
更新元素的 innerHTML
注意: 在网站上动态渲染任意 HTML 是非常危险的, 因为容易导致 XSS 攻击. 只在可信内容上使用 v-HTML, 永不用在用户提交的内容上.
v-pre
跳过这个元素和它的子元素的编译过程. 内部内容不会被编译, 会原样输出.
v-cloak
这个指令保持在元素上直到关联实例结束编译.
来源: http://www.bubuko.com/infodetail-3172624.html