vue3基础入门二-组件注册

小小婷几

已于 2022-02-03 18:29:44 修改

阅读量592

点赞数

分类专栏： VUE3学习笔记文章标签： vue.js javascript 前端

于 2022-02-03 18:23:44 首次发布

本文链接：https://blog.csdn.net/qq_40128375/article/details/122777648

版权

VUE3学习笔记专栏收录该内容

15 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
  <script>

    const HelloWorld = {
      data() {
        return {
          count: 0
        }
      },
      template: '<div>{{count}} <button @click="count+=1">增加</button></div>'
    }
    const app = Vue.createApp({
      components: { HelloWorld }, // 局部组件注册 建议大写字母开头、驼峰命名
      template: `<div>
        <demo class="red" name='1'/>
        <hello-world />
      </div>`,
      data(){
        return {
          msg: 'hello world',
        }
      },
      methods: {

      },
    })

    // 全局组件
    app.component('demo', {
      template: `<div >hello world</div>`
    })
    app.mount('#root')
  </script>
</body>
</html>

小小婷几

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3基础入门二-组件注册

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫

专栏目录