定义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. 割点的tarjan算法模板
			
    基本思路: 朴素的思想是删除每一个点,然后去dfs,这样无疑会爆炸 换一种思路,怎样判断是割点呢,如果是根节点的话毫无疑问只要看子树的数目,但是如果不是根节点呢,不知大牛是怎样想到的 利用两个数组df ...
    
			
    2. 
						
  2. spring 获取url参数
			
    1. usl格式: http://localhost:8080/contact/delete/3 java代码 @RequestMapping(value="/delete/{id}&quo ...
    
			
    3. 
						
  3. OpenCV常用基本处理函数（2）图像基本操作
			
    可以根据像素的行和列的坐标获取他的像素值.对 BGR 图像而言,返回值为 B,G,R 例如获取蓝色的像素值: img=cv2.imread('messi5.jpg')px=img[100,100]bl ...
    
			
    4. 
						
  4. delphi 删除文件夹里面的所有文件
			
    1.新增一个函数 function TForm1.DelDirAll(aDir: string): Boolean;varvSearch: TSearchRec;vRet: integer;vKey: ...
    
			
    5. 
						
  5. EL属性范围用法sessionScope等(转)
			
    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
    
			
    6. 
						
  6. Django框架的学习
			
    目前 Django 1.6.x 以上版本已经完全兼容 Python 3.x. 1. 指定django版本的安装 pip install django =1.11
    
			
    7. 
						
  7. python字符转化
			
    int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x) 将x转换到一个浮点数 complex(real [,imag ]) 创建一 ...
    
			
    8. 
						
  8. paper 143：人脸验证
			
    持续更新ing,敬请期待! 参考:http://blog.csdn.net/stdcoutzyx/article/details/42091205  1. DeepID人脸识别算法 香港中文大学的团队 ...
    
			
    9. 
						
  9. jmeter之--断言json响应&json path espressions的语法
			
    一.提取所需要断言的内容: 响应数据如下:加入需要提取id为90的值 { , "name" : "python", "url" : &quo ...
    
			
    10. 
						
  10. Spring  MVC请求参数绑定 自定义类型转化 和获取原声带额servlet request response信息
			
    首先还在我们的框架的基础上建立文件 在domian下建立Account实体类 import org.springframework.stereotype.Controller; import org. ...
    
			
    11.