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 } ...
随机推荐
- Linux 命令学习之rm
功能说明: rm 命令是对文件或目录进行删除操作. 语法:rm [-dfirv][--help][--version][文件或目录...] 补充说明:执行rm指令可删除文件或目录,如欲删除目录必须加上 ...
- 配置alibaba的yum 源
1, 进入yum源目录 cd /etc/yum.repos.d 2, 备份系统yum配置文件 sudo mv CentOS-Base.repo CentOS-Base.repo.bak 3, 下载al ...
- 一个快速搜索下载jar包的网站
在偶然的机会,我一个快速搜索下载jar包的网站.里面涵盖了所有的几乎全世界开源的jar包,感觉这个功能特别适合java.android开发者使用,共享出来給大家悄悄. 百度一下:manyjar,就可以 ...
- Velocity学习笔记
一.为什么要使用velocity? 很多人下载了EasyJWeb的开源应用示例,但是对动态页面模板文件中的标签使用不是很熟悉,这里简单介绍一下.EasyJWeb特定把视图限定为Velocity,因为我 ...
- 怎么掌握微信小程序的取值、传值、数据存储
小程序界面设定如下 父级页面:A界面 子级页面:B界面 异级页面:C界面 一.本页面取值(A界面→A界面) a.例如:input输入文字获取到value(键盘输入时触发) wxml: <inpu ...
- springboots 环境搭建
1.创建demo文件 spring initializr : http://start.spring.io/ 2.gradle 下载 https://services.gradle.org/distr ...
- 键盘输入，输出int数组的函数
public class function { public static void main(String[] args) { //输入数组数据(例如10个) int [] array = inPu ...
- solr+tomcat整合
一.solr安装 http://archive.apache.org/dist/lucene/solr/ 这个地址有各个版本的 这次我使用的是5.5.4版本和tomcat8 版本5.5.4已经内置了j ...
- Golang 使用FreeType-go进行字体
FreeType库(http://www.freetype.org/)是一个完全免费(开源)的.高质量的且可移植的字体引擎,它提供统一的接口来访问多种字体格式文件,包括TrueType, O ...
- KATANA Owin 资料收集
https://www.cnblogs.com/xishuai/p/asp-net-5-owin-katana.html http://wiki.jikexueyuan.com/project/thi ...