vue指令字典

VUE 字典

给标签设置vue属性值

1. v-bind:标签名=“vue属性值”
2. :标签名=“vue属性值”

给标签绑定事件

1. v-on:事件名=“要执行的少量代码”
2. v-on:事件名=“method中的函数名”
3. v-on:事件名=“method中的函数名(参数)”
4. @事件名=“method中的函数名”

阻止事件默认行为

1. 无参数传递

• 在method函数中设置函数名(e){e.preventDefault()}

2. 有参数传递

• 在对应$event参数@click="getEvent(5,$event)"设置函数名(...val,e){e.preventDefault()}

事件修饰符

修饰符	含义
.stop	阻止冒泡
.prevent	阻止默认行为
.once	只触发当前事件一次

按键修饰符

修饰符	含义
.enter	回车键
.esc	取消键

v-model

value属性和vue数据变量,双向绑定到一起

适用于表单标签

v-model="Vue数据变量"

• 双向绑定
  • 边量变化 -> 视图自动同步
  • 视图变化 -> 边量自动同步

下拉菜单的需要绑定到select标签上

遇到复选框,v-model的变量值
非数组 --> 关联的是复选框的checked的属性
数组 --> 关联的是复选框的value属性

v-model的修饰符

修饰符	含义
.trim	去掉输入框前后的空格
.number	转成数值型赋值给vue数据
.layz	在change是触发且内容改变

v-text和v-html

v-text	v-html
将属性赋值给标签	将属性赋值给标签
不会解析标签	解析HTML标签

v-show和v-if

作用

隐藏显示页面元素

用法

<template>
<div>
  <h1 v-show="ISshow">v-show盒子</h1>
  <h1 v-if="ISif">v-show盒子</h1>
</div>
</template>

<script>
export default {
  data() {
    return {
      ISshow:true, // true 显示  使用display:none  频繁切换
      Isif:false, // false隐藏  采用dom数直接移除  移除
    };
  },
};
</script>

指令	用法	原理	使用场景
v-show	true:显示,false隐藏	使用display:none隐藏	频繁切换
v-if	true:显示,false隐藏	从DOM树移除	移除

v-else : 高级用法

当不满足v-if的条件时,满足v-else条件时,v-if元素隐藏,v-else元素显示

<template>
<div>
  <h1 v-if="age<18">未成年</h1>
  <h1 v-else>已成年</h1>
</div>
</template>

v-for

目标

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

语法

1. v-for="(item,index) in 数据结构"

• item 值的变量名
• index 索引变量名
• 想要谁循环放到谁身上

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

• 目标结构:可遍历数组/对象/数字/字符串(可遍历结构)

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

数组调用变更方法,才会导致v-for更新,页面更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

数组非变更方法,返回新数组,就不会导致v-for更新,可采用覆盖数组或this.$set

• this.$set(参数1,参数2,参数3)
  • 参数一:数组
  • 参数二:要改的值
  • 参数三:要改的位置

v-for更新时, 是如何操作DOM的?

• 循环出新的虚拟DOM结构, 和旧的虚拟DOM结构对比, 尝试复用标签就地更新内容

v-bind给class标签设置动态的值

语法

:class="{ myclass: bool }"

• bool是个布尔值
  • 值为true,有类名
  • 值为false,无类名

未完待续…