Vue.js——组件模板抽离的写法——2020.11.23

最新推荐文章于 2022-11-24 15:24:39 发布

Blockchain_KT

最新推荐文章于 2022-11-24 15:24:39 发布

阅读量413

点赞数 1

分类专栏： Vue.js-实战开发文章标签： Vue组件模板抽离 script标签 template标签 Vue.js

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110010417

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

组件模板抽离的写法

一丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/23 23:07-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <hr>
  <cpn1></cpn1>
</div>

<!--    1.script标签抽离,注意类型必须是text/x-template-->
<script type="text/x-template" id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容，Blockchain</p>
    <p>我是内容，Key</p>
  </div>
</script>
<!--2.template标签抽离-->
<template id="cpn1">
  <div>
    <h2>我是标题</h2>
    <p>我是内容，Blockchain</p>
    <p>我是内容，Key</p>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  // 1.注册一个全局组件
  Vue.component('cpn',{
    template:'#cpn'
  })

  Vue.component('cpn1',{
    template:'#cpn1'
  })

  const app = new Vue({
    el:"#app",
    data:{

    }
  })
</script>
</body>
</html>

二丶运行结果

在这里插入图片描述

——博观而约取，厚积而薄发——

Blockchain_KT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js——组件模板抽离的写法——2020.11.23

组件模板抽离的写法一丶案例代码二丶运行结果——博观而约取，厚积而薄发——一丶案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
复制链接

扫一扫