vue指令

本文参考官方文档

vue指令

指令：带有v-前缀的指令，代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

v-text

• 作用：更新元素的textContent，若只更新部分文本内容需要使用{{ Mustache }}插值。

<span v-text="msg"></span>

v-html

• 作用：更新元素的innerHTML。
• 注意：v-html不能用来复合局部模板，因为vue不是基于字符串的模板引擎。另外只对可信内容使用v-html，避免xss攻击带来重大危险。

<span v-html="html"></span>

v-show

• 作用：根据指令的表达式值的真假，切换元素的display css属性。当条件变化时，会触发过渡效果。
• 说明：v-show会让元素始终渲染并保留在DOM中，因为只是改变css属性display。

<h1 v-show="ok">Hello!</h1>

v-if

• 作用：根据指令的表达式值的真假渲染元素。

<h1 v-if="awesome">Vue is awesome!</h1>

v-else

• 作用：表示v-if的“else块”，不需要表达式，但必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div v-if="Math.random() > 0.5">
	Now you see me
</div>
<div v-else>
	Now you don't
</div>

v-else-if

• 作用：表示 v-if 的 “else if 块”。可以连续使用。必须紧跟在带 v-if 或者 v-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-for

• 作用：
  基于源数据（该数据类型可以是Array | Object | number | string | Iterable），进行多次渲染元素或模板块。该指令的值必须使用特定的语法alias in expression，为当前遍历的元素提供别名。

	<ul id="example">
		<li v-for="item in items">
			{{ item.id }}
		</li>
	</ul>
	
<script>
		var app = new Vue({

			el: '#example',
			data: {
				items: [
					{ text: "foo"},
					{ text: "bar"}
				]
			}
		})
	</script>

上面结果：

• foo
• bar

另外也可以为数组索引指定别名 (或者用于对象的键)：

	<div v-for="(item, index) in items"></div>
	<div v-for="(val, key) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。如果需要重新对元素进行排序，则需要使用 key 属性：

	<div v-for="item in items" :key="item.id">
		{{ item.id }}
	</div>

v-on

• 缩写：@
• 参数：event
• 修饰符
  • .stop -调用event.stopPropagation()。
  • .prevent -调用event.preventDefault()。
  • .capture -添加事件监听器时使用capture模式。
  • .self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调。
  • .native -监听组件根元素的原生事件。
  • .once -只触发一次回调。
  • .left -只当点击鼠标左键时触发。
  • .right -只当点击鼠标右键时触发。
  • .middle -只当点击鼠标中键时触发。
  • .passive -以{ passive: true }模式添加侦听器。
• 作用：绑定事件监听器。事件类型由参数指定。

v-bind

• 缩写： :

• 修饰符

  • .prop -被用于绑定DOM属性.
  • .camel -.camel -将 kebab-case 特性名转换为 camelCase.
  • .sync -语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器 -

• 作用：动态地绑定一个或多个特性，或一个组件prop到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写形式 -->
<img :src="imageSrc">

<!-- class绑定 -->
<div :class=" { red: isRed } "></div>
<div :class="[classA, classB]"></div>

<!-- style绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="{ styleObjectA, styleObjectB }"></div>

v-model

• 修饰符：

  • .lazy -取代input监听change事件。
  • .number -输入字符串转为有效的数字。
  • .trim -输入首尾空格过滤。

• 作用：在表单控件或组件上创建双向绑定。

v-slot

• 提供具名插槽或需要接收prop的插槽。