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.侦听器
侦听器的应用场景 – 数据变化时执行异步或开销较大的操作
侦听器的用法 – watch : { firstName: function(val){ // val表示变化之后的值 this.fullName = val + this.lastName; }, lastName : function(val) { this.fullName = this.firstName + val; } }
过滤器
1.过滤器的作用是啥呢?格式化数据 , 比如将字符串格式化为首字母大写 , 将日期格式化为指定的格式等hello Vue 过滤器 Hello
自定义过滤器 Vue.filter(‘过滤器名称’ , function(value) {// 过滤器业务逻辑})
过滤器的使用 <div{{msg | upper}} </div<div{{msg | upper | lower }} </div
8.生命周期
1 . 主要阶段a. 挂载 ( 初始化相关属性）1 beforeCrete2 created3 beforeMount4 mountedb . 更新 (元素或组件变更操作）1 beforeUpdate2 updatedc. 销毁 ( 销毁相关属性）1 beforeDestory2 destoryed – 2 . Vue是咧的产生过程 核心：mounted el 被创新的vm.$el替换 ， 并挂载到实例上去之后调用该钩子 – 案例 ： 补充知识 （数组相关API)
变异方法 （修改原有数据、
push ()pop()shift()unshift()splice()sort()reverse() –
替换数组(生成新的数组）
fifter()concat(）slice()3 . 修改响应式数据Vue.set(vm. items, indexOfltem, newValue)vm.$(vm.items,indexOflterm,newValue)
