Vue学习笔记之Vue组件
0x00 前言
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
接收相同的选项。
0x01 组件的复用

<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学习笔记之Vue组件的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
- Vue学习笔记之Vue的使用
0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...
随机推荐
- 关于“ORA-01747: user.table.column, table.column 或列说明无效”的报错。
今天在工程中遇到“ORA-01747: user.table.column, table.column 或列说明无效”的报错情况,查了一下是由于数据库列名起的不好引起的,名字用到了数据库的关键字.
- 【PHP】 php实现字符串反转:支持中英文
strrev 函数对英文很好用,直接可以实现字符串翻转 但是面对中文呢?肯定都是乱码,对于这样的问题有很多,比如strstr,substr等函数都是这样的. PHP提供了mb_类的函数实现不同编码. ...
- Android Activity与Fragment生命周期
- mysql数据类型及存储过程
转自:http://www.cnblogs.com/mark-chan/p/5384139.html 存储过程简介 SQL语句需要先编译然后执行,而存储过程(Stored Procedure)是一组为 ...
- 摄像头的管理(camera) ---- HTML5+
模块:camera Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象. 应用场景:保存自拍,保存照片,上传照片,保存视频,上传视频: 通过之前的模块 ...
- phpStorm 显示行号
- 使用 Capistrano 进行自动化部署
最近在折腾这个,弄了好多次都不成功,看了官方文档和很多博客,都没有说清楚,因此,我觉得有必要把它记录下来,以帮助更多像我这样被弄得烦躁的人. 首先是安装,其实 Ubuntu 上面安装 Capistra ...
- Oracle数据类型clob和blob
clob(size)变长 字符型大对象,最大8tb 应用场景:如果varchar2不够用了使用clob blob(size)变长 二进制数据,可以存放图片声音 8tb 但是,实际工作中很少把图片和声音 ...
- New动态分配 Delete 释放内存
在C++中,对于变量和对象都是编译器在编译时分配好的,对于数组初始化时,无法确定多少内存,很容意造成大开小用的情况. new 动态分配 一般格式:1. 指针变量名 =new 类型标识符; 2.指针 ...
- sqlserver如何读写操作windows系统的文件
DECLARE @object int DECLARE @hr int DECLARE @src varchar(255), @desc varchar ...