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 } ...
随机推荐
- 【树】Flatten Binary Tree to Linked List（先序遍历）
题目: Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 ...
- Android_ActionBar
ActionBar actionBar = getActionBar(); actionBar.setDisplayHomeAsUpEnabled(true);//在activity title栏的左 ...
- Centos下Kubernetes+Flannel部署（新）
一.准备工作 1) 三台centos主机 k8s master: 10.11.151.97 tc-151-97 k8s node1: 10.11.151.100 tc-151-100 k8s no ...
- cookie和session的区别,session的生命周期，
这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...
- Memcached理解笔记1---安装&常规错误&监控
一.下载 1.Libevent 简单的说就是一个事件触发的网络库,Memcached离不开它. wget http://cloud.github.com/downloads/libevent/libe ...
- Python引用复制，参数传递，弱引用与垃圾回收
引用 先上个示例: >>> val = [1] >>> val[0] = val >>> val [[...]] 上述代码使val中包含自身,而产 ...
- [POI 2014]RAJ-Rally
Description 题库链接 给定一个 \(N\) 个点 \(M\) 条边的有向无环图,每条边长度都是 \(1\).请找到一个点,使得删掉这个点后剩余的图中的最长路径最短. \(1\leq N\l ...
- [转]Asp.Net 网站多语言解决方案
本文转自:https://www.cnblogs.com/FredTang/archive/2013/01/23/2873231.html 最近领导要求实现PMSWeb应用程序的多区域语言的支持,所以 ...
- WCF配置文件与文件下载之坎坷路
题外话:本以为我会WCF了,精通WCF了,毕竟刚做过一个WCF的项目,不就是写写契约接口,然后实现接口,改下配置.最后用控制台或者服务发布一下,不就能用了.不就是简单ABC吗?不是So Easy吗?做 ...
- 解决 Jquery UI Tooltip 用在Select 的BUG
今天遇到一个奇葩问题, 在chrome下一切正常的 页面,在IE 下Select无法选中! 是的 ,就是无法选中!!! 效果就是这样的.http://jsfiddle.net/slolife/dp4 ...