vue-组件模板抽离

最新推荐文章于 2024-01-04 11:39:39 发布

非著名奶茶爱好者

最新推荐文章于 2024-01-04 11:39:39 发布

阅读量452

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46398446/article/details/111866068

版权

vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

说明

把template模板单独抽离出来，将模板内容写在模板标签中，注意要写id。在Vue.component的template中可以直接写模板标签中的id。使代码更整洁规范。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
    <ul>
        <cmp></cmp>  <!--引用多次模板-->
        <cmp></cmp>
        <cmp></cmp>
        <cmp></cmp>
    </ul>
</div>
<!--模板-->
<template id="cmp">
        <li>
            <h3>我是标题</h3>
            <h4>我是副标题</h4>
            <p>我是内容啦啦啦啦啦啦</p>
        </li>
</template>
<script>
    Vue.component("cmp",{
        template: '#cmp'
    })

    /*let(变量)const(常量)*/
    const app = new  Vue({
        el: '#app', //用于挂载要管理的元素
        data: {  //定义数据
            message: 'hello world',
        }
    })
</script>
</body>
</html>

页面效果如下

非著名奶茶爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-组件模板抽离

说明把template模板单独抽离出来，将模板内容写在模板标签中，注意要写id。在Vue.component的template中可以直接写模板标签中的id。使代码更整洁规范。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="js/vue.js
复制链接

扫一扫

专栏目录