1.1 创建全局组件
- 第一种:创建全局组件-Vue.extend
- 第二种:创建全局组件-直接使用Vue.component进行创建
- 第三种:引入自定义组件(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1></mycom1>
<mycom2></mycom2>
<my-com3></my-com3>
<mycom4></mycom4>
</div>
<template id="com4">
<div>
<h1>全局组件4</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var com1 = Vue.extend({
template:'<h1>全局组件1</h1>'
})
Vue.component('mycom1',com1)
Vue.component('mycom2', {
template:'<h1>全局组件2</h1>'
})
Vue.component('myCom3', {
template:'<h1>全局组件3</h1>'
})
Vue.component('mycom4', {
template:'#com4'
})
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
age:'',
list:[
{id:1,name:'小米',age:18},
{id:2,name:'小明',age:28},
{id:3,name:'小宜',age:38}
]
},
methods:{
btn(){
var newobj = {id:this.id,name:this.name,age:this.age}
this.list.push(newobj);
}
},
})
</script>
</body>
</html>
1.2 创建私有组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="com2">
<div>
<h1>私有组件2</h1>
</div>
</template>
<template id="com3">
<div>
<h1>私有组件3</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom3 = {
template: '#com3'
}
var vm = new Vue({
el: '#app',
data: {
},
methods:{
},
components:{
mycom1:{
template:'<h1>私有组件1</h1>'
},
mycom2:{
template:'#com2'
},
mycom3
}
})
</script>
</body>
</html>
1.3 组件中的data和methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
<template id="com1">
<div>
<h1>私有组件2=={{msg}}</h1>
<button @click="show">点击</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom1 = {
template: '#com1',
data(){
return{
msg:'Hello Vue'
}
},
methods:{
show(){
console.log('Hello World')
}
},
created(){
this.show();
}
}
var vm = new Vue({
el: '#app',
data: {
},
methods:{
},
components:{
mycom1
}
})
</script>
</body>
</html>
1.4 组件选项卡切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<a @click="btn(0)">登录</a>
<a @click="btn(1)">注册</a>
<login v-if="flag"></login>
<register v-else></register>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var login = {
template:'<h1>登录</h1>'
}
var register = {
template:'<h1>注册</h1>'
}
var vm = new Vue({
el: '#app',
data: {
flag:true
},
methods:{
btn(i){
if(i==0){
this.flag = true
}else{
this.flag = false
}
}
},
components:{
login,
register
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<component :is="'home'"></component>
<a @click="tab('login')">登录</a>
<a @click="tab('register')">注册</a>
<a @click="tab('home')">首页</a>
<component :is="comName"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var login = {
template:'<h1>登录</h1>'
}
var register = {
template:'<h1>注册</h1>'
}
var home = {
template:'<h1>Home</h1>'
}
var vm = new Vue({
el: '#app',
data: {
flag:true,
comName:'home'
},
methods:{
tab(i){
this.comName = i;
}
},
components:{
login,
register,
home
}
})
</script>
</body>
</html>
1.5 动画组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition:all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<a @click="tab('login')">登录</a>
<a @click="tab('register')">注册</a>
<a @click="tab('home')">首页</a>
<transition name="" mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var login = {
template:'<h1>登录</h1>'
}
var register = {
template:'<h1>注册</h1>'
}
var home = {
template:'<h1>Home</h1>'
}
var vm = new Vue({
el: '#app',
data: {
flag:true,
comName:'home'
},
methods:{
tab(i){
this.comName = i;
}
},
components:{
login,
register,
home
}
})
</script>
</body>
</html>
1.6 父组件向子组件传值
- props:[‘sendmsg’]
- props:{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1 :sendmsg="msg"></mycom1>
</div>
<template id="com1">
<div>
<h1>子组件1 == {{sendmsg}}</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom1 = {
template:'#com1',
props:{
sendmsg:{
type:String
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg:'父组件中的msg'
},
methods:{
},
components:{
mycom1
}
})
</script>
</body>
</html>
1.7 父组件向子组件传递方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1 :sendmsg="msg" @sendfn="show"></mycom1>
</div>
<template id="com1">
<div>
<h1>子组件1 == {{sendmsg}}</h1>
<button @click="btn">点击</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom1 = {
template:'#com1',
props:{
sendmsg:{
type:String
}
},
methods:{
btn(){
this.$emit('sendfn')
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg:'父组件中的msg'
},
methods:{
show(){
console.log('Hello World');
}
},
components:{
mycom1,
}
})
</script>
</body>
</html>
1.8 子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<mycom1 :sendmsg="msg" @sendfn="show"></mycom1>
<ul>
<li v-for="(item,i) in newlist" :key="i">
{{item.id}}=={{item.name}}
</li>
</ul>
</div>
<template id="com1">
<div>
<h1>子组件1 == {{sendmsg}}</h1>
<button @click="btn">点击</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom1 = {
template:'#com1',
props:{
sendmsg:{
type:String
}
},
data(){
return{
newmsg:'----子组件中的msg',
list:[
{id:1,name:'小米'},
{id:2,name:'小王'},
{id:3,name:'小宋'}
]
}
},
methods:{
btn(){
this.$emit('sendfn', this.list);
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg:'---父组件中的msg',
newlist:[]
},
methods:{
show1(data, data1){
console.log('Hello World'+ data + data1);
},
show(data){
this.newlist = data;
}
},
components:{
mycom1,
}
})
</script>
</body>
</html>
1.9 Vue获取DOM元素的方法(ref)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/animation.css"/>
</head>
<body>
<div id="app">
<h1 ref="h1text">Hello</h1>
<button @click="btn">点击</button>
<mycom1 ref="mycom1"></mycom1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var mycom1 = {
template:'<h1>mycom1组件</h1>',
data(){
return{
msg:'hello Vue'
}
},
methods:{
show(){
console.log(123);
}
}
}
var vm = new Vue({
el: '#app',
data: {
},
methods:{
btn(){
console.log(this.$refs.h1text.innerText);
console.log(this.$refs.mycom1.msg);
this.$refs.mycom1.show();
}
},
components:{
mycom1,
}
})
</script>
</body>
</html>