Vue 常用指令

目录

1、Vue指令-v-bind动态属性

2、Vue指令-v-on事件绑定

3、Vue指令-v-on事件对象

4、Vue指令-v-on修饰符

5、Vue指令-v-on按键修饰符

6、Vue指令-v-model双向绑定1

7、Vue指令-v-model双向绑定2

8、Vue指令-v-model修饰符

9、Vue指令-v-html

10、Vue指令-v-show和v-if

11、Vue指令-v-for

12、v-for更新检测 和 key的作用

---

1、Vue指令-v-bind动态属性

• 语法：v-bind:属性名="vue变量"

• 简写：:属性名="vue变量"

把vue变量赋给一个标签属性

App.vue

  <template>
  <div>
    <!--- 语法：v-bind:属性名="vue变量"
        - 简写：:属性名="vue变量" 
      作用：标签的原生属性添加vue变量-->
          
    <a v-bind:href="url">点我去淘宝</a>
    <img :src="img" alt="" />
        
  </div>
</template>
​
<script>
export default {
   ------data函数return对象-------
  data() {
    return {
        //定义变量
      url: "http://www.taobao.com",
      img: "https://img0.baidu.com/it/u=2784489411,2330095372&fm=26&fmt=auto",
    };
  },
};
</script>
​
<style>
</style>

2、Vue指令-v-on事件绑定

给标签绑定事件

• 语法

  • v-on:事件名="methods中的函数"

  • v-on:事件名="methods中的函数(实参)"

• 简写: @事件名="methods中的函数(参数)"

<template>
  <div>
    <p>数量：{{ count }}</p>
    <button v-on:click="addFn">加1</button>
    <button v-on:click="addCountFn(5)">加5</button>
    <button @click="subFn">减1</button>
  </div>
</template>

<script>
export default {
  data() {
    // 变量（属性）
    return {
      count: 10,
    };
  },
  methods: {
    //方法
    addFn() {
      //this指向当前vue文件（组件）对象,webpack在运行打包时,会把data/methods里的变量名和方法名,统统加到this身上
      this.count++;
    },
    addCountFn(num) {
      this.count += num;
    },
    subFn() {
      this.count--;
    },
  },
};
</script>

3、Vue指令-v-on事件对象

vue事件处理函数中, 获取事件对象

语法:

• 无传参, 通过形参直接接收

• 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a href="" @click="one">无传参</a><br />
    <a href="" @click="two(10, $event)">有传参</a>
  </div>
</template>
​
<script>
//如何获取事件对象
export default {
  methods: {
    one(ev) {
      ev.preventDefault();
    },
    two(num, ev) {
      ev.preventDefault();
    },
  },
};
</script>
​
<style>
</style>

4、Vue指令-v-on修饰符

语法:

• @事件名.修饰符="methods里函数"

  • .stop - 阻止事件冒泡

  • .prevent - 阻止默认行为

可以链式调用.stop.prevent

<template>
  <div>
    <div @click="fatherFn">
      <button @click.stop="btnFn">.stop阻止冒泡</button>
      <a href="http://www.baidu.com" @click.prevent.stop="aFn"
        >.prevent阻止默认行为</a
      >
    </div>
  </div>
</template>
​
<script>
export default {
  methods: {
    fatherFn() {
      console.log("父级的单击事件触发了");
    },
    btnFn() {
      console.log("按钮的单击事件触发了");
    },
    aFn() {
      console.log("阻止默认行为");
    },
  },
};
</script>
​
<style>
</style>

5、Vue指令-v-on按键修饰符

给键盘事件, 绑定修饰符

语法:

@keyup - 监测键盘按键

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回esc按键

<template>
  <div>
    <input type="text" @keyup.enter="enterFn" /><br />
    <input type="text" @keyup.esc="escFn" />
  </div>
</template>
​
<script>
export default {
  methods: {
    enterFn() {
      console.log("触发keyup.enter按下了回车键");
    },
    escFn() {
      console.log("触发keyup.esc按下了esc键");
    },
  },
};
</script>
​
<style>
</style>

6、Vue指令-v-model双向绑定1

v-model作用： 把表单value值和Vue数据变量双向绑定

• 语法: v-model="vue数据变量"

