Vue day - 02

1. Vue 常用特性
   1.1 常用特性概览
   • 表单操作
   • 自定义之灵
   • 计算属性
   • 侦听器
   • 过滤器
   • 生命周期

1.2 表单操作

• 基于Vue的表单操作
• a. input 单行文版
• b. textarea 多行文本
• c. select 下拉多选
• d. checkbox 多选框

1.3 表单域修饰符

• a. number 转化为数值
• b. trim 去掉开始和结尾的空格
• c. lazy 将input事件切换为change事件
• 代码验证：
• <input v-model . number = “age” type=“number”>

1.4 自定义指令
1. 为何需要自定义指令?
- 内置指令不满足请求
2. 自定义指令的语法规则 (获取元素焦点）
- 代码验证：
- Vue . directive(‘focus’ {
- inserted : function (el) {
- // 获取元素的焦点
- el.focus();
- }
- })
- -
- 3. 自定义指令用法
-<input type = “text” v-focus
- -
4.带参数的自定义指令(改变元素背景色)
Vue.directive(‘color’ , {
inserted : function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})
-
5.指令的用法
-<input type = “text” v-color="{color : “orange”}’>

6.局部指令
directives : {
focus : {
// 指令的定义
inserted: function (el) {
el.focus ()
}
}
}
-
4.4 计算属性
1. 为何需要计算属性？
-表达式的计算逻辑可能会比较复杂 ， 使用计算属性可以使模板内容更简化
2. 计算属性的用法
- computed: {
- reversedMessage : function(){
- return this.msg.split(’’).reverse().join
(’’)
}
}
3. 计算属性的方法与区别

• 计算属性是基于它们的依赖进行缓存的
• 方法不存在缓存
  –
  5.侦听器

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

2. 侦听器的用法
   – watch : {
   firstName: function(val){
   // val表示变化之后的值
   this.fullName = val + this.lastName;
   },
   lastName : function(val) {
   this.fullName = this.firstName + val;
   }
   }

   6. 过滤器
   • 1.过滤器的作用是啥呢?
   • 格式化数据 , 比如将字符串格式化为首字母大写 , 将日期格式化为指定的格式等
   • hello Vue 过滤器 Hello
   • 2. 自定义过滤器
   • Vue.filter(‘过滤器名称’ , function(value) {
   • // 过滤器业务逻辑
   • })
   • 3. 过滤器的使用
   • <div{{msg | upper}} </div
   • <div{{msg | upper | lower }} </div

• 8.生命周期
  • 1 . 主要阶段
  • a. 挂载 ( 初始化相关属性）
  • 1 beforeCrete
  • 2 created
  • 3 beforeMount
  • 4 mounted
  • b . 更新 (元素或组件变更操作）
  • 1 beforeUpdate
  • 2 updated
  • c. 销毁 ( 销毁相关属性）
  • 1 beforeDestory
  • 2 destoryed
    –
    2 . Vue是咧的产生过程
    核心：
  • mounted el 被创新的vm.$el替换 ， 并挂载到实例上去之后调用该钩子
    –
    案例 ： 补充知识 （数组相关API)
  1. 变异方法 （修改原有数据、
  • push ()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
    –
  2. 替换数组(生成新的数组）
  • fifter()
  • concat(）
  • slice()
  • 3 . 修改响应式数据
  • Vue.set(vm. items, indexOfltem, newValue)
  • vm.$(vm.items,indexOflterm,newValue)