Vue指令

1内容渲染指令

1、v-text：innerText，设置标签体文本，覆盖标签原先内容。{{}}：插值表达式，是内容占位符，只能用在元素的内容节点中。

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

2、v-html：innerHTML，设置标签体子标签，渲染html内容

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

2条件渲染指令

1、v-show：display:none样式控制。适用于频繁切换状态
2、v-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>

3列表渲染指令

v-for：v-for 的优先级比 v-if 更高。key!=index

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

4事件绑定指令

v-on：绑定事件监听，简写为@。没有传参，默认可以接收到event

修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.once - 只触发一次回调。
@keyup.esc
@keyup.enter
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。

注意：event是原生的
event.currentTarget：监听事件绑定的元素
event.target：触发事件的元素

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- ** 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- **键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- **点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- **对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

5属性绑定指令

v-bind：动态绑定属性值。需要动态拼接，字符串外面加单引号。简写为:

修饰符：
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<!-- 绑定一个 attribute -->
<a v-bind:href="url">...</a>
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) ，其中key为js表达式-->
<button :[key]="value"></button>

<!-- **内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

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

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

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

6表单数据绑定指令

v-model：表单数据双向绑定。:value：单向

修饰符：
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
.lazy - 取代 input 监听 change 事件。change时更新而非input，即失去焦点才更新数据

7v-slot

vue中的slot