vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
</div>
<script>
var Aaa=Vue.extend({//继承出来一个Vue类Aaa
template:'<h3>我是标题3</h3>'
});
var a=new Aaa();//a跟vm一样
console.log(a);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);//aaa是组建实例，全局组件
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <script>
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
template:'<h3>{{msg}}</h3>'
}); Vue.component('aaa',Aaa); var vm=new Vue({
el:'#box',
data:{
bSign:true
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <script>
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
methods:{
change(){
this.msg='changed'
}
},
template:'<h3 @click="change">{{msg}}</h3>'
}); Vue.component('aaa',Aaa); var vm=new Vue({
el:'#box',
data:{
bSign:true
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)
return {
msg:'ddddd'
}
}
}); var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);
aaa:Aaa
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
'my-aaa':Aaa
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
Vue.component('my-aaa',{//全局，公共的提出去
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{ //局部
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change">标题2->{{msg}}</h2>'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div> <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template> <script>
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'
}
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div> <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script> <script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a"></component> <!-- 动态组件-->
</div> <script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
}); </script>
</body>
</html>
vue19 组建 Vue.extend component、组件模版、动态组件的更多相关文章
- Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
- Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- 七、vue语法补充二（动态组件 & 异步组件、访问元素 & 组件、混入）
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
- [Vue]组件——实现动态组件：keep-alive的使用
1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...
- Vue 组件4 动态组件
动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
- Vue组件的操作-自定义组件，动态组件，递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
- Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
随机推荐
- NOIp2018模拟赛四十一
现在是下午15:36,我已经改完题了...刷新纪录 A题叫B,B题叫A是什么操作??? 我离200只差一个SBFA.jpg 成绩:0+100+10=110 被虐啦...今天九个阿克的Orz.A题是个神 ...
- python学习笔记:第六天
一.元组(通用格式a=(1,),结束后面加个逗号,不同与数组是中括号,只能是只读的,不能修改,是有序的): 列表之间可以嵌套(列表之间嵌套,嵌套元组,是有序的):a[b[1,2],c[3,4]],输出 ...
- 【Educational Codeforces Round 41 (Rated for Div. 2) D】Pair Of Lines
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果点的个数<=3 那么直接输出有解. 否则. 假设1,2最后会在一条直线上,则把这条直线上的点都删掉. 看看剩余的点是否在同 ...
- 【转】 C# DEBUG 调试信息打印及输出详解
[转] C# DEBUG 调试信息打印及输出详解 1.debug只在[debug模式下才执行](运行按钮后面的下拉框可选) 2.debug提供了许多调试指令,如断言 System.D ...
- mysql死锁-查询锁表进程-分析锁表原因
查询锁表进程: 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist 查询到相对应的进程===然 ...
- HDOJ 题目1520 Anniversary party（树形dp）
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 每一个程序猿都应该用MBP
换笔记本的想法非常久了.前段时间换工作就想看换工作之后是什么情况吧. 可能工作配的笔记本就是MBP.后来发现是想多了,新工作的笔记本是Thinkpad X240. 配置全然够用了,8G内存+128G的 ...
- IIS预编译提升载入速度
当我们把站点部署在IIS7或IIS6S的时候,每当IIS或是ApplicationPool重新启动后,第一次请求站点反应总是非常慢.原因大家都知道(不知道能够參考这个动画说明ASP.NET网页第一个R ...
- Windows下Python2.7配置OpenCV2.4.10
所需文件: 1 Python2.7.13 链接: https://www.python.org/downloads/release/python-2713/ 这里选Windows 64位的安装包. 2 ...
- 基于python3-sklearn，Flask 的回归预测系统
看到一副图片挺有意思,放在片头 序 "傍晚小街路面上沁出微雨后的湿润,和煦的西风吹来,抬头看看天边的晚霞,嗯明天又是一个好天气.走到水果摊旁,挑了个根蒂蜷缩.敲起来声音浊响的青绿西瓜,一边满 ...