Vue常用指令及用法（入门篇）

对于Vue的指令，官网是这么解释的：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

Vue官网对于指令的介绍

---

官网介绍

v-bind指令、v-on指令、v-model指令、v-for指令、v-text指令、v-html指令、v-pre指令、v-cloak指令、v-if指令、v-else-if指令、v-else指令、v-show指令、v-once指令、v-slot指令。

---

1、v-bind指令

v-bind可以接受一个参数，用于响应式更新HTML的属性的属性值，v-bind：可以缩写为：

<template>
  <div id="app">
    <a href='https://www.csdn.net/'>CSDN</a>
    <br> <!-- 用做换行 -->
    <a v-bind:href="url">v-bind</a>
    <br> <!-- 用做换行 -->
    <a :href="url">v-bind缩写</a><!--缩写-->
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      url: 'https://www.csdn.net/'
    }
  }
}
</script>

---

2、v-on指令

v-on可以用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用来绑定Vue中methods里的事件函数，v-on:可以缩写为@

<template>
  <div id="app">
    <button v-on:click="Click('第一次点击')">v-on点击事件</button>
    <br><!--用作换行-->
    <br><!--用作换行-->
    <button @click="Click('第二次点击')">v-on 缩写@点击事件</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      

    }
  },
  methods: {
      
      
    Click (val) {
      
      
      console.log('点击事件触发', val)
    }
  }
}
</script>

---

3、v-model指令

在表单控件或者组件上创建双向绑定，当数据变化视图同步更新，当视图更新数据也会同步更新。
原理是绑定value属性，监听input事件

<template>
  <div id="app">
    v-model：<input type="text" v-model="text">
    <br>
    v-model原理：<input type="text" :value="text" @input="inputChange">
    <p>text的值是:{
   
   {text}}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      text: '我是一个输入框'
    }
  },
  methods: {
      
      
    inputChange (e) {
      
      
      this.text = e.target.value // 获取输入框内容，对数据text重新赋值
    }
  }
}
</script>

---

4、v-for指令

基于源数据多次渲染元素或模板块。可以用来遍历数组、对象、字符串
vue中使用v-for循环时,应该添加key主键,作为唯一标识，使用key目的是为了高效的更新虚拟DOM。原理是在更新过程中通过key,可以精准判断两个节点是否是同一个,避免频繁更新元素,减少DOM操作,提高性能（涉及Vue的Diff算法）

<template>
  <div id="app">
    <p v-for="i in str" :key="i">{
   
   {i}}</p>
    <hr>
    <p v-for="(val,index) in arr" :key="index">{
   
   {val}}</p> 
     <!--通常情况下不建议使用下标index作为key值，如果只是用来展示数据，可以考虑使用-->
    <hr>
    <p v-for="val,key in obj" :key="key"> <!--也可以使用对象中的每一项作为key值，毕竟每一个成员都不相同-->
      <span>这一项的key值是{
   
   {key}}，他的value值是{
   
   {val}}</span>
    </p>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      str: 'abcdefg',
      arr: ['1', '2', '3', '4'],
      obj: {
      
       a: '一', b: '二', c: '三', d: '四' }
    }
  }
}
</script>

---

5、v-text指令

更新元素的 textContent。如果要更新部分的 textContent，需要使用 { { Mustache }} 插值。
相当于Js原生里面的innerText属性，但是无法解析标签，会被当做纯文本输出

<template>
  <div id="app">
     <p v-text="str"></p>
    <p id="text"></p>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      str: '<h1>我是一个p标签</h1>'
    }
  },
  mounted () {
      
       // Vue的生命周期钩子函数，从这开始可以获取到页面中的dom元素
    const p = document.getElementById('text')
    p.innerText = this.str
  }
}
</script>

6、v-html指令

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<template>
  <div id="app">
     <p v-html="str"></p>
    <p id="text"></p>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      str: '<h1 style=color:red;>我是一个p标签</h1>'
    }
  },
  mounted () {
      
       // Vue的生命周期钩子函数，从这开始可以获取到页面中的dom元素
    const p = document.getElementById('text')
    p.innerHTML = this.str
  }
}
</script>

---

7、v-pre指令

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
实际上就是标签里写的是什么就是什么，对内容没有影响

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

