标签：添加 put htm ops ase java 使用 注意 ted
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:[‘${‘, ‘}‘] } );
未完待续。。。
标签：添加 put htm ops ase java 使用 注意 ted
原文地址：https://www.cnblogs.com/jlliu/p/9055854.html
