关于小bug的处理及ref的运用

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属性,值为对象，在标签内设置ref=“名字”，可以通过this.$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，性能不佳。