Vue基础——Vue常用特性

1、常用特性概述

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期
2、表单操作
基于Vue的表单操作：
　　input 单行文本
　　textarea 多行文本
　　select 下拉选择框
　　radio 单选框
　　checkbox 多选框

表单域修饰符：
　　number：转化为数值
　　　　<input v-model.number="age" type="text">
　　trim：去掉开始和结尾的空格（注意：无法去掉中间的空格）
　　lazy：将input事件切换为change事件（切换之后输入域的内容发生变化不再触发事件，只有当输入域失去焦点的时候才会触发事件）

3、自定义指令
为何需要自定义指令？
　　内置指令不满足要求
自定义指令的语法规则：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    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"}'>

局部指令：

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

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

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

计算属性与方法的区别：
　　计算属性是基于他们的依赖进行缓存的（如果数据不发生变化就不再计算，直接从缓存中取数据，反之则计算）
　　方法不存在缓存

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

watch:{
    firstName:function(val){
        //val表示变化之后的值
        this.fullName = val + this.lastName;
    },
    lastName:function(val){
        this.fullName = this.firstName + val;
    }
}        

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

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

过滤器的使用：

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id="id | formatId"></div>

局部过滤器：

filters:{
    capitalize:function(value){
        
    }
}

带参数的过滤器：

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

带参数过滤器的使用：

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

7、生命周期
主要阶段
　　挂载（初始化相关属性）
　　　　beforeCreate
　　　　created
　　　　beforeMount
　　　　mounted
　　更新（元素或组件变更操作）
　　　　beforeUpdate
　　　　updated
　　销毁（销毁相关属性）
　　　　beforeDestroy
　　　　destroyed
Vue实例的产生过程
　　beforeCreate在实例初始化之后，数据观测和事件配置之前被调用。
　　created在实例创建完成后立即被调用。
　　beforeMount在挂载开始之前被调用。
　　mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
　　beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
　　updated犹豫数据更新导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
　　beforeDestroy实例销毁之前被调用。
　　destroyed实例销毁后调用。