定义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. 关于python接口测试connect error
			
    接口测试里如果报错出现 socket.gaierror: [Errno 8] nodename nor servname provided, or not known 或者 urllib3.excep ...
    
			
    2. 
						
  2. postgres服务安装，启动和配置
			
    安装以及启动 yum install readline-devel tar xf postgresql-11.1.tar.gz cd postgresql-11.1 ./configure --pre ...
    
			
    3. 
						
  3. css3-手把手 transform 小时钟
			
    学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签 的大概样子做好,效果如图: html代码如下: <div c ...
    
			
    4. 
						
  4. qt学习（三）：鼠标图标改变
			
    qt学习 (三):鼠标图标改变 当你进入一个美好的qt软件场景,比如游戏,电脑的黑白图标会让程序逊色不少, 1改图标要加光标的头文件, 2 载入光标图, 3 再设置改光标就可以了 1在头文件中加 #i ...
    
			
    5. 
						
  5. PHP copy() 函数
			
    定义和用法 copy() 函数复制文件. 该函数如果成功则返回 TRUE,如果失败则返回 FALSE. 语法 copy(file,to_file) 参数 描述 file 必需.规定要复制的文件. to ...
    
			
    6. 
						
  6. 初识sed和gwak
			
    一.sed编辑器 sed命令的格式如下: sed options script file 选项 -e script        在处理输入时,将script中指定的命令添加到已有的命令中 -f fi ...
    
			
    7. 
						
  7. element-ui 复选框,实现点击表格当前行选中或取消
			
    背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...
    
			
    8. 
						
  8. window10安装mysql-5.7.20-winx64.zip
			
    window10安装mysql--winx64.zip 原文 https://www.cnblogs.com/ericli-ericli/p/6916285.html D:\share\src\win ...
    
			
    9. 
						
  9. API参考文档
			
    Android 中文版:http://www.apiref.com/android-zh/index.html Bootstrap3 教程:http://www.apiref.com/bootstra ...
    
			
    10. 
						
  10. PHP处理地址匹配出省市区
			
    function handleAddress($address ='广东省深圳市龙华新区大浪街道同胜科技大厦'){ preg_match('/(.*?(省|自治区|北京市|天津市))/', $addr ...
    
			
    11.