vue踩坑
2024-10-22 10:40:31
1. 双向绑定的对象 改变或新增其属性 DOM不刷新问题
var obj = {
"attr1": "1",
"attr2": [2]
};
new Vue({
el: '#app',
data: {
obj: obj
},
methods: {
do: function(){
obj.attr1 = 10; //视图刷新
obj.attr2[0] = 20; //视图不刷新
obj.attr2.length = 0; //视图不刷新
obj.attr3 = 3; //视图不刷新
}
}
....
})
这是因为Vue 会在初始化实例时对属性执行 getter/setter 转化过程,并用computed来添加需要计算的属性,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
对象obj新增的attr3属性没有经过初始化的getter/setter转化,obj.attr3的双绑不会成功,必须用VUe的 set() 方法,
Vue.set( obj, "attr3", 3 ); //视图刷新
同时由于javascript的限制,直接用索引设置元素或者修改数组的长度,这两种变化都不能被检测到,要使用 $set() 或 vue 包装过的变异方法: push() pop() shift() unshift() splice() sort() reverse()
2.vue中使用props传值注意: camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
}) <!-- kebab-case in HTML -->
<child my-message="hello!"></child>
3.VUE与Nunjucks同时使用 定界符冲突 将定界符改成 ${} 形式
VUE1:
Vue.config.delimiters = ['${', '}'];
VUE2:
var vm = new Vue( {
el: '#app',
data: {
childrens: {
name: 'ljl',
age: 18,
sex: '女'
},
tdArray:["1","2"]
isShow:true
},
delimiters:['${', '}']
} );
未完待续。。。
最新文章
- C语言-两个库函数
- CentOS搭建VPN
- shell脚本实现随机筛选
- 上传文件时$_FILES为空的解决方法
- Windows下进程间通信及数据共享
- POJ1797 Heavy Transportation(SPFA)
- 关键词:ACM &; 大小端 &; 面试官
- Jedis 连接redis超时
- Tomcat &; Nginx
- Remark of BLENDFUNCTION from MSDN
- 图的遍历(bfs 和dfs)
- pageX,clientX,offsetX,layerX的那些事
- 测试同学难道要写一辈子的hello world?
- 【转】Mac OS X 上修改主机名
- uboot kernel 博客
- Android学习之基础知识四-Activity活动4讲(Intent传递数据)
- L2-027. 名人堂与代金券
- Ubuntu中安装和配置 Java JDK,并卸载自带OpenJDK(以Ubuntu 14.04为例)
- SQL Server 全文索引的硬伤(转载)
- WebSocket教程(二)