## is html5规定tbody里面必须是tr标签,否则是错误的.通过is. ul,ol,select都需要使用这种方式,否则出现bug. ``` <div id="app"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component('row',{ template:'<tr><td>this is a row</td></tr>' }) var vm = new Vue({ el: '#app', }) </script> ``` ## 子组件中的data不能是对象 ``` <div id="app"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component('row',{ data:function(){ //除了根组件,其他所有子组件中的data都必须是函数才行.因为子组件会被调用多次,每个子组件都应该有自己的数据.不会出现子组件互相影响的情况. return { content:'hello' } }, template:'<tr><td>{{content}}</td></tr>' }) var vm = new Vue({ el: '#app', }) </script> ``` ## 使用ref操作DOM 在开发中不可能完全不操作dom,所以vue提供了ref方法. ``` <div id="app"> <!--引用的名字叫hello--> <div ref="hello" @click="handleClick">hello world</div> </div> <script> var vm = new Vue({ el: '#app', methods:{ handleClick:function () { console.log(this.$refs.hello); //这里的$refs是所有的引用 } } }) </script> ``` ## $refs 求值 $refs就是全局添加了ref的引用.利用$refs.xxx就可以获取DOM元素 ``` <div id="app"> <counter ref="one" @change="handleChange"></counter> <counter ref="two" @change="handleChange"></counter> <div>{{total}}</div> </div> <script> Vue.component('counter', { data: function () { return { number: 0, } }, template: '<div @click="handleClick">{{number}}</div>', methods: { handleClick: function () { this.number++; this.$emit('change') } } }) var vm = new Vue({ el: '#app', data: { total: 0, }, methods: { handleChange: function () { this.total = this.$refs.one.number + this.$refs.two.number; } } }) </script> ```