【VUE学习笔记】创建组件的三个基本步骤

最新推荐文章于 2023-08-10 11:35:27 发布

qq_33389919

最新推荐文章于 2023-08-10 11:35:27 发布

阅读量852

点赞数

分类专栏： VUE 文章标签：前端

本文链接：https://blog.csdn.net/qq_33389919/article/details/110918247

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建组件的三个基本步骤

1.创建组件构造器对象
2.注册组件
3.使用组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>

  <div>
    <div>
      <my-cpn></my-cpn>
    </div>
  </div>
</div>

<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
  })

  // 2.注册组件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_33389919

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【VUE学习笔记】创建组件的三个基本步骤

创建组件的三个基本步骤1.创建组件构造器对象2.注册组件3.使用组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">  <my-cpn></my
复制链接

扫一扫