指令修饰符

按键修饰符

键盘回车监听

@keyup.enter

v-model修饰符

去除首尾空格

v-model.trim

转数字

v-model.number

事件修饰符

阻止冒泡

@事件名.stop

<div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

阻止默认行为

@事件名.prevent

<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>

v-bind 对于样式控制的增强

操作class

语法

class=“对象/数组”

对象

键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1 : 布尔值 , 类名2 : 布尔值 }"></div>

<div class="box" :class="{pink:true, big:ture}">你好</div>

适用场景：一个类名，来回切换

数组

数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="{ 类名1 , 类名2 , 类名3 }"></div>

<div class="box" :class="['pink','big']">你好</div>

注意：类名记得添加单引号' '

适用场景：批量添加或删除类

v-model 应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联，即快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

输入内容无空格

v-model.trim

<input type="text" placeholder="请输入科目"  v-model.trim="subject" />

输入内容转数字

v-model.number

<input type="text" placeholder="请输入分数" v-model.number="score" />

computed 计算属性

概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算

语法

声明在 computed 配置项中，一个计算属性对应一个函数

使用起来和普通属性一样使用 {{ 计算属性名 }}

计算属性 → 可以将一段求值的代码进行封装

computed:{

计算属性名(){

基于现有数据，编写求值逻辑

return 结果

}

}

computed:{
        totalCount(){
          let total=this.list.reduce((sum,item)=>sum+item.num,0)
          return total
        }
      }

computed与methods的区别

computed

计算出一个新属性，作为属性直接被使用

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

methods

给实例提供一个方法，调用以处理业务逻辑

语法

写在 methods 配置项中

作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名="方法名"

完整写法

计算属性默认的简写，只能读取访问，不能 "修改"

如果要 "修改" → 需要写计算属性的完整写法

computed:{
        计算属性名:{
          get(){
            计算逻辑
            return 结果
          },
          set(修改的值){
            修改逻辑
          }
        }
      }

watch侦听器

简单写法

简单类型数据，直接监视

data: {
        words: '苹果',
        obj: {
          words: '苹果'
        }
      },
      watch:{
        // 该方法会在数据变化时，触发执行
        数据属性名(newValue, oldValue) {
          一些业务逻辑 或 异步操作
        },
        '对象.属性名'(newValue, oldValue) {
          一些业务逻辑 或 异步操作
        }
      }

完整写法

添加额外配置项

deep: true 对复杂类型深度监视

immediate: true 初始化立刻执行一次handler方法

data: {
        obj: {
          words: '苹果',
          lang: 'italy'
        },
      },
      watch: {//watch 完整写法
        数据属性名: {
          deep: true,//深度监视
          immediate:true,//立即执行
          handler(newValue){//所有对象修改都会被监视到
            console.log(newValue);
          }
        }
      }

生命周期

概念

一个Vue实例从创建到销毁的整个过程

四个阶段

① 创建 ② 挂载 ③ 更新 ④ 销毁

初始化渲染

创建阶段之后（响应式数据）

操作dom

挂载阶段（渲染模板）

生命周期函数（钩子函数）

const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      //1.创建初期（准备数据）
      beforeCreate() {
        console.log('beforeCreate 响应式数据准备好之前')
      },
      created(){
        console.log('created 响应式数据准备好之后')//在此之后才能获取得到数据
      },
      //2.挂载阶段（渲染模板）
      beforeMount() {
        console.log('beforeMount 模板渲染之前',document.querySelector('h3').innerHTML)
      },
      mounted() {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
      },
      //3.更新阶段（更新数据）
      beforeUpdate() {
        console.log('beforeUpdate 数据更新之前,视图未修改',document.querySelector('span').innerHTML)
      },
      updated() {
        console.log('updated 数据更新之后，视图已修改',document.querySelector('span').innerHTML)
      },
      //4.销毁阶段（销毁实例）
      beforeDestroy() {
        console.log('beforeDestroy 实例销毁之前')
        console.log('清除掉一些Vue以外的资源占用');
        
      },
      destroyed() {
        console.log('destroyed 实例销毁之后')
      }
    })