• 双向数据绑定

  • 数据变化 -> 视图自动同步

  • 视图变化 -> 数据自动同步

双向：

表单标签的value 属性改变-同步给- vue变量

vue变量改变-同步给- value属性改变（视图更新）

<template>
  <div>
    <input type="text" v-model="text" />
    <input type="password" v-model="pass" />
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      text: "aa",
      pass: "",
    };
  },
};
</script>

7、Vue指令-v-model双向绑定2

• 在复选框使用(重点: 有区别)

• 在单选框使用

• 在文本域使用

v-model遇到复选框

vue变量 非数组类型 关联复选框的checked属性 （true/false值）

vue变量 数组类型 关联复选框的value属性值

<template>
  <div>
    <!-- 下拉表单select身上写<v-model>,option身上写value -->
    <select v-model="from">
      <option value="北京">北京市</option>
      <option value="上海">上海市</option>
      <option value="广州">广州市</option></select
    ><br />
​
    <!-- vue变量 非数组类型 关联复选框的checked属性 （true/false值）vue变量   数组类型 关联复选框的value属性值 -->
    <span>爱好：</span>
    <input type="checkbox" v-model="hobby" value="吃饭" />吃饭
    <input type="checkbox" v-model="hobby" value="睡觉" />睡觉<br />
​
    <span>单选</span>
    <input type="radio" name="s" value="nan" v-model="gender" />男
    <input type="radio" name="s" value="nv" v-model="gender" />女<br />
​
    <span>文本域</span>
    <textarea v-model="area"></textarea>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      from: "北京",
      hobby: [], //多选框的valu 用数组获取
      gender: "",
      area: "123",
    };
  },
};
</script>
​
<style>
</style>

8、Vue指令-v-model修饰符

给v-model扩展额外功能

注意：只要获取标签上的值，都是字符串

语法:

• 给v-model扩展额外功能

  • .number 以parseFloat转成数字类型再赋给vue变量

  • .trim 去除首尾空白字符

  • .lazy 等待change事件触发再同步数据 给vue变量

<template>
  <div>
    <span>年龄：</span>
    <input type="text" v-model.number="old" /><br />
    <span>一句话：</span>
    <input type="text" v-model.trim.lazy="text" />
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      old: 10,
      text: "",
    };
  },
};
</script>

9、Vue指令-v-html

v-html快速设置innerHtml属性值

• 语法:

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

• 注意: 会覆盖插值表达式

v-text和v-html：

共性：都可以设置标签的内容

区别：

v-text把值当成普通字符串

v-html把值当成标签进行解析

<template>
  <div>
    <p v-html="str">{{ code }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      code: "123",
      str: "我是innerHtml属性值,我能覆盖插值表达式内容",
    };
  },
};
</script>

10、Vue指令-v-show和v-if

使用一：控制标签显示或隐藏

• 语法:

  vue变量的值为：true显示/false隐藏

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show 用的display:none隐藏 (频繁切换使用)

  • v-if 直接从DOM树上移除

<template>
  <div>
    <p v-show="one">v-show控制标签的显示/隐藏</p>
    <p v-if="two">v-if也能控制标签的显示/删除</p>
    <div>
      <p v-if="age > 18">成年</p>
      <p v-else>未成年</p>
    </div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      one: true,
      two: true,
      age: 15,
    };
  },
};
</script>

使用二：2块便签，互斥显示v-if和v-else使用

11、Vue指令-v-for

v-for, 用数据循环生成标签

• 语法

  1、v-for="(值变量, 索引变量) in 目标结构"

  2、v-for="值变量 in 目标结构"

 key作用：提高更新的性能（索引）

每次遍历数组里每个值，创建一次当前所在标签结构每次遍历都是独立执行的

想让谁循环，就把v-for写在谁身上

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串

• 注意:

  v-for的临时变量名不能用到v-for范围外

  同级标签的key值不能重复

12、v-for更新检测 和 key的作用

这些方法会触发数组改变, v-for会监测到并更新页面：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新：

• slice()

• filter()

• concat()

总结: 改变原数组的方法才能让v-for更新。单独字面量修改不可以检测更新（使用$set() 方法可检测字面量修改更新）

key的作用：

1、:key是给v-for循环生成标签颁发唯一标识的，用于性能的优化

2、key的值要么用id,没有id用索引