8、v-cloak指令

在使用{ {}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式{ {变量名称}}，然后才能看到具体的值，这样用户体验很不好。
v-cloak指令可以配合CSS的属性选择器 [v-cloak] { display: none }，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕再显示。

<template>
  <div id="app">
     <!-- <img :src="src" alt=""> -->
     <div v-cloak>{
   
   {message}}</div>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      message: 'this is a book'
    }
  }
}
</script>

<style lang="scss">
[v-cloak]{
      
      
  display: none !important;
}
</style>

---

9、v-if、v-else-if、v-else指令

v-if指令可以根据条件判断控制标签或组件的显示和隐藏
为true显示，为false隐藏，可以搭配v-else-if和v-else指令一起使用，相当于Js中的if语句
v-esle-if/v-else指令不能单独使用
v-if控制显示隐藏的原理就是将结果为false的标签从dom上直接移除

<template>
  <div id="app">
    <p v-if="number >= 95">优秀</p>         <!--成绩位于95-100-->
    <p v-else-if="number >=85">良好</p>     <!--成绩位于85-94-->
    <p v-else-if="number>=60">及格</p>      <!--成绩位于60-84-->
    <p v-else>不及格</p>                    <!--成绩位于0-59-->
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      number: parseInt(Math.random() * 101)
    }
  },
  created () {
      
      
    console.log('小明的分数是----->', this.number)
  }
}
</script>

---

10、v-show指令

根据表达式之真假值，控制元素的显示和隐藏，与v-if相似
但是v-show的工作原理是通过切换元素的 display属性是否为none，从样式上达到显示隐藏的效果
并且v-show只能单独使用，不能v-else-if，v-else一起使用

<template>
  <div id="app">
    <p v-show="boolean">只有为真，我才会显示</p>
    <button @click="change">切换</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      boolean: true
    }
  },
  methods: {
      
      
    change () {
      
      
      this.boolean = !this.boolean
      // 点击的时候将boolean切换为相反值
    }
  }
}
</script>

---

11、v-once指令

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

<template>
  <div id="app">
    <button v-once @click="add">+</button>
    <p v-once>{
   
   {num}}</p>
    <button @click="reduce">-</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data () {
      
      
    return {
      
      
      num: 1
    }
  },
  methods: {
      
      
    add () {
      
      
      this.num++
      console.log(this.num)
    },
    reduce () {
      
      
      this.num--
      console.log(this.num)
    }
  }
}
</script>

因为页面初始化的时候已经渲染过一次了，所以即便num在变化，但是页面也不会再去渲染而是跳过

---

12、v-slot指令

提供具名插槽或作用域插槽。可以缩写为#
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
当我们需要在父组件中展示子组件的数据时，需要在子组件内部通过插槽提前写好

父组件
<template>
  <div class="home">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
      
      
  name: 'HomeView',
  components: {
      
      
    HelloWorld
  }
}
</script>

子组件
<template>
  <div>
      <slot>{
   
   { sport.basketball }}</slot>
  </div>
</template>

<script>
export default {
      
      
  data () {
      
      
    return {
      
      
      sport: {
      
      
        basketball: '篮球',
        football: '足球',
        tabletennis: '乒乓球'
      }
    }
  },
}
</script>

此时页面中显示的是篮球
但是当我们想更换显示的内容的时候就需要用到v-slot作用域插槽的方式

父组件
<template>
  <div class="home">
    <HelloWorld>
      <template v-slot:default="type">
          {
   
   {type.sport.tabletennis}}   <!--通过v-slot获取子组件把暴露出来的数据，然后进行展示-->
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
      
      
  name: 'HomeView',
  components: {
      
      
    HelloWorld
  }
}
</script>

子组件
<template>
  <div>
      <slot :sport="sport">{
   
   { sport.basketball }}</slot>   <!--把sport对象暴露出去，使父组件可以通过作用域插槽获取-->
  </div>
</template>

<script>
export default {
      
      
  data () {
      
      
    return {
      
      
      sport: {
      
      
        basketball: '篮球',
        football: '足球',
        tabletennis: '乒乓球'
      }
    }
  }
}
</script>

此时父组件页面中显示的内容就可以按照需求来更换