Vue-基础

Posted 2020-12-17 miao91

Vue常用特性：表单操作、自定义指令、计算属性、过滤器、侦听器、生命周期

表单操作：使用v-model进行双向绑定

• 表单操作分别有单行文本(text)、多行文本(textarea)、下拉多选(select)、单选框(radio)、多选框(checkbox)等；
• 提交可使用input:submit标签，form标签添加action属性，值为跳转的网站；提交按钮可以用.prevent来取消默认行为，使按钮不会跳转；
• 单行文本、多行文本：可使用v-model进行绑定，在data中绑定；
• 单选框：分别提供一个value值来辨认，同一组的绑定同一个v-model值，data中单选框用字符串，复选框用数组来表示；
• 下拉选项：分别给option标签提供一个value值来辨别，给select标签绑定v-model值，data中单选用字符串，多选用数组来表示(可以给select标签使用multiple属性)；
• 表单域修饰符：绑定v-model时可使用；
• number：转换为数值
• trim：去掉开始和结尾的空格
• lazy：将iniput事件切换为change事件

自定义指令：当内置指令不满足需求时，可自定义指令来使用；

• 自定义指令的语法规则：(全局指令)

/*不带参数的自定义指令*/
/*获取元素焦点*/
Vue.directive(‘focus‘,{     //‘focus‘定义名称
    inserted:function(el){  //inserted：钩子函数，被绑定元素插入父节点时调用；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‘}">  //第一种
<input type="text" v-color="msg">  Vue实例中：data：{color:‘orange‘}  //第二种

•  一个指令定义对象可提供多个钩子函数，具体可查询文档；
• 局部实例：上面例子都是在全局下编译的，其中自定义指令可写在实例内部；只能在它的作用域中使用；

/*自定义指令：获取焦点元素和改变背景颜色*/
directives:{
    focus:{
        inserted:function(el){
            el.focus();
        }
    },
    color:{
        inserted:function(el,binding){
                el.style.background = binding.value.color;
        }
    }
}

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

/*在实例中计算属性的用法*/
var vm = new Vue({
    computed:{
        reverseMsg:function(){
                return this.msg.split(‘‘).reverse().join(‘‘);
        }
    }
})

• 计算属性与方法的区别：计算属性基于它们的依赖进行缓存，而方法不存在缓存；即当你打开或执行实例时，计算属性就先执行完成，并将数据保存起来，而方法在调用时会重复执行；这样看使用计算属性能增加一些性能；
• 计算属性依赖就是data中的数据，当依赖中的数据发生变化，所对应的数据结果也会发生变化；

侦听器：侦听器在数据发生变化时，会立刻执行侦听器所绑定的方法，用于执行异步或开销较大的操作；

/*在实例中侦听器的用法*/
/*改变两个值的前后顺序，在数据发生变化时数值也能立即改变*/
/*firstName：第一个的值、lastName：第二个的值、fullName：两个按顺序排放后的值*/
var vm = new Vue({
    data:{
        firstName:‘xxx‘,
        lastName:‘aaa‘,
        fullName:‘xxx aaa‘
    },
    watch:{
        firstName:function(val){//val为变化之后的值
            this.fullName = val + ‘ ‘ + this.lastName;
        }，
        lastName:function(val){
            this.fullName = this.firstName + ‘ ‘ + val;
        }
    }
})

• 侦听器名字需要和数值名一致；上面例子也可以通过计算属性实现：

computed:function(){
    return this.firstName + ‘ ‘ + this.lastName;
}

 过滤器：可以格式化数据，比如字符串格式转化为首字母大写，日期为指定格式等；

/*自定义过滤器*/
/*全局指令*/
Vue.filter(‘过滤器名称‘,function(value){
    //业务逻辑
　　return //返回值 ;
})
/*局部指令(实例内)*/
filters:{
　　过滤器名称:function(value){
　　　　//业务逻辑
　　　　return //返回值
　　}
}

/*过滤器的使用*/
//其中upprt、lower、formatID都是过滤器
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :id="id | formatId"></div>

 　　其中过滤器也可以携带参数：

/*带参数的过滤器*/
Vue.filter(‘过滤器名称‘,function(value,arg1){
　　//value为过滤器传递过来的参数data，默认在第一个
})
/*过滤器的使用*/
<div>{{data | format(‘yyy-MM-dd‘)}}</div>

  生命周期：每个Vue实例建立时，都会经历一系列初始化过程，同时也会调用相应的生命周期钩子，钩子作为选项写入实例中，并且this指向是它调用的实例；

/*主要阶段*/

//挂载(初始化相关属性)
beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用
created：在实例创建完成之后被立即调用
brforeMount：在挂载开始之前被调用
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子

//更新(元素组件的变更操作)
beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子

//销毁(销毁相关属性)
beforeDestroy：实例销毁之前调用
destroyed：实例销毁之后调用