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 } ...
随机推荐
- IDEA里运行程序时出现Error：scalac：error while loading JUnit4 , Scala signature JUnit4 has wrong version错误的解决办法（图文详解）
不多说,直接上干货! 问题详情 当我们在运行程序时,出现Error:scalac:error while loading JUnit4 , Scala signature JUnit4 has wro ...
- 如何在python3环境下的Django中使用MySQL数据库
我们在使用Django过程中,连接MySQL数据库时,对Python不同的版本对应的库也不一样,用惯了Python2的人在使用Python3时经常会遇到下面的错误: Error loading MyS ...
- 《深入理解Java虚拟机》目录
第一部分 走进Java 第1章 走进Java 第二部分 自动内存管理机制 第2章 Java内存区域与内存溢出异常 2.2 运行时数据区域 2.3 HotSpot虚拟机对象探秘 第3章 垃圾收集器与 ...
- NodeJS调用jar包
我们在实际的生产.开发实践中,其实要和许多第三方服务商进行打交道,这其中包括使用他们提供的批量与联机服务,但与别的互联网企业不大相同的是,银行作为传统企业,其一贯重视安全性,许多在互联网企业看似理所当 ...
- java.lang 类String
方法摘要1 charcharAt(int index) 返回指定索引处的 char 值. index - char 值的索引.2 string concat( ...
- .Net Core使用 MiniProfiler 进行性能分析（转）
转自:http://www.cnblogs.com/ideacore/p/9505425.html 官方文档: https://miniprofiler.com/dotnet/AspDotNetCor ...
- .Net Core使用NLog记录日志
参见:https://github.com/NLog/NLog.Web/wiki/Getting-started-with-ASP.NET-Core-2 大致步骤: Nuget中引用NLog及NLog ...
- EXCEL导出工具类及调用
一.Excel导出工具类代码 package com.qiyuan.util; import java.io.OutputStream; import java.io.UnsupportedEncod ...
- es索引的RestHighLevelClient实现
java代码: import java.io.IOException; import org.apache.http.HttpHost; import org.elasticsearch.action ...
- RabbitMQ 上手记录-part 1-基础概念
RabbitMQ是什么,不用多介绍了,毕竟名声在那,江湖地位摆着,搜索引擎收录着.为什么突然去学习这个框架了,毕竟工作中没有用得上(说来也惭愧,工作中开发的项目没有使用这个框架).但是作为互联网分布式 ...