vue常用的指令

v-text​

更新元素的文本内容。

• 期望的绑定值类型：string

• 详细信息

  v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations ；

v-html​

更新元素的 innerHTML。

• 期望的绑定值类型：string

• 详细信息

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

v-show​

基于表达式值的真假性，来改变元素的可见性。

• 期望的绑定值类型：any

• 详细信息

  v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

v-if​

基于表达式值的真假性，来条件性地渲染元素或者模板片段。

• 期望的绑定值类型：any

• 详细信息

  当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

  可用于 <template> 表示仅包含文本或多个元素的条件块。

  当条件改变时会触发过渡效果。

  当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令 — 查看列表渲染指南详情。

v-else​

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。

• 无需传入表达式

• 详细信息

  • 限定：上一个兄弟元素必须有 v-if 或 v-else-if。

  • 可用于 <template> 表示仅包含文本或多个元素的条件块。

v-on​

给元素绑定事件监听器。

• 缩写：@

• 期望的绑定值类型：Function | Inline Statement | Object (不带参数)

• 参数：event (使用对象语法则为可选项)

• 修饰符：

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 在捕获模式添加事件监听器。
  • .self - 只有事件从元素本身发出才触发处理函数。
  • .{keyAlias} - 只在某些按键下触发处理函数。
  • .once - 最多触发一次处理函数。
  • .left - 只在鼠标左键事件触发处理函数。
  • .right - 只在鼠标右键事件触发处理函数。
  • .middle - 只在鼠标中键事件触发处理函数。
  • .passive - 通过 { passive: true } 附加一个 DOM 事件。

• 详细信息

  事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

  当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。

  当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

  v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。