vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
一、定义一个组件
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
}); Vue.component('aaa',Aaa); *组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
1. 全局组件
<!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); 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">
<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>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
//组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
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>
2. 局部组件
放到某个组件内部
<!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>
<br/>
<br/>
<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:{ //局部组件
aaa:Aaa,
'my-aaa':Aaa//这里的my-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 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>
二、配合模板
配合模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>' 2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
方法一：
<!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>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 @click="change">{{msg}}</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 title';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
三、动态组件
动态组件:
<component :is="组件名称"></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">
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a"></component>
<!--<component :is="组件名称"></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>
vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue组件定义全局方法
1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法
- 详解vue组件的is特性：限制元素&动态组件
在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- Vue 组件4 动态组件
动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
- vue组件---动态组件&异步组件
(1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...
- vue动态组件-根据数据展示特定组件
vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <templa ...
- vue API 知识点（4） --- 指令、特殊 attribute 、内置组件
一.指令 1.v-text <span v-text="msg"></span> <!-- 两种写法是一样的 --> <span>{ ...
- vue 动态组件的传值
vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
随机推荐
- c++中typedef、define、const、inline之间的区别
1.typedef和#define的区别 typedef int* pInt; , b = ; const pInt p1 = &a; //p1是常量指针 pInt const p2 = &a ...
- 移动构造函数(c++11)
1.概念 1)C++中对象发生拷贝的场景可以分为两种,一种是被拷贝的对象还要继续使用,另一种是被拷贝的对象不再使用:第二种一般可以认为是对右值的拷贝 2)C++11中引入了移动构造函数,对象发生拷贝时 ...
- c# devexpress 多个窗口
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- oracle学习笔记一：用户管理（2）创建删除用户
本文主要介绍如何创建和删除用户,当然里面牵涉很多知识,慢慢道来. 1,创建用户 需求:假设你是oracle管理员,当一个同事入职,你需要分配给一个账号. 创建用户,一般需要有相应权限的用户才可以创建用 ...
- 为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?
HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element).- 替换元素是指用作为其他内容占位符的一个元素.最典型的就是img,它只是指 ...
- 好文推荐系列---------(4)使用Yeoman自动构建Ember项目
好文原文地址:http://segmentfault.com/a/1190000000368881 我决定学习前端开发的效率工具Yeoman.本文将首先介绍Yeoman的基本情况,接着我们会使用Yeo ...
- CentOS 5 上配置 Redmine 和 Git
现在我们用 Trac + Git 来管理所有的项目,早些时候是由 Trac + Subversion 管理的,和 Git 比较起来 Subversion 简直就是龟速.虽然我们前段时间换成了 Git ...
- Alpha冲刺 - (3/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 ssm框架的使用并实现简单的数据处理 ...
- marven与Eclipse集成配置
maven作为一个项目构建工具,在开发的过程中很受欢迎,可以帮助管理项目中的bao依赖问题,另外它的很多功能都极大的减少了开发的难度,下面来介绍maven的安装及与eclipse的集成. maven的 ...
- set_magic_quotes_runtime set_magic_quotes_gpc
set_magic_quotes_runtime(0); 可以修改php.ini中 magic_quotes_runtime boolean的设置 当你的数据中有一些\"'这样的字符要写入到 ...