一、定义Vue组件
什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件和模块化的不同：模块化是从代码逻辑的角度划分的，保证每个功能模块的职能单一；组件化是从UI界面的角度划分的，前端的组件化，方便UI组件的重用；
二、创建组件的方式
第一种
<div id="app">
<!--如果要使用组件，直接把组件的名称，以HTML标签的形式引入到页面中即可-->
<my_com1></my_com1>
</div>
<script>
//使用vue.extend来创建全局的vue组件
var com1 = Vue.extend({
template: '<h3>这是使用Vue.extend创建的组件</h3>',//通过template属性，指定了组件要展示的HTML结构
});
//使用Vue.component('组件的名称',创建出来的组件模板对象)
//如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写，同时，在两个单词之间用-连接
//如果不使用驼峰，则直接拿名称来使用即可
Vue.component('my_com1', com1);
//也可以不用中间变量接收，直接将Vue.extend创建的对象传递到Vue.component中
//Vue.component('my_com1', Vue.extend({}))
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
第二种
<div id="app">
<!--还是使用标签的形式引入自己的组件-->
<my_com2></my_com2>
</div>
<script>
Vue.component('my_com2', {
//注意，无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有唯一的一个根元素
template: '<h3>这是直接使用Vue.component创建出来的组件</h3>'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
第三种
<div id="app">
<my_com3></my_com3>
</div>
<!--在被控制的 #app 外面使用template元素，定义组件的HTML模板结构-->
<template id="tmpl">
<!--同样这里也只能包含一个根元素-->
<div>
<h1>
这是通过template元素，在外部定义的组件结构
</h1>
<h4>
好用，不错
</h4>
</div>
</template>
<script>
Vue.component('my_com3', {
template: '#tmpl'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
三、定义私有组件
<div id="app">
<login></login>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{//定义实例内部私有组件
login:{
//这里的template也可以引用<template></template>标签
template:'<h1>这是一个私有的组件</h1>'
}
}
})
</script>
四、组件中的data和methods
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<my_com1></my_com1>
</div>
<div id="app2">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
Vue.component('counter', {
template: '#tmpl',
data: function () {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
});
var vm = new Vue({
el: '#app2',
})
</script>
<script>
//1、组件可以有自己的data数据
//2、组件的data和实例中的data不一样，实例中的data可以是一个对象，但是组件中的data必须是一个方法
//3、组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行；
//4、组件中的data数据使用方式和实例中的data使用方式完全一样
//5、之所以要返回function是因为页面可以创建多个模板实例，而function每次都会创建一个新的对象返回，避免了多个实例引用同一个对象
Vue.component('my_com1', {
template: '<h1>这是全局组件 -- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件中定义的数据'
};
}
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
五、组件切换的方式
第一种
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
})
</script>
第二种
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!--Vue提供了component来展示对应名称的组件-->
<!--component是一个占位符，:is属性，可以用来指定要展示的组件的名称-->
<component :is="comName"></component>
<!--总结：当前学习了几个Vue提供的标签？-->
<!--component template transition transition-group-->
</div>
<script>
/*组件名称是一个字符串*/
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});
var vm = new Vue({
el: '#app',
data: {
comName:'login'//当前component中的:is绑定的名称
},
methods: {}
})
</script>
六、组件切换-动画切换
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.6.10.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all .5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!--通过 mode属性设置组件切换时候的模式-->
<!--out-in是指当前元素先执行完毕下一个元素再执行-->
<!--in-out是指下一个元素先执行，完成之后再执行当前元素-->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script>
/*组件名称是一个字符串*/
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});
var vm = new Vue({
el: '#app',
data: {
comName: 'login'//当前component中的:is绑定的名称
},
methods: {}
})
</script>
</body>
</html>
