定义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. ubuntu下oracle 数据库安装
			
    环境:腾讯云 一. 由于腾讯云直接下载oracle太慢,先安装docker 1.sudo apt update 2.接下来,使用apt安装一些允许通过HTTPS才能使用的软件包: sudo apt i ...
    
			
    2. 
						
  2. idea创建ssm框架步骤
			
    打开idea 编辑器 File>new >project 选择Maven 右边勾选Create from archctype   然后下拉选择org.apache.maven.archet ...
    
			
    3. 
						
  3. 原生js和jquery
			
    $(document).ready(function() {//jquery的写法 }); (function () { //原生js的写法 })();
    
			
    4. 
						
  4. <自动化测试>之<Selenium API 的用法1>
			
    今天,简单,举例说一下在用python+selenium中元素定位的主要方法,第一部分是单个元素的操作,第二部分是一类元素的操作,实际操作中注意区分 #!/usr/bin/env python # - ...
    
			
    5. 
						
  5. 【运维】使用Serv-U搭建FTP服务器
			
    1.先安装好Serv-U,并作为系统服务安装 2.打开Serv-U,新建一个域 3.添加用户 4.解决阿里云专有网络的一个问题 遇到一个情景:需要使用Serv-U进行FTP更新软件,其中使用PASV的 ...
    
			
    6. 
						
  6. 如何把EXCEL数据导入到SQL SERVER数据库中 （转）
			
    转:http://blog.csdn.net/jjp837661103/article/details/13509889 在我们完成一个项目开发之后,通常我们需要把客户的很多数据导入到数据库中,面对大 ...
    
			
    7. 
						
  7. Java中Iterator用法整理
			
    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的I ...
    
			
    8. 
						
  8. Redis实战与分析
			
    楼主在实现一分布式存储系统时,拟采用Redis来做一个pull的过程来进行多机之间的数据拉取,于在此将redis安装部署过程分享一下,并学习波Redis的内部存储结构,Redis中间的hash环问题, ...
    
			
    9. 
						
  9. PAT甲级——A1154 VertexColoring【25】
			
    A proper vertex coloring is a labeling of the graph's vertices with colors such that no two vertices ...
    
			
    10. 
						
  10. DNS域名解析服务以及Bind服务程序
			
    一般来讲域名比IP地址更加的有含义.也更容易记住,所以通常用户更习惯输入域名来访问网络中的资源,但是计算机主机在互联网中只能通过IP识别对方主机,那么就需要DNS域名解析服务了. DNS域名解析服务( ...
    
			
    11.