从零开始学VUE之组件化开发(组件分离写法)
组件分离写法
使用Script标签分离组件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<!--使用Script 标签抽取模板代码-->
<script type="text/x-template" id="cpn">
<div>this is script tab, type is 'text/x-template', id is cpn!</div>
</script>
<script>
Vue.component('cpn',{
// 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接
template: '#cpn'
});
const vue = new Vue({
el: '#app',
data: {}
})
</script>
</html>运行效果
使用Template标签分离组件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<!--使用Template 标签抽取模板代码-->
<template id="cpn">
<div>this is template tab, id is cpn!</div>
</template>
<script>
Vue.component('cpn',{
template: '#cpn'
});
const vue = new Vue({
el: '#app',
data: {}
})
</script>
</html>运行效果
作者：彼岸舞
时间：2021\06\02
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
