Vue常用特征

Vue常用特性

表单操作

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

表单域修饰符

• number:转化为数值（输入框输入为字符串，该修饰符自动将输入字符串转为数值）

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

• trim:去掉开始和结尾的空格

<input type="text" v-model.trim = "info">

• lazy:将默认input（触发）事件切换为change(失去焦点）事件

<!-- 可以用在输入用户名失去焦点后判断该用户名是否可用 -->
<input type="text" v-model.lazy = "msg">

自定义指令

• 为什么需要自定义指令：内置指令不满足要求

语法规则：(例子：自动获取元素焦点)

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

• 用法

<!-- 页面刷新后，输入框自动获取焦点 -->
<input type="text" v-focus>

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

    <div id="app">
        <input type="text" v-color='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //自定义带参数指令
        Vue.directive('color',{
            bind:function(el,binding){
                //el:表示所绑定的元素
                //binding:一个对象
                el.style.backgroundColor = binding.value.color;
            }
        });
        var vm = new Vue({
            el:"#app",
            data:{
                msg:{
                    color:"red"
                }
            }
        });
</script>

局部指令(应用范围有限制)

        var vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    color: "red"
                }
            },
            // 局部指令
            directives: {
                color: {
                    bind: function (el, binding) {
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
                    inserted: function (el) {
                        el.focus();
                    }
                }
            }
        });

计算属性

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

    <div id="app">
        <!-- 需要将msg内容反转 -->
        <div>{{msg}}</div>
        <!-- 正常处理逻辑 -->
        <div>{{msg.split('').reverse().join('')}}</div>
        <!-- 增加模板可读性 -->
        <div>{{reverseString}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            // 计算属性
            computed:{
                reverseString:function(){
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

计算属性与方法的区别

• 计算属性是基于它们的依赖进行缓存的：计算结果缓存起来，只要计算值不变，再次调用不会再次执行函数，会直接返回计算结果
• 方法不存在缓存：每调用一次执行一次函数

侦听器

数据一旦发生变化就通知侦听器所绑定的方法

侦听器的应用场景

• 数据变化时执行异步或开销较大（比较耗时）的操作

侦听器的用法

        //分别输入姓、名 
        //实时显示拼接出的全名
        var vm = new Vue({
            el: '#app',
            data: {
                firstName:'Jim',
                lastName: 'Green',
                fullName: 'Jim Green'
            },
            // 监听属性
            watch:{
                firstName:function(val){
                    this.fullName = val + ' '+ this.lastName;
                },
                lastName:function(val){
                    this.fullName = this.firstName + ' '+ val;
                }
            }
        });

过滤器

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式等

自定义过滤器

例子：首字母大写

Vue.filter('upper',function(val){
    // upper:自定义过滤器名称
    // val:拿到的数据
    return val.charAt(0).toUpperCase()+val.slice(1);
});

过滤器用法

<div>{{msg|upper}}</div>
<!-- 可以叠加使用：前一个处理器的返回值传入下一个过滤器 -->
<div>{{msg|upper|lower}}</div>
<!-- 可以绑定属性使用 -->
<div v-bind:id='msg|upper'></div>
<!-- msg:"hi" dom中：<div id="Hi"></div> --> 

局部过滤器(应用范围有限制)

        var vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    color: "red"
                }
            },
            // 局部过滤器
            filters:{
                upper:function(val){
                    return val.charAt(0).toUpperCase()+val.slice(1);
                }
            }
        });

带参数的过滤器

• 语法(例子：规定日期格式)

// <div>{{date|format('yyyy-MM-dd')}}</div>
Vue.filter('format', function (value, arg) {
    //value就是过滤器传递过来的参数 
    if(arg=='yyyy-MM-dd'){
        var res = '';
        res += value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate();
        return res;
    }
});

• 使用

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

生命周期

主要阶段

• 挂载（初始化相关属性）

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

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

1. beforUpdate
2. update

• 销毁（销毁相关属性）

1. beforeDestory
2. destoryed

生命周期图示

Vue实例的产生过程

1. beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
2. created：在实例创建完成后被立即调用。
3. beforeMount：在挂载开始之前被调用。
4. mounted：被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
5. beforUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
6. update：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestory：实例销毁之前调用。
8. destoryed：实例销毁后调用。