文章目录
一、表单操作
1.基于Vue的表单操作
- Input 单行文本
- textarea 多行文本
- select 下拉多选
- radio 单选框
- checkbox 多选框
2.表单域修饰符
- number:转化为数值
- trim:去掉开始和结尾的空格
- lazy : 将input事件切换为change事件
<input v-model.number="age" type="number">
二、自定义指令
1.自定义指令的语法规则
/*
自定义指令
*/
Vue.directive('focus', {
inserted: function(el){
// el表示指令所绑定的元素
el.focus();
}
});
自定义指令使用
<input type="text" v-focus>
2.带参数的自定义指令
/*
自定义指令-带参数
*/
Vue.directive('color', {
bind: function(el, binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
自定义指令使用
<input type="text" v-color='{color:"orange"}'>
3. 局部指令
var vm = new Vue({
el: '#app',
//自定义指令-局部指令
directives: {
focus: {
inserted: function(el) {
el.focus();
}
}
});
</script>
三、计算属性
1. 为何需要计算属性?
表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁
将复杂的逻辑放在计算器里。
2. 计算属性的用法
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao'
},
//计算器
computed: {
//自定义
reverseString: function(){
return this.msg.split('').reverse().join('');
}
}
});
</script>
计算属性与方法的区别:计算属性是基于依赖进行缓存的,而方法不缓存。
四、侦听器
1. 侦听器的应用场景
数据变化时执行异步或开销较大的操作
2. 侦听器的用法
<div id="app">
<input type="text" v-model.lazy='uname'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
uname: '',
},
//侦听器
watch: {
//名字要和侦听数据一样
//当侦听数据发生变化时
uname: function(val){
console.log("数据变化了")
}
});
</script>
五、过滤器
1. 过滤器的作用
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
自定义过滤器
Vue.filter(‘过滤器名称’, function(value){ // 过滤器业务逻辑 })
<div id="app">
<input type="text" v-model='msg'>
<!-- 使用过滤器 -->
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>测试数据</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
过滤器
1、可以用与插值表达式和属性绑定
2、支持级联操作
*/
//全局过滤器
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
//局部过滤器
filters: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
六、生命周期
1. 主要阶段
⚫ 挂载(初始化相关属性)
① beforeCreate
② created
③ beforeMount
④ mounted
⚫ 更新(元素或组件的变更操作)
① beforeUpdate
② updated
⚫ 销毁(销毁相关属性)
① beforeDestroy
② destroyed
2. Vue实例的产生过程
① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。(常用)
⑤ beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。