Vue——邂逅Vue
Vue——Vue的基礎語法
Vue——Vue的組件化
Vue——slot_插槽的基本使用
文章目錄
1：組件化的介紹和使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<cpn></cpn>
</div>
<script>
const cpn=Vue.extend({
template: '<div><h1>dada</h1></div>'
});
Vue.component('cpn',cpn)
</script>
</body>
</html>
2：組件步驟解析
3：全局組件和局部組件
以下演示局部組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<cpns></cpns>
</div>
<script>
const cpn=Vue.extend({
template: '<div><a>dadadd</a></div>'
});
console.log(1);
Vue.component('cpns',cpn);
console.log(2);
//局部組件
const demo=new Vue({
el: '#demo',
components: {
cpns: cpn
}
})
</script>
</body>
</html>
4：父組件和子組件
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<mycp></mycp>
</div>
<script>
const cpp=Vue.extend({
template: '<div><h1>ppp</h1></div>',
})
const cps=Vue.extend({
template: '<div><h1>sss</h1><cpp></cpp></div>',
components: {
cpp: cpp
}
})
const demo=new Vue({
el: "#demo",
components: {
mycp: cps
}
})
</script>
</body>
</html>
5：註冊組件的語法糖
代碼示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<cpns></cpns>
</div>
<script>
const demo=new Vue({
el: '#demo',
components: {
cpns: {
template: '<div><a>dadadd</a></div>'
}
}
})
</script>
</body>
</html>
6：組件模板抽離的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<mycp></mycp>
</div>
<template id="demo1">
<div>
<h1>sss</h1>
</div>
</template>
<script>
const cpp=Vue.extend({
template: '#demo1',
})
const demo=new Vue({
el: "#demo",
components: {
mycp: cpp
}
})
</script>
</body>
</html>
7：組件數據的存放
組件存放數據演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo2">
<mycp></mycp>
</div>
<template id="demo">
<div>
<h2>{{message}}</h2>
<h1>dadad</h1>
</div>
</template>
<script>
const a=Vue.extend({
template: '#demo',
data() {
return {
message: 11
}
}
})
const demo=new Vue({
el: '#demo2',
components: {
mycp: a
}
})
</script>
</body>
</html>
8：父子組件的通信
8.1 props基本用法——父傳子
代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<mycp v-bind:datas="datas"></mycp>
</div>
<template id="demo">
<div>{{datas}}</div>
</template>
<script>
const cps=Vue.extend({
template: '#demo',
props: ['datas'],
})
const app=new Vue({
el: "#app",
data: {
datas: ['daa','aaa','aaa']
},
components: {
'mycp': cps
}
})
</script>
</body>
</html>
8.1.1 props數據驗證
8.1.2 父組件訪問子組件：$children
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<mycp v-bind:datas="datas"></mycp>
<button v-on:click="btnclick()">點擊</button>
</div>
<template id="demo">
<div>{{datas}}
</div>
</template>
<script>
const cps=Vue.extend({
template: '#demo',
props: ['datas'],
})
const app=new Vue({
el: "#app",
data: {
datas: ['daa','aaa','aaa']
},
components: {
'mycp': cps
},
methods: {
btnclick(){
console.log(this.$children[0].name)
// console.log(this.$children.datas[0])
}
}
})
</script>
</body>
</html>
8.2 子傳父
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<mycp v-on:itemclick="accpetnews"></mycp>
</div>
<template id="demo">
<div>
<button type="button" v-for="item in species" v-on:click="btnclick(item)">{{item.name}}</button>
</div>
</template>
<script>
const cps=Vue.extend({
template: '#demo',
data() {
return {
species: [{id: 'aa',name: '遊戲'},
{id: 'bb',name: '生活'},
{id: 'cc',name: '學習'}
]
}
},
methods: {
btnclick(item) {
//console.log(item)
//子組件發送事件
this.$emit('itemclick')
}
}
})
const app=new Vue({
el: "#app",
data: {
datas: ['daa','aaa','aaa']
},
components: {
'mycp': cps
},
methods: {
accpetnews(){
console.log(1)
}
}
})
</script>
</body>
</html>
8.2.1 子組件訪問父組件：$parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<mycp v-bind:datas="datas"></mycp>
</div>
<template id="demo">
<div>{{datas}}
<button v-on:click="btnclick()">點擊</button>
</div>
</template>
<script>
const cps=Vue.extend({
template: '#demo',
props: ['datas'],
methods: {
btnclick(){
console.log(this.$parent)
// console.log(this.$children.datas[0])
}
}
})
const app=new Vue({
el: "#app",
data: {
datas: ['daa','aaa','aaa']
},
components: {
'mycp': cps
}
})
</script>
</body>
</html>