VUE学习笔记
事件操作技巧
阻止冒泡的三种方式
function中:
event.cancelBubble = true;
event.stopPropagation();
事件上:
@click.stop()
阻止默认事件
function中:
event.preventDefault();
事件上:
@click.prevent()
过滤器
vue内置过滤器
//写法
{{变量/方法 | 过滤器名称}}
过滤器名称有:
capitalize - 首字母变大写
uppercase - 所有字母变成大写
lowercase - 所有字母变小写
currency - 变成货币形式输出(美元)
currency -后可以跟两个参数,例如: currency ‘货币符号(默认$)’ ‘小数位数(默认2)’
pluralize -复数形式只是简单地在末尾添加一个 “s”。如果有多个参数,参数被当作一个字符串数组,对应一个、两个、三个…复数词。如果值的个数多于参数的个数,多出的使用最后一个参数。
debounce -延时,等待处理。默认是300毫秒,也可以自己定时。例如:debounce “5000”
limitBy -(通常用于循环)截取循环哪一段,第一个参数表示截取几个,第二个参数表示从第几位开始,例如 i in arr | limitBy 2 1。
filterBy -(通常用于循环)进行数据匹配筛选,匹配包含的字符。例如:i in arr | filterBy ‘sky’,筛选arr中包含sky的数据 或者 i in jsonarr | filterBy ‘h’ in ‘name’ ,在json数组中筛选name字段包含h的数据
orderBy 升序降序 orderBy 1 为升序,orderBy -1 为降序。例如:i in arr | orderBy 1 升序
自定义过滤器
Vue.filter('过滤器名称',function(val/**过滤数据,第一个数据默认为值,从第二个数据开始为传参*/){
/**
过滤方法
*/
});
Vue.filter('过滤器名称',(
read:function(){
/**读过滤*/
},
write:function(){
/**写过滤*/
}
));
实例
$mount(’’)
用来设定vue实例的作用域,但是级别没有内部的el高
$data
就是vue的data数据
$el
可以获取vue的作用域的控件对象
$options
获取vue的一些选项,包括自己设定的私有属性(自定义属性)
$log
可以查看vue的data信息,能看到所有data信息但无法读取修改
$destroy
清楚(杀死)vue实例
自定义指令
普通自定义指令调用 v-指令名
如果自定义指令中包含大写字母如readInfo,则调用时方法为v-read-info
Vue.directive('指令名',function(){
/**指令内容*/
this.el.style.color = 'red';
this.el.style.background = 'black';
this.el.onclick = function(){
this.style.color = 'green';
};
});
自定义属性
可以自定义属性标签
<属性名>内容</属性名>
Vue.elementDirective('属性名',{
bind(){
this.el.style.background='red';
}
});
Vue的生命周期
created() 实例创建
在Vue的生命周期中,Vue实例创建时会执行的函数
beforeCompile() 实例编译之前
在Vue的生命周期中,Vue实例编译之前会执行的函数(页面渲染之前)
compiled() 实例编译之后
在Vue的生命周期中,Vue实例编译完成后会执行的函数
ready() 实例插入文档时
在Vue的生命周期中,Vue实例插入文档中会执行的函数(Vue渲染完成后状态)
beforeDestroy() 实例销毁之前
在Vue的生命周期中,Vue实例销毁之前会执行的函数
destroyed() 实例销毁之后
在Vue的生命周期中,Vue实例销毁之后会执行的函数
Vue组件
全局组件
通常使用extend扩展组件。
let myDiv = Vue.extend({
template:`<h1>我是一个组件</h1>`
});
Vue.component('mydiv',myDiv); //在html部分使用<mydiv>调用
new Vue({
el:'body'
});
在组件中使用data时,不同于实例化Vue中的data, 组件中的data必须是个函数,如果想要输出内容调用使用时,需要使用return。