vue指令总结

vue指令总结

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM.

一 文本指令

数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值,Mustache标签将会被替代为对应数据对象上的值.

1. v-text

• {{}}会将数据解释为普通文本,而非HTML代码

2. v-html

• {{}}会将数据解释为HTML代码

⚠️ 站点上动态渲染的HTML很容易导致XSS攻击.一般只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值

二 流程控制指令

1. v-show

• 值为Boolean/表达式/变量,带有v-show的元素始终会被渲染并保存在DOM中,通过display样式控制元素的显示与隐藏.有更高的初始渲染开销,如果需要非常频繁地切换,使用v-show较好

2. v-if

• 通过销毁和重建来实现元素的显示与隐藏.有更高的切换开销,如果在运行时条件很少改变,使用v-if较好

3. v-for

• 遍历数组、对象并渲染列表.使用item in items形式,items是原数据数组,item则是被迭代的数组元素的别名.类似于for in循环遍历。
  v-for还支持一个可选的第二个参数,即当前项的索引.

数组

<ul id="food">
  <li v-for="item in items" :key="item.name">
    {{ item.name}}
  </li>
</ul>

var example1 = new Vue({
  el: '#food',
  data: {
    items: [
      {name: '苹果' },
      {name: '香蕉' },
      {name: '葡萄' }
    ]
  }
})

结果:

· 苹果
· 香蕉
· 葡萄

对象

<ul id=""demo">
  <li v-for="(value, name, index) in object">
    {{index}}. {{name}}: {{ value }}
  </li>
</ul>

new Vue({
  el: '#demo',
  data: {
    object: {
      name: '小红',
      age: '17',
      sex: '女'
    }
  }
})

结果:

0. name: 小红
1. age: 17
2. sex: 女

⚠️ v-for渲染列表时，如果列表数据发生了变化，它默认使用“就地更新”的策略,即Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。也就是说默认的情况下Vue会尽量使用已经存在的DOM元素，直接在已有的DOM上进行复用修改，这样可以带来一定性能上的提升。给每项提供一个唯一的keyattribute.这样Vue就会根据最新的数据对DOM进行调整，而它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 可以简单认为key是给每一个DOM节点一个唯一标识，这样Vue就不会启用就地更新了。

<div v-for="(item, index) in items" :key="index">
   <!-- 内容 -->
</div>

三 事件指令

1. v-on(缩写“@”)

• 事件监听器

修饰符:

• 事件修饰符

.stop: 调用event.stopPropagation()阻止事件冒泡
.prevent: 调用event.preventDefault()阻止默认事件
.capture: 事件捕获
.self: 只有在event.target是当前元素自身时触发函数,如果是事件传递不执行
.once: 只触发一次回调
.passive: 滚动事件的默认行为(滚动行为)立即触发,对应addEventListener中的passive选项,可以提高移动端的性能

• 按键修饰符

.enter: 按回车键时回调
.tab:
.delete: 按删除和退格键时回调
.esc
.space
.up
.down
.left
.right

• 鼠标按键修饰符

.left
.right
.middle

四 属性绑定指令

1. v-bind(缩写“:”)

• 动态地绑定一个或多个attribute,或一个组件prop到表达式

绑定HTML Class

• 对象语法: 给:class传入一个对象,以动态的切换class

<div :class="{"blue":isBlue, "pink":isPink}"></div>

data:{
	isBlue: true,
	isPink: false
}

结果渲染为<div class="blue"></div>当isBlue或isPink变化时,class相应的更新.
绑定的数据对象不必放在内联定义的模版里:

<div :class="colorObject"></div>

data: {
	colorObject: {
		"blue": true,
		"pink": false
	}
}

渲染结果和上面一样

• 数组语法: 给class传入一个数组

<div :class="[color, activeClass]"></div>

data:{
	color: "blue",
	activeClass: "active"
}

结果渲染为<div class="blue active"></div>
也可以使用三元表达式:

<div :class="[color, isActive ? activeClass : ""]"></div>

当有多个class条件时略显繁琐,可以在数组语法中使用对象语法

<div :class="[color, {active: isActive}]"></div>

绑定内联样式

• 对象语法: 看着像css但其实是一个JavaScript对象

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

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

直接绑定到一个样式对象上:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

• 数组语法

<div v-bind:style="[color, fontSize]"></div>

五 双向绑定指令

1. v-model

• 在表单<input>、<textarea>、<select>元素上创建双向数据绑定

修饰符

• .lazy
• .number 将输入的字符串转为有效数字
• .trim 去掉首位空格

六 编译指令

1. v-pre

• 跳过这个元素及其子元素的编译过程

2. v-cloak

• 这个指令保持在元素上直到关联实例结束编译

3. v-once

• 只编译一次, 只渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过.优化更新性能