Vue的常用特性

前言

---

1、表单操作

• input单行文本
• textarea多行文本
• select下拉多选
• radio 单选框
• checkbox多选框

2、表单域修饰符

• number：转换为数值
• trim：去掉开始可结尾的空格
• laze:将input事件切换为change事件

<input v-model.number="age" type="number">

3、自定义指令（内置指令不能满足需求）

• 自定义指令语法

Vue.directive('focus'){
inserted:function(el){
    //获取元素焦点
    el.focus();
    }
})

• 自定义指令语法

<input type="text" v-focus>

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

Vue.directive('color',{
        inserted:function(el,binding){
        el.style.backgroundColor=binding.value.color;
        }
})

• 指令的用法

<input type="text" v-color='{color:"orange"}'>

• 局部指令

directives: {
    focus:{
    //指令的定义
    inserted:function(el){
        el.focus()
        }
    }
}

4、计算属性

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

computed:{
    reversedMessage:function () {
        return this.msg.split('').reverse().join('')
    }
}

5、计算属性和方法的区别

• 计算属性是基于依赖进行缓存的
• 方法不存在缓存
  6、过滤器
• 作用
• 格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式
• 自定义过滤器

Vue.filter('过滤器名称',function(value){
    //过滤业务逻辑
})

• 过滤器的使用

<div>{{msg|upper}}</div>


<div>{{msg|upper|lower}}</div>


<div v-bind:id="id | formatId"></div>

• 局部过滤器

filters:{
    capitalize:function(){}
    }

• 带参数的过滤器

Vue.filter('format',function(value,arg1){
    //value就是过滤器传递过来的参数
}）

• 过滤器的使用

<div>{{date|format('yyyy-mm-dd')}}</div>

7、生命周期

• 挂载（初始化相关属性）
  （1）beforeCreate
  （2）created
  （3）beforeMount
  (4)mounted
• 更新（元素或组件的变更操作）
  (1)beforeUpdate
  (2)updated
• 销毁（销毁相关属性）
  (1)befordDestory
  (2)destoryed