vue检测数据的原理
数组的常用方法:
push,pop,shift,unshift,splice,sort,reverse.
原理就是setter,vue生成每个属性的setter,
递归生成所有的getter,setter.
vue.set()的使用
动态生成属性,或者vm.$set(obj,'key','value'),两个api同样的效果
特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象（data等）添加属性
也可以使用vue.$set(obj,index,'value')
收集表单数据
过滤器
局部过滤器和全局过滤器
全局过滤器
Vue.filter('myfilter',function(value){
return value.slice(0,4)
})
时间的格式化显示
过滤器常用在插值语法中.
内置指令
v-text
- 向所在的节点渲染文本内容
- 与插值语法不同,v-text直接替换节点中的内容,{{}}不会.
v-html
开启cookie的http-only属性,防止盗用cookie
支持解析html元素
v-cloak
配合css样式display:none
v-once
v-pre
自定义vue指令
如实现v-big指令.
directives:{
big(element,binding){
//element是dom元素,binding是对应的绑定的变量的值
element.innerText=xx,
element.value
}
}
完整的写法,包含三个钩子函数.
big: {
bind(){
},
inserted(){
},
update(){
}
}
指令相关的回调,this都是window指令相关的回调,this都是window
全局自定义指令
Vue.directive('name',{})或者Vue.directive('name',function(){})
vue生命周期
模板字符串``
在destroy和beforeDestroy中调用方法后,相关视图不在更新.
组件
实现应用中局部功能代码和资源的集合
- 非单文件组件
一个文件中包含n个组件 - 单文件组件
Vue.extend({})
1.创建组件
2.注册局部组件
3.编写组件标签
注意事项
components中的name是组件默认名称.
vuecomponent:
原型属性
显式原型属性 函数.prototype
隐式原型属性 对象.__prototype__
单文件组件
不同版本的vue
ref属性
this.$refs.title
props属性
:age="18",绑定age为number类型.
- 简单声明
- 对数据类型进行限制
- 完整写法
props中定义的数据优先级高于data中的.先读取props,在读取data中的.
mixin引入
mixin的使用
mixins:[minxin]
局部混合
建立mixin.js,在需要用到的组件用import
全局混合
vue.mixin()
vue插件
Vue.user(abc)
局部样式
组件间传值
props适用于：
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
reduce条件统计
webstorage
包括localstorage和sessionstorage.
组件的自定义事件
- @自定义事件名="回调方法"
- this.$refs.stu.$on('事件名',回调方法)
时间只触发一次: this.$refs.stu.$once,或者@自定义事件名.once
解绑事件
this.$off('事件名'),
this.$off(['1','2'])解绑多个事件
this.$off(),无参数,解绑所有自定义事件
传递多个参数(x,...y) ,y可以接收多个参数
组件绑定原生时间@click.native="回调方法"
谁的事件谁触发.
全局事件总线
消息的订阅与发布
一种组件间通信的方式,适用于任意组件间通信.
- 订阅消息
- 发布消息
pub-sub js,第三方库
// 下一次dom解析完成后的回调api
this.$nextTick(function(){
this.$refs.input.focus()
})
动画
vue封装的过度和动画
transition标签,多个使用transition-group标签,且要key值
