首页 > 其他分享> 文章详细

Vuejs学习笔记(二)-1.组件的基本使用-全局组件

2021-07-02 15:00:46 阅读：149 来源： 互联网

标签：Vue cpn Vuejs 创建笔记注册使用组件

组件化开发是程序代码的分类复用，使用抽象的思想。

vue组件创建的基本方法如下：

1.创建组件构造器

2.注册组件

3.使用组件

这个是最原始的组件创建和使用的代码，后面会慢慢演化

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-vue组件的基本使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/2 14:43
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-vue组件的基本使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  3.使用组件-->
21   <my-cpn></my-cpn>
22 </div>
23 
24 <script src="../js/vue.js"></script>
25 <script>
26 
27   // 1.创建组件构造器对象
28   const cpn = Vue.extend({
29     template: `
30       <div>
31         <h2>我是标题</h2>
32         <p>我是内容</p>
33       </div>
34     `
35   })
36 
37   // 2.注册组件
38   Vue.component('my-cpn', cpn)
39   const app = new Vue({
40     el: '#app',
41     data: {
42       message: 'hello'
43     },
44   })
45 </script>
46 </body>
47 </html>

由于第二步骤，使用 Vue.component('my-cpn',cpn) 进行组件注册，在此处注册是全局组件。

标签：Vue,cpn,Vuejs,创建,笔记,注册,使用,组件
来源： https://www.cnblogs.com/invoker2021/p/14963294.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vuejs学习笔记(二)-1.组件的基本使用-全局组件