关于Vue的基础以及使用细节

组件使用细节点：

‘is’ 的用处

当我们使用Vue.component一个组件的时候、

有时候直接用会出代码上的bug

<table>
 <tbody>
	<!--这样才能符合HTML的，解决模板标签上出现bug的问题-->
	<tr is="row"></tr>
	<tr is="row"></tr>
	<tr is="row" ref="hhh"></tr>
 </tbody>
</table>

Vue.component("row",{
//在非根实例下定义的data必须是一个函数，每个组件的值都独立存在
data:function(){
return{
content:"this is a row"
}

},
template:`<tr><td>{{content}}</td></tr>`

})

　　

 

 

使用Vue在一般通过操作数据的方式来控制视图

但是在某些情况下，要操作dom

在节点上添加   ref=“xxx”

找到 用   this.$ref.xxx

　　<counter @change="hand1"  ref="one"></counter>
　　<counter @change="hand1" ref="two"></counter>
　　<div >{{total}}</div>

js：
methods：{
hand1：function（）{
this.total=this.$refs.one+this.$ref.two
}
}