Vue2学习笔记:组件（Component）
组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。
1. 全局 Vue.component(tagName, options)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<!-- // <script src="vue.js"></script> -->
</head>
<body>
<div id="box">
<test></test>
</div>
<script type="text/javascript">
//注册
Vue.component('test', {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的组件'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
});
//创建根实例
var vm = new Vue({
el:'#box',
});
</script>
</body>
</html>
2. 局部注册
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<test></test>
</div>
<script type="text/javascript">
///定义组件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部组件'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//创建根实例
var vm = new Vue({
el:'#box',
components:{
'test': testTemplate
}
});
</script>
</body>
</html>
3. 动态切换组件
首先这样用法， 这样指定组件，下面有两个 我们指定其中的一个
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<components :is="testTemplate"></components>
</div>
<script type="text/javascript">
///定义组件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部组件1'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//创建根实例
var vm = new Vue({
el:'#box'
});
</script>
</body>
</html>
下面有两个 我们指定其中的一个
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="1" @click="a='testTemplate'">
<input type="button" value="2" @click="a='testTemplate2'">
<components :is="a"></components>
</div>
<script type="text/javascript">
///定义组件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部组件1'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
var testTemplate2 = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部组件2'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//创建根实例
var vm = new Vue({
el:'#box',
data:{
a: testTemplate //一开始让a的第一个组件
},
components:{ //要把组件写入到components里面，如果没有放的话在切换的时候就会找不到 组件
'testTemplate':testTemplate,
'testTemplate2':testTemplate2
}
});
</script>
</body>
</html>
Vue2学习笔记:组件（Component）的更多相关文章
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- Angular6 学习笔记——组件详解之模板语法
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- vue学习之组件(component)(一)
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- 老刘 Yii2 源码学习笔记之 Component 类
类图关系 属性与方法 class Component extends BaseObject { private $_events = []; private $_eventWildcards = [] ...
- Vue 学习笔记 — 组件初始化
简书 在vue中有3个概念很容易搞混,data,computed,props,特别是我们这些原后端开发人员. new Vue({ el: "#x", data: { id: 1 } ...
随机推荐
- 【树】Convert Sorted Array to Binary Search Tree
题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...
- C/C++ -- Gui编程 -- Qt库的使用 -- 使用图片与动画
QWidget工程 #include "mywidget.h" #include "ui_mywidget.h" #include <QLabel> ...
- 模型的偏差bias以及方差variance
1. 模型的偏差以及方差: 模型的偏差:是一个相对来说简单的概念:训练出来的模型在训练集上的准确度. 模型的方差:模型是随机变量.设样本容量为n的训练集为随机变量的集合(X1, X2, ..., Xn ...
- elasticsearch(六) 之 elasticsearch优化
目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...
- Linux-(chgrp,chown,chmod)
/etc/group Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和用户组管理时相关的文件. Linux /etc/group文件 ...
- Android之网络丢包事件
原文链接 http://www.litrin.net/2013/03/01/android%E4%B9%8B%E7%BD%91%E7%BB%9C%E4%B8%A2%E5%8C%85%E4%BA%8B% ...
- 转载：哈希加密算法 MD5,SHA-1,SHA-2,SHA-256,SHA-512,SHA-3,RIPEMD-160 - aTool
http://www.atool.org/hash.php 一.MD5哈希加密算法 MD5即Message-Digest Algorithm 5(信息-摘要算法 5),用于确保信息传输完整一致.是计算 ...
- Node.js进程管理之进程集群
一.cluster模块 Node.js是单线程处理,对于高并发的请求怎么样能增加吞吐量呢?为了提高服务器的利用率,能不能多核的来处理呢?于是就有了cluster模块. cluster模块可以轻松实现运 ...
- 关于伪分布zookeeper集群启动出错（Error contacting service. It is probably not running.）
今天在配置zookeeper伪分布集群的时候,发现竟然出错了,以前我都是在多台电脑上搭建,大家可以参考我写的Hadoop HA搭建中的zookeeper如何搭建 现在就来说一下为何会出错. 出错的原因 ...
- 【基于初学者的SSH】struts2 值栈的详解与struts2标签库+ognl表达式
一:什么是值栈:struts2里面本身提供的一种存储机制,类似于域对象,值栈,可以存值和取值 特点:先进后出,最上面的元素叫做栈顶,也叫压栈. <s:debug></s:debug& ...