一.使用is解决标签渲染中的小bug
1.如下代码，将表格中的<tr><td></td></tr>组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
//定义全局组件
Vue.component('row',{
template:`
<tr>
<td>啦啦啦</td>
</tr>
`
}),
new Vue({
el:'#app'
})
</script>
</body>
</html>
运行结果图示
image
乍一看是对的，但是细心的小伙伴会发现，组件row明明是引用在
tbody中，但是在运行之后会发现:组件解析到外面去了 这是一个bug
2.解决方法：
上出现的原因是因为在
html5中，tbody下必须为tr,如果是row就违背了html5的规范。那么我们就这样写：
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
使用is
运行结果图示：
image
这时候会发现<tr><td></td></tr>成功解析到tbody中了
3.其他可能会产生此bug的标签
- select
- ul
- ol
- 等等
二.组件中的data必须为function形式
因为根节点root只会被实例一次，而组件可能会多次调用，所以要用函数返回
data: function(){
return{
msg:'balabala'
}
}
简写为：
data(){
return{
msg:'balabala'
}
}
三.使用ref操作DOM
<div id="app" >
<div ref="hello" @click="handleClick">
hi
</div>
</div>
<script>
new Vue({
el:'#app',
data(){
return{
msg:'hello'
}
},
methods:{
handleClick(){
console.log(this.$refs.hello)
}
}
})
</script>
通过
this.$refs.ref的属性名来获取dom元素如果要获取里面的内容，则
this.$refs.ref的属性名.innerHTML
点击之后：
image
网友评论