Vue指令超详细演示理解

一:插值表达式

将data中定义的数据显示到模板上。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）

 二:vue指令-v-for

功能

列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• 索引可以省略
• 目标结构可以是：数组 / 对象 / 数字

小结

1. v-for的功能是对标签进行循环生成
2. 快速把数据赋予到相同的dom结构上循环生成

三:vue指令v-text和v-html 

目的: 更新DOM对象的innerText/innerHTML

语法:

• v-text="vue数据变量"
• v-html="vue数据变量"

(较简单,重点掌握v-html)

代码运行后的效果 

小结

v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

 四:vue指令v-show和v-if

作用

控制标签的可见与不可见

语法

• <标签 v-show="vue变量" />
• <标签 v-if="vue变量" />

如果vue变量的值为true，就可见，否则就不可见。

原理

• v-show 用的display:none隐藏   (频繁切换使用)
• v-if  直接从DOM树上添加或移除

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-show="age > 18">我成年了</p>
      <p v-if="age > 18">我成年了</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15,
    }
  }
}
</script>

小结

• v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
• 注意无论变量是否为true还是false,它一定会创建元素的。
• v-if 会动态创建和删除元素。
• 在频繁的切换可见与不可见时，它的效率会低一点
• 如果变量的值为false,它将不会创建元素

特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">

五:vue指令v-if,v-else-if,else

最后运行显示结果为 一般  

六:vue指令v-bind

作用

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。

格式

bind：绑定。以前学习过，用它来改变this的指向

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>

v-bind指令有简写用法  : 冒号，例如：

<img :src="data数据">

一般在是在属性名的=里面写一个data中的数据项，  :属性名="数据项" 称之为：把x绑定在y属性上

示例代码如下:

 运行后显示(照片网上随意寻找,为了练习使用)

 七:v-on和methods

作用

给标签绑定事件

语法

1. <标签 v-on:事件名="要执行的少量代码" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件

示例代码:

运行后显示页面效果:

 this指向在methods内部访问数据。如 this.xxx

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件