VUE指令

这是一篇整合vue指令的博客。

---

v-text:

更新元素的文本内容。

官方文档：通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 文本插值（  {{}}  ） 代替。

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

自述：

textContent返回一个字符串或null。通过JS来操作，解析标签，将内容渲染

<div id="divA">This is <span>some</span> text!</div>

关于以上html代码：

let text = document.getElementById('divA').textContent;

可得到：

This is some text!

---

v-html：

更新元素的 innerHTML

v-html 的内容直接作为普通 HTML 插入HTML结构。

<div v-html="'<h1>Hello World</h1>'"></div>
把h1标签及其内容插入div标签中

开发中要注意：

1.在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值

2.在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style> 元素。

---

v-show：

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

通过修改CSS的display属性，来进行组件的显示与隐藏。

v-show的表达式真假改变并不会引起页面的 reflow重新渲染，因为它会在DOM一直保留此元素（不论是否被显示在页面）

<h1 v-show=“表达式” >Hello!</h1>

注：v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

---

v-if:

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

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

这里与v-show的使用方式类似，不同点就是v-show会将元素保留到DOM渲染中。

而v-if的真假性改变，则会引起每次重新渲染或者销毁元素，该元素不会被保留在DOM渲染中。

<h1 v-if="表达式">Vue</h1>

---

v-if,v-else-if,v-else:

与我们常用判断语句语法相同，三种指令构成一个区块。

<h1 v-if="表达式==1">AAA</h1>
<h1 v-else-if="表达式==2">BBB</h1>
<h1 v-else>CCC</h1>
表达式为1 渲染AAA 
表达式为2 渲染BBB
表达式为其他 渲染CCC 

---

v-for：

基于原始数据多次渲染元素或模板块。

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

=========================================
items : [
    {id:1,text:111},
    {id:2,text:222},
    {id:3,text:333},
    {id:4,text:444}
]

遍历传入的 items数组/对象等，将内容全部渲染。

以上代码便会渲染出4个div标签，标签内容分别为 111 222 333 444 

这里的key是指定一个唯一标识，为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key。

如果你的数据里面没有唯一标识，可以用下标index来代替。

v-for="(item,index) in items" :key="index"

---

v-on:

给元素绑定事件监听器，可以缩写成@

<button v-on:click="doThis"></button>

<button @click="doThis"></button>

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

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

回调函数可以通过event参数访问到原生事件的内容。

关于修饰符就不过多介绍。

---

v-bind与v-model:

内容比较多，参阅。

---

v-slot:

1.用于声明具名插槽,给插槽取一个名字

<template v-slot:header>
    Header content
  </template>

2.期望接收 props 的作用域插槽

<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

 具体请查看 文章

---

v-pre：

跳过该元素及其所有子元素的编译。

可以利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译+

<span v-pre>{{ this will not be compiled }}</span>

 如上内容会显示为：{{ this will not be compiled }}

---

 v-once：

仅渲染元素和组件一次，并跳过之后的更新。在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<span v-once>This will never change: {{msg}}</span>

 只会渲染一次span标签及其子元素 之后会把里面的内容作为静态内容 不会再渲染/更新数据。

---

v-cloak：

用于隐藏尚未完成编译的 DOM 模板。

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

我们在发送网络请求获取页面时，可能会出现渲染缓慢的情况，导致页面闪现。

这里就可以用v-cloak标签，让被渲染中的元素隐藏 ，待完成渲染后显示。

<div v-cloak>
  {{ message }}
</div>

直到编译完成前，<div> 将不可见。

---