vue常用指令

常用指令

v-text

• 作用： 更新元素的 textContent

v-html

• 作用： 更新元素的 innerHTML

v-bind

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
语法：v-bind:title="msg"; 
简写：:title="msg"

v-on

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取

v-model

 作用：在表单元素上创建双向数据绑定

 说明：监听用户的输入事件以更新数据

v-for

• 作用：基于源数据多次渲染元素或模板块

v-if 和 v-show

条件渲染

• v-if：根据表达式的值的真假条件，销毁或重建元素

  v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

   <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
  

  类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
  当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南 以获取详细信息。

• v-show：根据表达式之真假值，切换元素的 display CSS 属性

  Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 元素，也不支持 v-else。

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()

• .prevent 阻止默认事件，调用 event.preventDefault()

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

key属性

 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。

 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

样式处理 -class 和 style

说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可

表达式的类型：字符串、数组、对象

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

js

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js

  data: {
      activeColor: 'red',
      fontSize: 30
    }

提升用户体验：v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

防止刷新页面，网速慢的情况下出现{{ message }}等数据格式

提升性能：v-pre

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

提升性能：v-once

说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。