Vue基础指令
v-text
- 把值作为文本插入到他所在的标签之间
- 会覆盖元素中原本的内容,但是 插值表达式: {{ }} 只会替换自己的这个占位符,不会吧整个元素的内容清空
- 推荐使用插值表达式 {{ }}
v-html
- 能解析标签符号
- 会覆盖元素中原本的内容
- .建议少用
v-bind
- 属性绑定 简写 :
- 可以绑定src class title 等属性
- 绑定的内容值可以是一个对象
v-on
- v-on:事件名="事件处理方法"
- 事件处理方法声明在methods对象里边，methods和el、data并列
- 事件绑定 可用于 click mouseover keyup keyenter ....
- 推荐简写 @
v-model 表单输入绑定
- v-model只能用在表单标签上, input, textarea, select
- 双向数据绑定：
表单用户输入改变引起data.message改变
data.message改变引起表单用户输入值的改变
- v-model是用来获取用户输入的
v-for
- v-for用来遍历数组并生成多个标签
- v-for作用在需要重复的元素上
- 语法 v-for="元素别名 in 数组" 或者 v-for="(元素别名,下标别名) in 数组"
- 在v-for作用的标签之间就可以用使用元素别名和下标别名
- in是固定的，不能变
v-if,v-else-if,v-else
- 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染
- v-else 以上的条件不满足时，添加所在有元素
- v-if 隐藏元素直接移除dom
v-show
- v-show隐藏元素通过改变元素css属性display:none
v-if v-show
- v-if 每次都会删除或创建元素
有较高的切换性能消耗
如果一个元素一直不会被显示, 推荐使用v-if
- v-show 只是切换元素 display:none 样式
有较高的初始渲染消耗
如果元素涉及到频繁切换, 推荐使用v-show
v-cloak
这个指令保持在元素上直到关联实例结束编译
和 CSS 规则如 `[v-cloak] { display: none }`一起用时
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
1. 添加了这个指令之后, Vue解析完后，会移除该指令
2. v-cloak和 display:none结合使用，可以隐藏未编译的{{}}语法
v-once
只渲染元素和组件 一次
后续data数据改变了不会再次触发数据更新渲染到页面上
v-pre
跳过这个元素和它的子元素的编译过程。
可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
