概述
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>“写在后面运行不成功。**弹出警告：
分离开后代码显得清晰多了。
最后
以上就是凶狠手机为你收集整理的Vue之组件分离写法(022)的全部内容，希望文章能够帮你解决Vue之组件分离写法(022)所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复