定义Vue组件
什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:
- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局组件定义的三种方式
使用 Vue.escend 配合 Vue.component 方法
<body>
<div id="app">
<!-- 如果要使用组件,直接把组件的名称,以HTML标签的形式,引入到页面中,即可 -->
<!-- <my-com1></my-com1> -->
<mycom1></mycom1>
</div>
<script>
// 使用 Vue,extend 来创建全局的Vue组件
// var com1 = Vue.extend({
// template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,制定了组件要展示的HTML结构
// })
// 使用 Vue.component('组件的名称',创建出来的组件模板对象)
// 如果使用 Vue.component 东一全局组件的时候,组件名称使用了 驼峰命名 ,则键引用组件的时候,需要把 大写的驼峰改为小写的字母,同事,两个单词之间 使用 - 连接
// 如果不适用驼峰,则直接拿名称来使用即可
// Vue.component('myCom1', com1)
// Vue.component('mycom1', com1)
// Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是以标签的形式 来引入 它的
// 第二个参数:Vue.extend 创建的组件,其中 template 就是组件将来要展示的HTML内容
Vue.component('mycom1', Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
}))
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
})
</script>
</body>
直接使用 Vue.component 方法
<body>
<div id="app">
<!-- 还是使用 标签形式,引入自己的组件 -->
<mycom2></mycom2>
</div>
<script>
Vue.component('mycom2', {
// 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只有唯一的一个根元素
template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
将模板字符串,定义到 script 标签中
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<template id="tmp1">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template>
<div id="app2">
<login></login>
</div>
<template id="tmpl2">
<div>
<h1>这是私有的 login 组件</h1>
</div>
</template>
<script>
Vue.component('mycom3', {
template: '#tmp1'
})
var vm = new Vue({
el: '#app'
})
var vm = new Vue({
el: '#app2',
data: {},
methods: {
},
filters: {},
directives: {},
components: { // 定义实例内部私有组件的
login: {
template: '#tmpl2'
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
})
</script>
</body>
组件中的data使用方式
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmp1">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
var dataObj = {
count: 0
}
// 这是一个计数器的组件,身上有个按钮,每当点击按钮, 让 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmp1',
data: function() {
// return dataObj;
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
},
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
})
</script>
</body>
组件切换
使用 flag 切换组件
<body>
<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> </body>
使用 component 标签切换组件
<body>
<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, transitionGroup -->
</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>
组件切换动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- Vue提供了 component ,来展示对应名称的组件 -->
<!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
<!-- 通过 mode 属性,设置组件切换的时候的 模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
<!-- 总结:当前学了几个 Vue 提供的标签 -->
<!-- component, template, transition, transitionGroup -->
</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>