从零开始学VUE之组件化开发(组件分离写法)

最新推荐文章于 2022-12-08 18:04:41 发布

十六夜之彼岸舞

最新推荐文章于 2022-12-08 18:04:41 发布

阅读量240

点赞数

文章标签： vue html js javascript 小程序

本文链接：https://blog.csdn.net/flowerStream/article/details/117503206

版权

组件分离写法

使用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

本文属于作者原创,未经允许,禁止转发

十六夜之彼岸舞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学VUE之组件化开发(组件分离写法)

组件分离写法使用Script标签分离组件代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js">...
复制链接

扫一扫