定义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. Vue项目中导入excel文件读取成js数组
			
    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
    
			
    2. 
						
  2. mac终端命令--常用快捷键
			
    Ctrl + c        取消当前行输入的命令,进入下一行.或者中止一个错误的或者发疯的命令 Ctrl + a        光标移动到行首(Ahead of line),相当于通常的Home  ...
    
			
    3. 
						
  3. mangodb数据库
			
    阅读目录 一 简介 二 MongoDB基础知识 三 安装 四 基本数据类型 五 CRUD操作 六 可视化工具 七 pymongo 一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1. ...
    
			
    4. 
						
  4. Python--模块之time、random、os、hashlib
			
    今天开始模块. 首先补充 __init__.py       在python模块的每一个包中,都有一个__init__.py文件(这个文件定义了包的属性和方法)然后是一些模块文件和子目录,假如子目录中 ...
    
			
    5. 
						
  5. UNP学习 多播
			
    一.概述 单播地址标识单个接口,广播地址标识子网上的所有接口,多播地址标识一组接口. 单播和广播是编址方案的两个极端,多播的目的就在于提供一种折衷的方案. 二.多播地址 我们必须区分IPv4多播地址和 ...
    
			
    6. 
						
  6. 【Linux】【Fabric】在ubuntu容器中安装Fabric环境
			
    前言 想在docker容器中安装docker部署fabric网络,有了以下尝试. 尝试了centos镜像.redhat镜像都没解决docker容器中安装运行docker的问题,最后ubuntu成功了! ...
    
			
    7. 
						
  7. [NOIP模拟25]题解
			
    A.字符串 Catalan数不能再裸了 #include<cstdio> #include<iostream> #include<cstring> using na ...
    
			
    8. 
						
  8. 没有找到MSVCR110.dll,因此这个应用程序未能启动.重新安装应用程序可能会修复此问题
			
    问题: 在win7下用vs2012编译了一个exe放到xp上运行,弹出错误框"没有找到MSVCR110.dll,因此这个应用程序未能启动.重新安装应用程序可能会修复此问题" 解决办 ...
    
			
    9. 
						
  9. kali开启禁止或删除ssh 开机启动
			
    开启禁止或删除ssh 开机启动 # update-rc.d ssh enable #//开机启动 # update-rc.d ssh disable #//禁止开机启动 # update-rc.d - ...
    
			
    10. 
						
  10. 【狼】unity3d 安卓播放视频替代视频纹理
			
    http://www.cnblogs.com/zhanlang96/p/3726684.html 原创,有问题或错误的话希望大家批评指正 导出apk,是不能用电影纹理的,所以我们只能用这个办法 这个  ...
    
			
    11.