Vue知识总结
对data中数组增加内容
<div>{{ary[0]}}<div>
data:{
ary:[]
}
// 若我想向ary中添加属性 this.ary[0] = 1,然后this.ary[0] = 2; 页面数据不会变化，因为在data中定义ary，vue初始化过程中对data中属性进行监听，而后新增的属性就未受到监听。
// 应该这样添加属性
ary = [1];
ary.push(1);
Vue.set(this.ary,0,1);
vm.$set(this.ary,0,1)
// 7个数组变异方法均会受到vue的监控，pop push shift unshift splice reverse
对data中对象增加内容
<div>{{obj.name}}<div>
data:{
obj:{
age:22
}
}
// 错误新增属性：this.obj.name = 'zjx',页面不为所动
// 正确方式：
this.obj = {...this.obj,name:'zjx'}
this.obj = Object.assigns(this.obj,{name:'zjx'})
Vue.set(this.obj,'name','zjx')
vm.$set(this.obj,'name','zjx')
解决DOM 内模板的限制，例如：tbody中必须使用td标签
// 若出现这种情况
<table>
<tbody>
<row></row>
</tbody>
</table>
Vue.component('row',{
template:'<td>123</td>'
})
// 浏览器会报错，因为tbody中必须使用tr标签，vue渲染时并不会智能的判断组件里的td标签，而是直接判断是一个row标签，这是我们应该使用is属性
<table>
<tbody>
<tr is="row"</tr>
</tbody>
</table>
// 下面这些话引用vue文档原文，参考：
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
- 字符串 (例如：template: '...')
- 单文件组件 (.vue)
- <script type="text/x-template">
子组件data
子组件data是一个函数返回一个对象，原因是避免各个同子组件公用一套数据，造成数据相互影响。
避免在子组件中修改父组件传来的值
<child :content="{name:'zjx'}"></child>
// 若真的要修改,应该如此处理
Vue.component('child',{
props:['content'],
data:function(){
return {
newContent:this.content
}
},
created(){
this.newContent = {name:'zzjjxx'};
console.log(this.content === this.newContent); // false 不是一个引用地址空间
},
template:'<div>{{content.name}}{{newContent.name}}</div>'
});
// 页面显示 zjx zzjjxx
// 将传入子组件的属性重新拷贝一份给新属性，再在新属性上操作，两个属性已不指向同一个对象
