模板中会出现一些错误：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件使用中的细节</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<!--<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>-->
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',
{
template: "<tr><td>this is a row</td></tr>"
}
)
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
这是因为虽然符合Vue模板，但不符合H5规则，所以我们需要用到模板中的is属性。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件使用中的细节</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<!--<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<row></row>
<row></row>
<row></row>-->
<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: "#root"
})
</script>
</body>
</html>
网友评论