106 lines
2.2 KiB
HTML
106 lines
2.2 KiB
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>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- view -->
|
|
<div class="test">
|
|
|
|
<lb_header :text="title" @fefrefre="ddddddddd" user-name="1"></lb_header>
|
|
|
|
<div class="content">
|
|
中间内容
|
|
</div>
|
|
|
|
<lb_footer></lb_footer>
|
|
|
|
<jubua></jubua>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var a = 1
|
|
// 组件？ 将网页拆分为一个个小零件（组件），需要用到的时候进行引用
|
|
// 全局组件
|
|
// 局部组件
|
|
// 父子组件
|
|
// 父 ---> 子 传递数据 props
|
|
// 子 ---> 父 传递数据 $emit
|
|
|
|
Vue.component("lb_header", {
|
|
// props: ['text'],
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: '哈哈哈哈默认数值'
|
|
},
|
|
userName: {
|
|
type: String,
|
|
default: '用户名'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
aaaa: '我是lb_header组件传递给父亲的数据'
|
|
}
|
|
},
|
|
methods: {
|
|
demos() {
|
|
this.$emit("fefrefre", this.aaaa)
|
|
}
|
|
},
|
|
template: `
|
|
<h2 @click="demos">{{ text }} | {{ userName }}</h2>
|
|
`
|
|
})
|
|
|
|
Vue.component("lb_footer", {
|
|
data() {
|
|
return {
|
|
text: '我是app的底部导航'
|
|
}
|
|
},
|
|
methods: {
|
|
Text() {
|
|
alert(1)
|
|
}
|
|
},
|
|
template: `
|
|
<h2 @click="Text">{{ text }}</h2>
|
|
`
|
|
})
|
|
|
|
|
|
// 局部组件
|
|
var JuBuA = {
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {},
|
|
template: `<p>我是局部注册的组件</p>`
|
|
}
|
|
|
|
var vm = new Vue({
|
|
el: '.test',
|
|
data: {
|
|
title: '0'
|
|
},
|
|
methods: {
|
|
ddddddddd(res) {
|
|
console.log(res);
|
|
}
|
|
},
|
|
components: {
|
|
'jubua': JuBuA
|
|
}
|
|
})
|
|
</script>
|
|
</html> |