第一条 : Vue基础指令

第一条

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 标签。跳过大量没有指令的节点会加快编译。