Vue 经验总结
1、
1、data操作
添加:
1)数组 用push unshit 添加,用splice,pop 删除
2)直接obj.xx= 添加对象属性是不会更新到view的,需要用$set('objname',{}) 来修改对象。
新对象可以用:Object.assign({}, this.listobj, {show:!this.listobj.show }) 返回。
单属性添加可用this.$set('obj.name',value)
3)对于以有的字符串,数字可以直接修改
4)对于没有的基础类型,添加时用$set,虽然可以用,但是不推荐,vue会提示
5)对于数组对象,直接用下标添加对象属性是不会更新view的,可用$set('arr[0].tel',xxx)
6)对于数组对象,用push 添加对象元素是可以的
2、class 绑定
组件可以接受props传递过来的class 和bool值为添加类
:class="{openclass:openshow,focusclass:focusshow}" 四个参数都props传递
但是对于嵌套组件引用顶级传递值,多层嵌套组件传递后用以上方法会把openclass当成class值绑定,而不会去解析。
但是输出的this.openclass 是传递的值。
于是找到了另一个绑定方法 :class="[show?openclass:'',showfocus?focusclass:'']"。用三元表达式和数组
3、计算属性使用
对于简单的可用三元表达式,或简单操作符+这些来实现。计算属性用来做表达式无法实现的。
4、$dispatch
在写树组件时,会用到组件不定级嵌套使用,这时如需要点击时触发绑定的事件。
如果用v-on一直传递下去,组件内创建methods内部用$emit触发绑定的事件。这样也是可以实现的。但是组件使用时绑定的数据太多了。
这时就可以用派生,顶层绑定接收到v-on绑定的事件,在events上创建监听事件,接收参数和$emit触发事件。而嵌套的组件用派生来触发顶层上监听的事件。
5、动态绑定和静态绑定
对于传递classname字符串这些可以用静态 openclass="active" 以字符串形式传递。
组件接收到的是一个变量,如子组件需要就需要用:openclass="openclass" 传递了。
对于class传递意见用数组,这样可以传递多个类。这样传递时就需要:class="[]" 动态绑定了,以js解析它如是变量就引用组件上的值
动态也可以传递字符串:a="' '"
动态和静态的使用情况:
动态:对于传递数据需要动态的,如果子会修改数据就用.sync。如值页面和组件都会使用到就动态传递,对于个别的数组对象这些配置也可以用动态传递,在""内定义数组或对象来传递。
静态:它以字符串传递,解析成一个变量值为字符串再传递,它有来传递组件的配置信息不会和页面产生关系的。
静态属性呢,组件接收后也可以动态传递到子组件
6、创建动态值传递
组件在对数组对象操作时要识别对象,当然用id是可能的。但是不能保证所有传递的对象都有id呀。
所以需要为对象创建标识indexid 。可以用v-for循环时产生的$index,加上一些关键字。
7、组件内对dom操作
组件内减少对dom的操作这是真理。但有时就是需要,如组件获取页面宽高,设置组件样式等。
对于这些意见是在data上创建对象保存style。在标签上:style绑定。在ready内或方法内用js计算出值修改data style。
最好做到只修改数据,数据绑定到需要的地方。
8、style
在做项目时会遇到把动态背景绑定到style
:style="{backgroundImage:'url('+item.path+')'}"
动态绑定是必须的值是对象,键名用小驼峰vue会解析,如果是transform 还会添加上前缀
9、组件执行时需要触发或自动执行的方法。
组件开发尽量不要做ajax 来获取数据这些,因为如果页面中大量用组件就会发起很多请求。意见组件只接收数据。
还有一种情况需要触发执行方法,如在写上传组件时,iframe需要绑定load方法,这样呢在组件创建后iframe会触发一次事件。
这也是没办法的,只能在方法内做判断,return 回去不符合的。
var pre=event.target.contentWindow.document.body.querySelector('pre');
if(!pre){
return ;
}
10、组件的状态属性
组件内部的状态属性都在data上定义,传递状态也可以。目标就是组件状态组件data定义,所需参数props传递。
11、组件理想的状态
组件就是把单一功能,单一模块独立,可公用重复使用,降低耦合度。
就像boss说这件事交给你了,不要烦我了。组件也一样。
更多推荐
所有评论(0)