vue生命周期(1.0及以下):
钩子函数:(插件自带)
created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
用户会看到花括号标记:
v-cloak 防止闪烁, 比较大段落
{{msg}} -> v-text
{{{msg}}} -> v-html
计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
computed:{
b:{
get:
set:
}
}
* computed里面可以放置一些业务逻辑代码,一定记得return
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
循环(1.0的版本,2.0中已经弃用):
v-for="value in data"
会有重复数据?
track-by='索引' 提高循环性能
track-by='$index/uid'
过滤器:
vue提供过滤器:
capitalize uppercase currency....
debounce 配合事件,延迟执行
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
filterBy 过滤数据
filterBy ‘谁’
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
-1 -> 倒序
# 自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
v-text
v-for
v-html
指令: 扩展html语法
自定义指令:
属性:
Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});
<div v-red="参数"></div>
指令名称: v-red -> red
# * 注意: 必须以 v-开头
自定义元素指令:(用处不大)
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
网友评论