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:组件数据的存放
如果 Vue 没有这条规则(data必须是函数),点击一个按钮就可能会影响到其它所有实例:
组件存放数据演示
<!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>