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 } ...
随机推荐
- 【树】Construct Binary Tree from Inorder and Postorder Traversal
题目: Given inorder and postorder traversal of a tree, construct the binary tree. 思路: 后序序列的最后一个元素就是树根, ...
- 【数组】4Sum
题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...
- Java_try,catch,finally return之间的执行顺序
以往认为函数只要执行到return语句便会返回结果并终止,然而这时错误的,因为这存在特例. 掌握下面几条原则就可以完全解决“当try.catch.finally遭遇return”的问题. 原则:1.f ...
- PlanetTogether APS安装与配置
一.PT 安装 1.PT Server与Client的下载 下载网址:https://download.planettogether.com/ 2.安装.net framework 4.6.2 安装P ...
- C语言中的条件编译
通常情况,我们想让程序选择性地执行,多会使用分支语句,比如if-else 或者switch-case 等.但有些时候,可能在程序的运行过程中,某个分支根本不会执行. 比如我们要写一个跨平台项目,要求项 ...
- BI实战派：医疗BI项目落地方案
任何BI项目面临的两大难题是项目价值和基础数据,BI项目应该给企业带来管理优化.业绩增长.医院面临的两大难题,一:绩效管理(奖金分配):二:医患关系:在医院开始自负盈亏时日常基本运营管理显得非常重要. ...
- 模块打包工具webpack
1.webpack的安装 1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下) 1.2新建一个文件夹用于此项目 eg ...
- [转]SQL SERVER数据库删除LOG文件和清空日志的方案
本文转自:https://www.cnblogs.com/ShaYeBlog/archive/2012/09/04/2670505.html 数据库在使用过程中会使日志文件不断增加,使得数据库的性能下 ...
- 解决 Jquery UI Tooltip 用在Select 的BUG
今天遇到一个奇葩问题, 在chrome下一切正常的 页面,在IE 下Select无法选中! 是的 ,就是无法选中!!! 效果就是这样的.http://jsfiddle.net/slolife/dp4 ...
- 【转】java线程池
一简介线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.util. ...