本文详细解读Vue.js中组件的创建、动态组件的使用、组件间的通信以及组件数据管理，包括Vue.extend、Vue.component、局部组件和全局组件的区别，以及组件生命周期和组件缓存策略。适合深入理解Vue组件体系的开发者。
var Aaa=Vue.extend({//继承出来一个Vue类Aaa
template:'
我是标题3
'});
var a=new Aaa();//a跟vm一样
console.log(a);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
Documentvar Aaa=Vue.extend({
template:'
我是标题3
'});
Vue.component('aaa',Aaa);//aaa是组建实例，全局组件
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
Documentvar Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
template:'
{{msg}}
'});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
Documentvar Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
methods:{
change(){
this.msg='changed'
}
},
template:'
{{msg}}
'});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
Documentvar Aaa=Vue.extend({
template:'
{{msg}}
',data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);
aaa:Aaa
}
});
Documentvar Aaa=Vue.extend({
template:'
{{msg}}
',data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
'my-aaa':Aaa
}
});
DocumentVue.component('my-aaa',{//全局，公共的提出去
template:'好'
});
var vm=new Vue({
el:'#box'
});
Documentvar vm=new Vue({
el:'#box',
components:{ //局部
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'
标题2->{{msg}}
'}
}
});
Document标题1
{{val}}
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
Document标题2->{{msg}}
- 1111
- 222
- 3333
- 1111
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
动态组件var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'
我是aaa组件
'},
'bbb':{
template:'
我是bbb组件
'}
}
});
Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue < ...
七、vue语法补充二(动态组件 &; 异步组件、访问元素 &; 组件、混入)
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
[Vue]组件——实现动态组件：keep-alive的使用
1.在app.vue中用一个 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存
Vue 组件4 动态组件
动态组件 通过使用保留的元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
Vue组件的操作-自定义组件，动态组件，递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似,
Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件,根据 ...
Hibernate学习---第五节：普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
随机推荐
百度广告 高亮 Chrome插件(附源码)
一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财 ...
BZOJ 3639: Query on a tree VII
Description 一棵树,支持三种操作,修改点权,修改颜色,问所有与他路径上颜色相同的点的最大权,包含这两个点. Sol LCT. 用LCT来维护重边,对于每个节点在建一个set用来维护轻边,这 ...
HTML页面的布局
1.纵向切分页面:CSS POSITION的默认值为:STATIC 1)
Hello < ...sin=in.readLine();
import java.io.*; public class LineIO{ public static void main(String[] args) { String sin,inputStri ...
解决ListView 跟ScroolView 共存 listItem.measure(0, 0) 空指针
在网上找到ListView 和ScroolView 共存的方法无非是给他每个listview 重新增加高度,但是android 的设计者始终认为这并不是一种好的实现方法.但是有的时候有必须要用这种蛋疼 ...
Spring3之JDBC
Spring提供了统一的数据访问异常层次体系,所涉及到的大部分异常类型都定义在org.springframework.dao包中,出于这个体系中所有异常类型均以org.springframework. ...
excel取值
1.获取excel表格中的数据的表达式“&(A-Z)” 2.excel表格取值时,如果遇到表达式中要包含引号的,两个引号表示一个引号,因为取值的时候已经用了一对引号了. ="||&q ...
转载：IntelliJ Idea 常用快捷键列表
IntelliJ Idea 常用快捷键列表 (http://www.open-open.com/lib/view/open1396578860887.html) Ctrl+Shift + Enter, ...
boost 编译依赖库
正则表达式 icu-devel python python-devel bzip2-devel ./b2 variant=release link=shared threading=multi run ...
File 常用方法
1.判断当前文件是否封装的文件夹目录 //返回true--是,false--不是 File file =new File("C:\\Users\\mac\\Desktop\\复习.txt&q ...
1391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
