1、关于标签混乱排列
<div id="app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//全局注册组件row
Vue.component("row", {
template: "<tr><td>hello world</td></tr>"
})
var app = new Vue({
el: "#app",
data: {
}
})
运行结果为:
问题描述:如图,虽然页面渲染出了预期想要的效果,但是elements的dom树上,创建的tr并没有在table、tbody标签内部。因为H5规定tbody内部必须放置tr。
处理方法:tbody下面放置tr,里面设置is=“row”属性
<table>
<tbody>
//tbody下面放置tr,里面设置is=“row”属性
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
2、ref的运用demo
运用一:
在vm上有
refs.名字获取该dom,从而对dom进行操作。
如下:在div上设置ref=“row”,点击操作通过this.$refs.row获取dom节点
<div id="app">
<div @click="getValue" ref="row">hello world</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
},
methods: {
getValue: function() {
console.log(this.$refs.row.innerHTML)//获取标签内的内容
}
}
})
运用二:
运用ref属性以及$emit实现数字之和
<div id="app">
<count @childnum="giveNum" ref="num1"></count>
<count @childnum="giveNum" ref="num2"></count>
<div>{{total}}</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//注册count组件
Vue.component("count", {
template: "<div @click='addNum'>{{num}}</div>",
data() {
return {
num: 0
}
},
methods: {
addNum: function() {
this.num++;
this.$emit("childnum")
}
}
})
var app = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
giveNum: function(value) {
console.log(this.$refs.num1);//可获取count组件
console.log(this.$refs.num2);
this.total = this.$refs.num1.num + this.$refs.num2.num;
}
}
})
如图:通过this.$refs.num1,可获得组件,并对组件进行操作,访问组件的num值。
缺点:反复操作dom,性能不佳。