Vue 常用特性

常用特性概览

（1）表单操作
（2）自定义指令
（3）计算属性
（4）侦听器
（5）过滤器
（6）生命周期

表单操作

• 基于 Vue 的表单操作

  
  
  
  

  ① Input 单行文本
  ② textarea 多行文本
  ③ select 下拉多选
  ④ radio 单选框
  ⑤ checkbox 多选框

  
  
  
  
  
  

• 表单域修饰符
  ① number：转化为数值
  ② trim：去掉开始和结尾的空格
  ③ lazy : 将input事件切换为change事件

  
  
  
  

自定义指令

• 为何需要自定义指令？
  内置指令不满足需求。

• 自定义指令的语法规则（获取元素焦点）

  
  

• 自定义指令用法

  
  

• 带参数的自定义指令（改变元素背景色）

  
  

• 带参数指令的用法

  
  

• 局部指令（本组件内有效）

  
  
  
  

计算属性

• 为何需要计算属性？
  表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。

• 计算属性的用法

  
  
  
  

• 计算属性与方法的区别
  （1）计算属性是基于它们的依赖进行缓存的
  （2）方法不存在缓存

  
  
  
  

侦听器

• 侦听器的应用场景
  数据变化时执行异步或开销较大的操作。

• 侦听器的基本用法

  
  
  
  

• 场景案例：验证用户名是否可用
  
  
  需求：
  输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。
  分析：
  ① 通过v-model实现数据绑定
  ② 需要提供提示信息
  ③ 需要侦听器监听输入信息的变化
  ④ 需要修改触发的事件
  参考代码：
  
  
  

过滤器

• 过滤器的作用是什么？
  格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。

  
  

• 自定义过滤器

  
  

• 过滤器的使用

  
  
  
  

  1、可以用与插值表达式和属性绑定
  2、支持级联操作

  
  

• 局部过滤器

  
  

• 带参数的过滤器

  
  
  使用
  
  
  格式化日期

  
      
      
  
  

      

          
{{date | format('yyyy-MM-dd hh:mm:ss')}}
      

      
      
  

生命周期

• 主要阶段
  挂载（初始化相关属性）
  ① beforeCreate
  ② created
  ③ beforeMount
  ④ mounted
  更新（元素或组件的变更操作）
  ① beforeUpdate
  ② updated
  销毁（销毁相关属性）
  ① beforeDestroy
  ② destroyed

• Vue 实例的产生过程
  ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
  ② created 在实例创建完成后被立即调用。
  ③ beforeMount 在挂载开始之前被调用。
  ④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
  ⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
  ⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
  ⑦ beforeDestroy 实例销毁之前调用。
  ⑧ destroyed 实例销毁后调用。

  
  
  
  

  
      
      
  

  
      
      

          
{{msg}}
          

          测试更新
          

          测试销毁