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>

生命周期 (主要阶段)

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

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