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>,根据 ...
随机推荐
- Base64编码字符串时数据量明显变大
那就是当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需 ...
- shell学习日志
0.shell的变量同环境变量不同,存在用户环境区. 变量赋值的方式是: variable_name = variable_value a= "hello" $a对a进行取值 关于 ...
- 面试题——ArrayList和LinkedList的区别
List概括 先回顾一下List在Collection的框架图: 从图中可以看出: List是一个接口,他继承Collection接口,代表有序的队列. AbstractList是一个抽象类, ,它继 ...
- js时间格式化函数，支持Unix时间戳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- SVN过滤设置
为了方便管理我们的系统版本号.非常多人会用到SVN,开发中我们经经常使用到SVN插件, 可是对于某些文件的缓存来说, 我们仅仅要有操作缓存便会保存一次, 每次提交非常是麻烦, 可能有的文件或者目录我们 ...
- angularjs 工具方法
<!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...
- m_Orchestrate learning system---二十六、动态给封装好的控件添加属性
m_Orchestrate learning system---二十六.动态给封装好的控件添加属性 一.总结 一句话总结:比如我现在封装好了ueditor控件,我外部调用这个控件,因为要写数据到数据库 ...
- django 笔记12 session
第一步写好函数,然后生成数据库session表 python manage.py makemigrations python manage.py migrate session原理: .Session ...
- [JSOI2008] [BZOJ1567] Blue Mary的战役地图 解题报告 (hash)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1567 Description Blue Mary最近迷上了玩Starcraft(星际争霸 ...
- BZOJ 3680 模拟退火
思路: 退火就好了-- 1.强烈建议题目名称改为"吊打出题人" 2.这种题放oj上啥心态...-–hzwer 二分TLE和WA 终于AC了-- //By SiriusRen #in ...