Vue之组件分离写法
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title>component03</title>
</head>
<body>
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<!--分离写法1-->
<script type="text/x-template" id="mycpn1">
<div>
<h1>我是方式1模板</h1>
</div>
</script>
<!--分离写法2-->
<template id="mycpn2">
<div>
<h2>我是方式2模板</h2>
</div>
</template>
<script>
Vue.component("cpn1", {
template: "#mycpn1"
})
Vue.component("cpn2", {
template: "#mycpn2"
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
发现：
`<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>`
**这个”<div></div>“写在后面运行不成功。**弹出警告：
分离开后代码显得清晰多了。
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
