Vue常用特性

Vue常用特性

1. 常用特性概览

• 表单操作
• 自定义指令
• 计算属性
• 过滤器
• 侦听器
• 生命周期

1.1 表单操作

1.1.1 基于Vue的表单操作

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

1.1.2 表单域修饰符

• number 转化为数值
• trim 去掉开始和结尾的空格
• lazy 将input事件切换为change事件

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

2. 自定义指令

2.1 自定义指令的语法规则

Vue.directive('focus', {
    inserted: function(el) {
        //el表示指令所绑定的元素
        el.focus();
    }
});

指令用法

<input type="text" v-focus>

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

Vue.directive('color', {
    bind: function(el,binding) {
        //根据指令的参数设置背景色
        //console.log(binding.value);
        el.style.backgroundColor=binding.value.color;
    }
});

指令用法

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

2.3 局部指令

directives: {
    color: {
        bind: function(el, binding) {
            el.style.backgroundColor = binding.value.color;
        }
    },
        focus: {
            inserted: function(el) {
                el.focus();
            }
        }
}

3. 计算属性

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

用法

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

计算属性与方法的区别

• 计算属性是基于它们的依赖进行缓存的
• 方法不存在缓存

4. 侦听器

4.1 应用场景

数据变化时执行异步或开销较大的操作

4.2 侦听器的用法

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

4.3侦听器应用场景

案例：验证用户名是否可用

1. 通过v-model实现数据绑定
2. 需要提供提示信息
3. 需要侦听器监听输入信息的变化
4. 需要修改触发的事件

侦听器案例

1. 采用侦听器监听用户名的变化
2. 调用后合接口进行验证
3. 根据验证的结果调整提示信息

methods: {
    checkName: function(uname) {
        //调用接口，但是可以使用定时任务的方式模拟接口调用
        var that = this;
        setTimeout(function() {
            //模拟接口调用
            if (uname == 'admin') {
                that.tip = '用户名已存在，请更换一个';
            } else {
                that.tip = '用户名可以使用';
            }
        }, 2000);
    }
},
    watch: {
        uname: function(val) {
            //调用后台接口验证用户名的合法性
            this.checkName(val);
            //修改提示信息
            this.tip = '正在验证...';
        }
    }

5.过滤器

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

5.1 自定义过滤器

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

5.2 过滤器使用

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc="msg|upper">ceshi</div>

5.3 局部过滤器

filters:{
    过滤器名称:function(val){
        //过滤器业务逻辑
    }
}

5.4 带参数的过滤器

案例：使用过滤器格式化日期

Vue.filter('format', function(value, arg) {
    if (arg == 'yyyy-MM-dd') {
        var ret = '';
        ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        return ret;
    }
    return value;
})；

6. 生命周期

6.1 主要阶段

挂载（初始化相关属性)

1. beforeCreate
2. created
3. beforeMount
4. mounted

更新（元素或组件的变更操作）

1. beforeUpdate
2. updated

销毁（销毁相关属性）

1. beforeDestroy
2. destroyed

7. 综合案例（图书管理）