vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧!

这里有一个Vue组件的示例:

    Vue.component('Vheader',{
data:function(){
return { }
},
template:`<div class="header">
<div class="w">
<div class="w-l">
<img src="./logo.png"/>
</div>
<div class="w-r">
<button>登录</button><button>注册</button> </div>
</div>
</div>`
})

组件是可复用的Vue实例,并且带有一个名字:在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

<div id="app">
<Vheader></Vheader>
</div>
var app = new Vue({
el:'#app',
data:{ }
})

效果显示:

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项

组件的复用

    <div id="app">
<Vheader></Vheader>
<br>
<Vheader></Vheader>
<br>
<Vheader></Vheader>
</div>

效果显示:

给Vheader组件中添加一个按钮,绑定数据属性count,然后你会发现点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。

在创建组件过程中第一个参数是组件的名字,第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点:

关于组件名的起名:https://cn.vuejs.org/v2/guide/components-registration.html

1、组件中没有el,因为el仅仅的是绑定Vue的根元素。

2、data属性不再是返回对象,而是返回一个函数。而且必须返回一个函数。

ok。介绍到这里相信大家都明白了组件的创建了。

那么通常一个应用会一颗嵌套的组件

前端框架VUE----组件的创建的更多相关文章

  1. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  2. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  3. 前端框架VUE

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  4. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  5. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  6. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  7. 前端框架VUE——安装及初始化

    本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...

  8. 前端框架Vue入门

    1.Vue简介 Vue是一套构建用户界面的渐进性框架.Vue采用自底向上增量开发的设计,其关注点在图层,与angular的区别就在这里,它关注的是图层,而angular注释的是数据. 2.与React ...

  9. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  10. Vue组件component创建及使用

    组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...

随机推荐

  1. 2018-2019-1 20189221《Linux内核原理与分析》第三周作业

    2018-2019-1 20189221<Linux内核原理与分析>第三周作业 实验二 完成一个简单的时间片轮转多道程序内核代码 实验过程 在实验楼中编译内核 编写mymain.c函数和m ...

  2. 自动出借-python+selenium

    自动出借 import time from selenium import webdriver # import os #B username = " # 请替换成你的用户名 passwor ...

  3. [LeetCode] 154. Find Minimum in Rotated Sorted Array II_Hard

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  4. js抽红包分配

    将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh ...

  5. 一个简单的sel server 函数的自定义

    创建自定义函数:use 数据库名gocreate function 函数名(@pno int)returns intasbegin  declare @a int   if not exists(se ...

  6. Cocos Creator 音频API控制调频

    *****音频的一些控制***** cc.audioEngine.playMusic(this.BGAudio,true);//播放音乐(true代表循环) cc.audioEngine.stopMu ...

  7. cocos2d JS-(JavaScript) 函数类型相互转换(字符串、整形、浮点形、布尔值)

    工作忙好些天了,近段时间抽点空分享一下自己学习JS的一点笔记心得做点记录,大神勿喷,谢谢! 1.字符串的转化 var found = false; console.log(found.toString ...

  8. echo 内容显示颜色

    一,字体显示颜色 #字体颜色:30m-37m 黑.红.绿.黄.蓝.紫.青.白str=”要显示的字体“echo -e "\033[30m ${str}\033[0m"      ## ...

  9. gitlab8.2->8.16->8.17->9.0升级

    注:不要跨过8.16升级至8.17,这样做升级过程会报错 ###################################8.2升级至8.16########################## ...

  10. a标签下载;页面传参row对象先转换成字符串。

    jsp:添加一列 <th data-options="field:'id',width:180,formatter: rowformater" width="20% ...