定义Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

全局组件定义的三种方式

  1. 使用 Vue.extend 配合 Vue.component 方法：

 var login = Vue.extend({
       template: '<h1>登录</h1>'
     });
     Vue.component('login', login);

  1. 直接使用 Vue.component 方法：

 Vue.component('register', {
       template: '<h1>注册</h1>'
     });

  1. 将模板字符串，定义到script标签种：

 <script id="tmpl" type="x-template">
       <div><a href="#">登录</a> | <a href="#">注册</a></div>
     </script>

同时，需要使用 Vue.component 来定义组件：

 Vue.component('account', {
       template: '#tmpl'
     });
注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

组件中展示数据和响应事件

  1. 在组件中，data需要被定义为一个方法，例如：

 Vue.component('account', {
       template: '#tmpl',
       data() {
         return {
           msg: '大家好！'
         }
       },
       methods:{
         login(){
           alert('点击了登录按钮');
         }
       }
     });

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

  1. 通过计数器案例演示

 <!DOCTYPE html>

 <html lang="en">

 ​

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 ​

 <body>

   <div id="app">

     <counter></counter>

     <hr>

     <counter></counter>

     <hr>

     <counter></counter>

   </div>

 ​

 ​

   <template id="tmpl">

     <div>

       <input type="button" value="+1" @click="increment">

       <h3>{{count}}</h3>

     </div>

   </template>

 ​

   <script>

     var dataObj = { count: 0 }

 ​

     // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1

     Vue.component('counter', {

       template: '#tmpl',

       data: function () {

         // return dataObj

         return { count: 0 }

       },

       methods: {

         increment() {

           this.count++

         }

       }

     })

 ​

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 ​

 </html>

因为对象是引用类型，虽然创建了多个组件，但是共享了同一个data数据，所以要把data定义成一个函数，return一个包含自己数据的对象，这样每个实例的data都是独享的。

使用components属性定义局部子组件

  1. 组件实例定义方式：

 <script>
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {},
       components: { // 定义子组件
         account: { // account 组件
           template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
           components: { // 定义子组件的子组件
             login: { // login 组件
               template: "<h3>这是登录组件</h3>"
             }
           }
         }
       }
     });
   </script>

  1. 引用组件：

 <div id="app">
     <account></account>
   </div>
												


											
Vue学习笔记【23】——Vue组件（组件的定义）的更多相关文章
	

    
						
  1. vue学习笔记（1）—— 组件化实现todoList
		
    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install  ...
    
		
    2. 
						
  2. 【Vue学习笔记】——   vue的基础语法 { }
		
    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button>  ...
    
		
    3. 
						
  3. vue学习笔记(二)vue的生命周期和钩子函数
		
    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
    
		
    4. 
						
  4. vue学习笔记：vue的认识与特点与获取
		
    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
    
		
    5. 
						
  5. Vue学习笔记之Vue组件
		
    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
    
		
    6. 
						
  6. Vue学习笔记（三）组件间如何通信传递参数
		
    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
    
		
    7. 
						
  7. vue学习笔记（五）— 组件通信
		
    关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...
    
		
    8. 
						
  8. Vue学习笔记之Vue指令系统介绍
		
    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
    
		
    9. 
						
  9. vue学习笔记—bootstrap+vue用户管理
		
    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
    
		
    10. 
						
  10. Vue学习笔记之Vue学习前的准备工作
		
    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. OpenCV常用基本处理函数（1）读写
			
    图像的基本操作 cv.imread()      读取图片 cv.imshow()     显示图片 cv2.imwrite()    保存图像 使用摄像头捕获实时图像 OpenCV 为这中应用提供了 ...
    
			
    2. 
						
  2. 关于LCN分布式事务框架
			
    基于LCN框架解决分布式事务 LCN官网 https://www.txlcn.org/ "LCN并不生产事务,LCN只是本地事务的搬运工" 兼容 dubbo.springcloud ...
    
			
    3. 
						
  3. Eclipse如何构建（普通web）Maven工程
			
    进行以下步骤的前提是你已经安装好本地maven库和eclipse中的maven插件了(有的eclipse中已经集成了maven插件) 一.Maven项目的新建 1.鼠标右键---->New--- ...
    
			
    4. 
						
  4. 【和孩子一起学编程】 python笔记--第一天
			
    [该随笔记录本人在阅读过程写的笔记和一些问题,格式比较随意,不定时更新] 由于该书使用的python版本为2.5,本人使用的为3.6. 第一章: 遇到的第一个问题: 1.3节 输出指令: print  ...
    
			
    5. 
						
  5. js 微信公众号网页用户授权，获取微信code，access_tocken,用户信息
			
    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...
    
			
    6. 
						
  6. Ververica Platform-阿里巴巴全新Flink企业版揭秘
			
    摘要:2019云栖大会大数据 & AI专场,阿里巴巴资深技术专家王峰带来“Ververica Platform-阿里巴巴全新Flink企业版揭秘”的演讲.本文主要从Ververica由来开始谈 ...
    
			
    7. 
						
  7. Android:关于onConfigurationChanged()的介绍（转）
			
    转载:http://www.cnblogs.com/bluestorm/p/3622444.html 从事Android开发,免不了会在应用里嵌入一些广告SDK,在嵌入了众多SDK后,发现几乎每个要求 ...
    
			
    8. 
						
  8. C#调PowerShell在SCVMM中创建虚拟机时，实时显示创建进度
			
    关于c#调用PowerShell来控制SCVMM,网上有很多例子,也比较简单,但创建虚拟机的过程,是一个很漫长的时间,所以一般来说,创建的时候都希望可以实时的显示当前虚拟机的创建进度.当时这个问题困扰 ...
    
			
    9. 
						
  9. HTML-参考手册: 颜色混搭
			
    ylbtech-HTML-参考手册: 颜色混搭 1.返回顶部 1. HTML 颜色混搭 混搭两种颜色,并查看效果: 选择颜色:     #FF0000   #0000FF   顶部颜色:        ...
    
			
    10. 
						
  10. PHP面试 MySQL创建高性能索引考点
			
    MySQL索引 MySQL索引的基础和类型 索引的基础:索引类似于书籍的目录,要想找到一本书的某个特定篇章,需要查找书的目录,定位对应的页码 存储引擎使用类似的方式进行数据查询,先去索引当中找到对应的 ...
    
			
    11.