一.基础指令

1.插值表达式

目标:在dom标签里,直接插入内容

• 语法
  • {{表达式}} # 可以是数据变量或表达式

2.v-bind

目标:给标签属性设置vue变量的值

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

3. v-on

目标:给标签绑定事件

• 语法
  • v-on:事件名="要执行的少量代码"
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"
  • 简写: @事件名="methods中的函数"

4. v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

-   无传参, 通过形参直接接收
-   传参, 通过$event指代事件对象传给事件处理函数

 #例
<a @click="one" ></a>
<a @click="two(10, $event)" ></a>
 methods: {
 one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }

5. v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

• 语法:

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

    • .stop - 阻止事件冒泡
    • .prevent - 阻止默认行为
    • .once - 程序运行期间, 只触发一次事件处理函数

@click.prevent.stop  # 阻止冒泡和默认行为

6. v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

• 语法:
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键

7. v-model

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

• 语法: v-model="vue数据变量"
• 双向数据绑定
  • 数据变化 -> 视图自动同步
  • 视图变化 -> 数据自动同步
• 演示: 用户名绑定 - vue内部是MVVM设计模式

本阶段v-model只能用在表单元素上
 下拉菜单要绑定在select上
  遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性

8. v-model修饰符

目标: 让v-model拥有更强大的功能

• 语法:
  • v-model.修饰符="vue数据变量"
    • .number 以parseFloat转成数字类型
    • .trim 去除首尾空白字符
    • .lazy 在change时触发而非输入时

9. v-text和v-html

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

• 语法:
  • v-text="vue数据变量"
  • v-html="vue数据变量"
• 注意: 会覆盖插值表达式

作用:都可以设置标签显示的内容
区别:
      v-text把值当成普通字符串显示
      v-html把值当做html解析

10.v-show和v-if

目标: 控制标签的隐藏或出现

• 语法:
  • v-show="vue变量"
  • v-if="vue变量"
• 原理
  • v-show 用的display:none隐藏 (频繁切换使用)
  • v-if 直接从DOM树上移除
• 高级
  • v-else使用

  <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>

11. v-for

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

• 语法
  • v-for="(值, 索引) in 目标结构"
  • v-for="值 in 目标结构"
• 目标结构:
  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
• 注意: v-for的临时变量名不能用到v-for范围外

想要谁循环就放到谁身上
# 解决v-for更新
覆盖原数组
# 更新某个值
this.$set(目标结构,位置,值)

12. 动态class

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

• 语法:
  • :class="{类名: 布尔值}"

13.动态style

目标: 给标签动态设置style的值

• 语法
  • :style="{css属性: 值}"

14.vue 过滤器 -定义使用

目的: : 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在插值表达式和v-bind表达式

可以传参和多用,{msg |过滤器1(参数)|过滤器2(参数)}

语法:

• 全局: Vue.filter("过滤器名", (值,参数) => {return "返回处理后的值"})
• 局部: filters: {过滤器名字: (值) => {return "返回处理后的值"}

15_vue计算属性-computed

目标: 一个数据, 依赖另外一些数据计算而来的结果

 #1. 普通写法
computed: {
"计算属性名" () {
    return "值"
  }
 }
 #2.完整写法
  computed: {
 "属性名": {
      set(值){}
      get() {return "值"}       
  }

16_vue侦听器-watch

目标: 可以侦听data/computed属性值改变 语法:
watch: {    "被侦听的属性名" (newVal, oldVal){           } }

17_vue侦听器-深度侦听和立即执行

目标: 侦听复杂类型, 或者立即执行侦听函数

语法:

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}