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>
生命周期
主要阶段
- 挂载(初始化相关属性)
- beforeCreate
- created
- beforeMount
- mounted
- 更新(元素或组件的变更操作)
- beforUpdate
- update
- 销毁(销毁相关属性)
- beforeDestory
- destoryed
Vue实例的产生过程
- beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
- created:在实例创建完成后被立即调用。
- beforeMount:在挂载开始之前被调用。
- mounted:被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
- beforUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。
- update:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
- beforeDestory:实例销毁之前调用。
- destoryed:实例销毁后调用。