Vue组件化的基本使用

水深无声 2022-10-29 05:23 259阅读 0赞

效果图：
在这里插入图片描述

组件化的基本使用步骤：
1、创建组件构造器对象
2、注册组件
3、使用组件
核心代码如下：

  1. <body>
  2. <div id="app">
  3.     <my-cpn></my-cpn>
  4.     <my-cpn></my-cpn>
  5. </div>
  6. <script src="../Vue_js/vue.js"></script>
  7. <script>
  8.     //创建组件构造器模板
  9.     const cpnC = Vue.extend({ 
  10.         template: '' +
  11.             '<div>' +
  12.             '<h2>标题</h2>' +
  13.             '<p>我的内容哈哈哈哈</p>' +
  14.             '</div>'
  15.     })
  16.     //注册组件
  17.     Vue.component('my-cpn', cpnC)
  19.     const app = new Vue ({ 
  20.         el: '#app',
  21.         data: { 
  22.             message: 'vue模板',
  23.         },
  24.         methods: { 
  26.         },
  27.     })
  28. </script>
  29. </body>

以上组件化的使用是全局组件，下图展示局部组件的创建方法：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 组件化开发

    Vue 组件化开发 什么叫做组件化 实例 什么叫做组件化 所谓组件化，就是把页面拆分成多个组件然后可重复利用，每个组件依赖的 CSS、JS、模板、图片

    比眉伴天荒比眉伴天荒/ 0 赞/ 96 阅读

    相关 Vue组件化应用构建

    组件化应用构建   组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽

    小鱼儿小鱼儿/ 0 赞/ 473 阅读