tbody中无法直接使用组件？
<div id="root">
<table>
<tbody>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el: '#root',
data: {
},
methods:{
}
})
</script>
以上代码你以为会怎么渲染？一定是这样的对不对：
<div id="root">
<table>
<tbody>
<tr><td>this is a row</td></tr>
</tbody>
</table>
</div>
其实是这样的：
<div id="root">
<tr><td>this is a row</td></tr>
<table>
<tbody></tbody>
</table>
</div>
没错，组件被渲染到表格外面了。这是因为h5编码规范要求tbody里必须是tr，所以不能直接用row，Vue提供了一个is属性，通过is把tr转换成row就可以解决：
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>
同理，ul列表里最好也这么用：
<ul><li is="row"></li></ul>
select标签里的option也同理。
子组件里定义data时一定要采用函数方式
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
// 子组件
Vue.component('row',{
data: {
content: "this is content"
},
template:'<tr><td>{{content}}</td></tr>'
})
// 父组件
var vm = new Vue({
el: '#root'
})
</script>
如上代码是会报错的，因为子组件外面还有一个父组件，应该这么写：
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
// 子组件
Vue.component('row',{
data: function(){
return {content: "this is content"}
},
template:'<tr><td>{{content}}</td></tr>'
})
// 父组件
var vm = new Vue({
el: '#root'
})
</script>
Vue如何获取dom节点及其中的变量
<div id="root">
<div ref='hello' @click="handleClick">hello world</div>
<counter ref='one' @change="handleChange"></counter>
<counter ref='two' @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter',{
template:'<div @click="addNumber">{{number}}</div>',
data:function(){
return {
number:0
}
},
methods:{
addNumber:function(){
this.number ++
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#root',
data:{
total:0
},
methods:{
handleClick:function(){
// hello指代的就是ref='hello'的dom节点
alert(this.$refs.hello.innerHtml)
},
handleChange:function(){
this.total = this.$refs.one.number+ this.$refs.two.number
}
}
})
</script>
