Vue的常用特性其实也是Vue语法的一部分,只是为了学习方便,所以单独拿出来进行说明,学习上也显得更清晰。
对于基础部分,可用参考官网上的介绍。
1、基于表单的操作
2、表单域修饰符
<input v-model.number="age" type="number" />
input事件输入的时候就触发,而change事件到失去焦点时才触发
1、为什么需要自定义指令?
内置指令不满足需求,关于内置指令可参考此处说明。
2、自定义指令的语法规则(获取元素焦点)
也可进入自定义指令的官网的地址查看详细说明。
Vue.directive('focus', {
inserted: function(el){
// 获取元素焦点
el.foucus();
}
})
3、自定义指令用法
<input type="text" v-focus />
4、带参数的自定义指令(改变元素背景色)
Vue.directive('color', {
bind: function(el,binding){
// 改变元素背景色
el.style.backgroundeColor = binding.value.color;
}
})
5、指令用法
<input type="text" v-color='{color:"orange"}' />
6、局部指令
局部指令是在组件中定义的,定义后只能在此组件中使用。而上面定义的全局指令可用在任何地方使用。
directives: {
focus: {
// 指令的定义
inserted: function(el) {
el.focus();
}
},
//可用定义多个局部指令
...
}
1、为何需要计算属性?
表达式的计算逻辑可能会比较复杂,使用计算属性可用使模板内容更加简介。
2、计算属性的用法
computed: {
reversedMessage : function (){
return this.msg.split('').reverse().join('')
}
}
<input type="text" value='{{reversedMessage}}' />
使用计算属性,直接使用函数名,不需要加小括号;计算属性是基于data中定义的数据的,如果数据改变了,计算属性也会改变;必须有返回值。
3、计算属性与方法的区别
1、侦听器的应用场景
数据变化时执行异步或开销较大的操作。
2、侦听器的用法
watch : {
firstName: function(val) {
// val表示变化后的值
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fulllName = this.firstName + ' ' + val;
}
}
3、案例场景
1、过滤器的作用是什么?
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等。
2、自定义过滤器
Vue.filter('过滤器名称', function(value) {
// 过滤器的业务逻辑
})
3、过滤器的使用
// 插值表达式
<div> {{msg | upper}}div>
// 级联处理,upper过滤器的结果作为lower过滤器的输入
<div> {{msg | upper | lower}}div>
// 属性绑定的值
<div v-bind:id="id | formatId">div>
4、局部过滤器
局部过滤器是在组件中定义的,定义后只能在此组件中使用。而上面定义的全局过滤器可用在任何地方使用。
filters: {
upper: function (val){
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
5、带参数的过滤器
Vue.filter('format',function(value, arg1) {
// value就是过滤器传递过来的参数,如下面的date,后面的参数才是需要处理的
})
6、使用方式
{{date | format('yyyy-MM-dd')}}
此部分内容也可参考官网说明了解更多内容。
1、 主要阶段
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
mouted
钩子函数被触发,表示页面已经初始化完成,模板已经存在。初始化页面数据可在此处完成。
2、Vue示例的生产过程
beforeCreate
:在示例初始化之后,数据观测和事件配置之前被调用。created
:在示例创建完成后别立刻调用。beforeMount
:在挂载开始之前被调用。mounted
:el
被新创建的vm.$el
替换,并挂载到实例上之后调用该钩子。beforeUpdate
:数据更新时调用,发生在虚拟DOM
打补丁之前。updated
:由于数据更改导致的虚拟DOM
重新渲染和打补丁,在这之后会调用该钩子。beforeDestroy
:实例销毁之前调用。destroyed
:实例销毁后调用。以上就是Vue的常用特性的简单介绍,以帮助对知识的巩固和梳理。也是对自己学习过程的一个小小总结。接下来将学习的是Vue的组件开发。