Vue常用特性

文章目录

*一、常用特性*

一、常用特性

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

1.1表单操作

用户的交互

基于Vue的表达操作

input单行文本textarca 多行文本select下拉多选radio单选框checkbox多选框 textarca 多行文本 需要multiple="true"来控制表单的默认跳转的组织行为<input type="submit" value="提交" @click.prevent='handle'>

二、表单修饰符

number:转化为数值trim:去掉开始和结尾的空格lazy:将input事件却换为change事件 <input v-model.number="age" type="number"></input>

自定义指令 自定义指令语法规则

vue.directive(‘focus’){ inserted:function(el){ //获取元素的焦点 el.focus(); } }

自定义指令用法

<input type="text" v-focus>

带参数的自定义指令

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

指令的用法

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

如果注册局部指令，组件也要接受一个directive的选项

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

计算属性

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

计算属性与方法的区别

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

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

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

侦听器的应用场景

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

需求分析：输入框输入姓名，失去焦点是验证是否存在，如果已经存在，表示重新输入，如果不存在，提示可以会使用。

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

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

自定义过滤器

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

过滤器的使用

<div>{{mag|upper}}</div> <div>{{mag|lower}}</div> <div>{{mag|formatId}}</div>

局部过滤器

filters:{ captitalize:function(){} }

带参的过滤器传递过来的指数

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

过滤器的使用

<div>{data|format('yyy-MM-dd')}</div>

生命周期 (主要阶段)

挂载（初始化相关属性） beforeCreate created beforeMount mounted 2.更新 （元素或者组件的更变操作） beforeUpdata updated 3.销毁 （销毁相关属性） beforeDestroy destroyed

#mounted 类型：function mounted el被新创新的vm.$c替换，并挂载到实例之后调用该钩子