Vue组件化开发
2020-07-27 本文已影响0人
Angel_6c4e
一.如何创建Vue全局组件
- 特点：在任何一个Vue控制的区域都能使用
1.创建组件构造器
注意点：创建组件模板的时候只能用一个根元素
// 创建构造器
let Profile = Vue.extend({
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`,
})
2.注册已经创建好的组件
第一个参数：指定注册组件的名称
第二个参数：指定组件的构造器
Vue.component('abc', Profile)
3.使用注册好的组件
<div id="app">
<abc></abc>
</div>
二.创建Vue全局组件的简写方式
- 第一种：注册组件，传入一个选项对象
<div id="app">
<!--3.使用注册好的组件-->
<abc></abc>
</div>
<script>
//1.创建一个模板对象
let object = {
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`,
};
//2.注册已经创建好的组件
Vue.component('abc', object )
</script>
- 第二种：
<div id="app">
<!--2.使用注册好的组件-->
<abc></abc>
</div>
<script>
//2.注册已经创建好的组件
Vue.component('abc', {
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`,
})
</script>
弊端：把模板编写在字符串模板中没有代码提示
- 第三种：
<div id="app">
<!--3.使用注册好的组件-->
<abc></abc>
</div>
<!--1.创建一个template模板对象-->
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
</template>
<script>
//2.注册已经创建好的组件
Vue.component('abc', {
template: "#info"
})
</script>
三.如何创建Vue局部组件
- 特点：只能在自定义的那个Vue实例中使用
<div id="app2">
<abc></abc>
</div>
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
</template>
<script>
let vue2 = new Vue({
el:"#app2",
data:{},
methods:{},
computed:{},
//创建Vue局部组件
components:{
"abc":{
template:"#info"
}
}
});
</script>
四.自定义组件中data和methods和Vue实例中data和methods的区别
前提：
由于Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中自然也能使用data和methods
- Vue实例中data和methods
<div id="app">
<!--
由于我们是在Vue实例控制的区域中使用的函数
所以系统回去Vue实例中查找有没有对应的方法
所以我们需要在Vue实例中实现对应的方法
-->
<button @click="appFn">我是按钮</button>
<!--
由于我们是在Vue实例控制的区域中使用了数据
所以系统回去Vue实例中查找有没有对应的数据
所以我们需要在Vue实例中添加对应的数据
-->
<p>{{appMsg}}</p>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
appMsg:"yaxi"
},
methods:{
appFn(){
alert("appFn");
}
},
computed:{}
});
</script>
- 自定义组件中data和methods
<div id="app">
<!--使用注册好的组件-->
<abc></abc>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<!--自定义模板组件-->
<template id="info">
<div>
<!--
由于我们是在自定义组件中使用了函数
所以系统会去自定义的组件中查找有没有对应的方法
所以我们需要在自定义的组件中实现对应的方法
-->
<button @click="appFn">我是按钮</button>
<img src="images/fm.jpg"/>
<!--在自定义组件中不能像在vue实例中一样直接使用data,而是必须通过返回函数的方式来使用data-->
<p>{{abcMsg}}</p>
</div>
</template>
<script>
//3.1创建全局组件构造器
Vue.component("abc",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#info",
//注意点：在自定义组件中使用data必须是一个函数
data: function () {
return {
abcMsg:"yaxi"
}
},
methods:{
appFn(){
alert("appfn")
}
}
});
let vue = new Vue({
el:"#app",
data:{},
methods:{},
computed:{}
});
</script>
为什么自定义组件中的data必须是一个函数？
自定义组件中的data如果不是通过函数返回的，那么如果同时使用多个相同的自定义组件，就会造成数据混乱的问题；
自定义组件中的data是通过函数返回的，那么每创建个新的组件，都会调用次这个方法将这个方法返回的数据和当前创建的组件绑定在一起，这样就有效的避免了数据混乱;
<div id="app">
<abc></abc>
<abc></abc>
<abc></abc>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<!--自定义模板组件-->
<template id="info">
<div>
<button @click="add">累加</button>
<p>{{number}}</p>
</div>
</template>
<script>
//3.1创建组件构造器
Vue.component("abc",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#info",
data:function () {
return {
number:0
}
},
methods: {
add(){
this.number++;
}
}
});
let vue = new Vue({
el:"#app",
data:{},
methods:{},
computed:{}
});
</script>
效果：
五.组件的切换
- 通过v-if/v-else来切换组件的显示隐藏
对于普通的元素我们可以通过v-if来实现切换,对于组件我们可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
另外，通过v-if /v-else来切换组件不能保存组件的上一次的状态
<body>
<div id="app">
<button @click="toggle">切换</button>
<home v-if="isShow"></home>
<photo v-else></photo>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<!--自定义模板组件-->
<template id="home">
<div>
<p>我是首页</p>
<input type="checkbox">
</div>
</template>
<template id="photo">
<div>
<p>我是登录界面</p>
</div>
</template>
<script>
Vue.component("home",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#home",
});
Vue.component("photo",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#photo",
});
let vue = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
toggle(){
this.isShow = !this.isShow;
}
},
computed:{}
});
</script>
</body>
</html>
效果:
- 动态切换组件
1.利用v-if/v-else-if/v-else的方法确实可以切换组件,但Vue组件中还有一种更加专业的方式:
<component v-bind:is="需要显示组件名称"></component>
2.当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题,为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。通过<keep-alive> 元素包裹动态组件，能够让它第一次被创建的时候缓存下来。
<body>
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="toggle">切换</button>
<keep-alive>
<component v-bind:is="name"></component>
</keep-alive>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<!--自定义模板组件-->
<template id="home">
<div>
<p>我是首页</p>
<input type="checkbox">
</div>
</template>
<template id="photo">
<div>
<p>我是登录界面</p>
</div>
</template>
<script>
Vue.component("home",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#home",
});
Vue.component("photo",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#photo",
});
let vue = new Vue({
el:"#app",
data:{
isShow:true,
name:"home"
},
methods:{
toggle(){
this.isShow = !this.isShow;
this.name = this.name === "home" ? "photo" : "home";
}
},
computed:{}
});
</script>
</body>
</html>
效果：
六.如何给组件添加动画
1.如何添加组件动画
给组件添加动画和过去给元素添加动画一样
如果单个组件就用transition
如果多个组件就用transition-group
2.过度动画注意点：
默认情况下进入动画和离开动画是同时进行的，如果想要一个做完再做另一个，就需要指定动画模式
3.Vue 提供了过渡模式:
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
.v-enter{
opacity: 0;
margin-left: 500px;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
/*用3s的时间过渡从显示开始到显示结束*/
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
/*用3s的时间过渡从隐藏开始到隐藏结束*/
transition: all 3s;
margin-left: 500px;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">切换</button>
<transition mode="out-in">
<component v-bind:is="name"></component>
</transition>
</div>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<!--自定义模板组件-->
<template id="home">
<div>
<p>我是首页</p>
<input type="checkbox">
</div>
</template>
<template id="photo">
<div>
<p>我是图片</p>
</div>
</template>
<script>
//3.1创建组件构造器
Vue.component("home",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#home",
});
Vue.component("photo",{
//注意点：在创建组件的时候，模板只能有一个根元素
template:"#photo",
});
let vue = new Vue({
el:"#app",
data:{
isShow:true,
name:"home"
},
methods:{
toggle(){
this.isShow = !this.isShow;
this.name = this.name === "home" ? "photo" : "home";
}
},
computed:{}
});
</script>
</body>
</html>
效果：
