vue指令和特殊特性-CSDN博客

v-text

用于更新元素的纯文本。 v-text指令类似于“Mustache”语法 (双大括号)。看例子：

<h5>示例1：简单使用</h5>
v-text: <span v-text="message"></span>
<br>
差值：<span>{{message}}</span>

<h5>示例2：使用表达式</h5>
v-text: <span v-text="number + 1"></span><br>
差值：<span>{{number + 1}}</span>
复制代码

示例1：简单使用

v-text: Hello Vue! 
差值：Hello Vue!

示例2：使用表达式

v-text: 2
差值：2
复制代码

区别：如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h5>示例3：字符串拼接</h5>
v-text: <span v-text="'hello ' + msg"></span><br>
差值：<span>hello {{msg}}</span>
复制代码

示例3：字符串拼接

v-text: hello world
差值：hello world
复制代码

v-html

用于更新元素的 innerHTML。
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。

v-show

用于根据条件展示元素。

与v-if的区别：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show只是简单的切换display属性。

<!-- ok为false -->
<h5>示例1：display切换</h5>
v-show: <span v-show="ok">Hello</span>
<br>
v-if：<span v-if="ok">Hello</span>
<!--展现的元素-->
<span style="display: none;">Hello</span>
复制代码

v-if是惰性的，直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if支持使用template元素切换多个元素，v-show不支持。

<h5>示例2：v-if可以切换多个元素</h5>
<template v-if="ok">
  <h6>Title</h6>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<template v-show="ok">
  <h6>Title</h6>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
复制代码

执行结果如下：ok为false，v-if有效，v-show无效。

Title

Paragraph 1

Paragraph 2
复制代码

v-if，v-else，v-else-if

v-else前一兄弟元素必须有 v-if 或 v-else-if。
v-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

Array

可以使用item in items或item of items的格式

<h5>数组示例1：of</h5>
  <ul>
    <li v-for="item of items">
      {{ item.message }}
    </li>
  </ul>
  
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
复制代码

结果为：

数组示例1：of

Foo
Bar
复制代码

可以有item和索引index

<h5>数组示例2：</h5>
  <ul>
    <li v-for="(item, index) in items">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
复制代码

结果为：

数组示例2：

0 - Foo
1 - Bar
复制代码

Object

对象格式也可以和数组一样，使用of。对象还可以有key，键值。

<h5>对象示例3：</h5>
  <ul>
    <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  object: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  }
复制代码

结果为：

对象示例3：

0. firstName: John
1. lastName: Doe
2. age: 30
复制代码

number

也可以取整数。

<h5>number示例4：</h5>
  <div>
    <span v-for="n in 10">{{ n }} </span>
  </div>
复制代码

结果为：

number示例4：

1 2 3 4 5 6 7 8 9 10
复制代码

string

与number类似。

<h5>string示例5：</h5>
  <div>
    <span v-for="n in msg">{{ n }} </span>
  </div>
  msg: 'abc'
复制代码

结果为：

string示例5：

a b c
复制代码

v-on

监听事件

v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

<h5>示例1：直接写逻辑</h5>  
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>

<h5>示例2：事件处理方法</h5>
<button v-on:click="greet">Greet</button>

<h5>示例3：对象语法</h5>
<button v-on="{ mousedown: doThis, mouseup: doThat }">obj</button>
复制代码

v-bind

v-model

在文本区域插值并不会生效，应用 v-model 来代替。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-pre

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

<span v-pre>{{ msg }}</span>
msg: 'A'
复制代码

结果为：

{{ msg }}
复制代码

v-cloak

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

[v-cloak] {
  display: none;
}

<h5>不添加v-cloak</h5>  
<div>
  {{ msg }}
</div>
    
<h5>添加v-cloak</h5>
<div v-cloak>
 {{ msg }}
</div>

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000) 
复制代码

初始情况：

不添加v-cloak

{{ msg }}
添加v-cloak
复制代码

两秒后：

不添加v-cloak

hello
添加v-cloak

hello
复制代码

v-once

当数据改变时，插值处的内容不会更新。只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<h5>单个元素</h5>
差值：{{ message }}
<br>
<span v-once>v-once： {{ message }} </span>

<h5>有子元素</h5>
差值：
<div>
  <span>comment</span>
  <span>{{message}}</span>
</div>
<br>
v-once:
<div v-once>
  <span>comment</span>
  <span>{{message}}</span>
</div>

message: 'Hello Vue!'
复制代码

初始渲染结果为：

单个元素

差值：Hello Vue! 
v-once： Hello Vue!
有子元素

差值：
comment Hello Vue!

v-once:
comment Hello Vue!
复制代码

改变message为aaa,渲染结果为：

单个元素

差值：aaa 
v-once： Hello Vue!
有子元素

差值：
comment aaa

v-once:
comment Hello Vue!
复制代码

key

具体应用见：https://www.zhihu.com/question/61064119/answer/183717717

key的作用主要是为了高效的更新虚拟DOM

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

完整地触发组件的生命周期钩子
触发过渡

ref

用来给元素或子组件注册引用信息。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素;

<h5>示例1：普通DOM元素</h5>
<p ref="p">hello</p>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.p) // <p>hello</p>
    }
  )  
}
复制代码

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组。

<h5>示例2：和for结合使用</h5>
<ul>
  <li v-for="n in 10" ref="arr">{{ n }}</li>  
</ul>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.arr) // [li, li, li, li, li, li, li, li, li, li]
    }
  )  
}
复制代码

如果用在子组件上，引用就指向组件实例;

<h5>示例3：组件</h5>
<my-component ref="profile"></my-component>

created: function () {
  this.$nextTick(
    () => {
        console.log(this.$refs.profile) // VueComponent
    }
  )  
}
复制代码

ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！

created: function () {
 console.log(this.$refs.p) // undefined
 console.log(this.$refs.arr) // undefined
 console.log(this.$refs.profile)  // undefined 
}
复制代码

$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。应当避免在模板或计算属性中使用 $refs。

is

用于动态组件且基于 DOM 内模板的限制来工作。

动态组件(根据绑定的数据选择不同组件渲染)

<div id="app">
  <component :is="currentView"></component>
</div>

data: {
  currentView: 'home'
},
components: {
  'home': {
    template: '<div>home</div>'  
  },
  'posts': {
    template: '<div>posts</div>'  
  }  
}
复制代码

DOM内模板的限制

<h5>示例2：DOM内模板的限制</h5>
  <table>
    <tr is="my-row"></tr>  
  </table>
复制代码