182 lines
4.3 KiB
HTML
182 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
<lb_header @send="fatherClick" :h_title="title" :gethello="test" user-name="张三">
|
|
</lb_header>
|
|
|
|
<h2>{{ title | str }}</h2>
|
|
|
|
<div v-title="title" class="ddd" ref="content">中间内容</div>
|
|
|
|
app 组件
|
|
<v-footer @main="zhongz">
|
|
<template v-slot:three>
|
|
<div class="">three</div>
|
|
</template>
|
|
|
|
<template v-slot:one="slotProps">
|
|
<li class="">{{ slotProps.data.title }}</li>
|
|
</template>
|
|
|
|
<template v-slot:two>
|
|
<div class="">two</div>
|
|
</template>
|
|
</v-footer>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
<script>
|
|
|
|
var httpPage = {
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
totalPage: 0
|
|
}
|
|
},
|
|
methods: {
|
|
bottom() {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// 全局组件
|
|
Vue.component('lb_header', {
|
|
// props: ['h_title'],
|
|
props: {
|
|
h_title: {
|
|
type: String,
|
|
default: '默认标题'
|
|
},
|
|
userName: {
|
|
type: String,
|
|
default: "你好"
|
|
},
|
|
gethello: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
template: `<h2 @click="setdd">{{ test }} {{ h_title }} {{ userName }} {{gethello}}</h2>`,
|
|
data() {
|
|
return {
|
|
test: '全局组件',
|
|
children: '孩子的数据'
|
|
}
|
|
},
|
|
methods: {
|
|
setdd() {
|
|
this.$emit('send', this.children)
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
// 局部组件
|
|
var lb_footer = {
|
|
template: `
|
|
<div>
|
|
<div>局部组件 {{ hello }} - footer</div>
|
|
<button @click="fasong">点我向兄弟传递数据</button>
|
|
|
|
<ul>
|
|
<slot :data="item" v-for="(item,index) in list" name="one"></slot>
|
|
</ul>
|
|
<slot name="two"></slot>
|
|
<slot name="three"></slot>
|
|
</div>
|
|
`,
|
|
mixins: [httpPage],
|
|
data() {
|
|
return {
|
|
hello: '你好',
|
|
list: [
|
|
{ title: "新闻1", name: '子标题1' },
|
|
{ title: "新闻2", name: '子标题2' },
|
|
{ title: "新闻3", name: '子标题3' },
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
console.log("this.page: ", this.page);
|
|
},
|
|
methods: {
|
|
fasong() {
|
|
this.$emit("main", this.hello)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 父子组件之间相互可以传递数据
|
|
// 父 ---> 子 props
|
|
// 子 ---> 父 $emit
|
|
|
|
// ref refs
|
|
|
|
|
|
var vm = new Vue({
|
|
el: '.app',
|
|
data: {
|
|
title: "哈哈哈哈哈哈",
|
|
test: '',
|
|
},
|
|
beforeCreate() {
|
|
console.log(this.title);
|
|
},
|
|
created() {
|
|
console.log(this.title);
|
|
console.log(this.$refs.content);
|
|
},
|
|
mounted() {
|
|
console.log(this.$refs.content);
|
|
},
|
|
beforeUpdate() {
|
|
console.log("监听到页面发生修改了");
|
|
},
|
|
watch: {
|
|
title: function (newVal, oldVal) {
|
|
console.log("watch title === :",newVal, oldVal);
|
|
}
|
|
},
|
|
methods: {
|
|
fatherClick(res) {
|
|
console.log(res);
|
|
},
|
|
zhongz(res) {
|
|
this.test = res;
|
|
console.log(this.test);
|
|
}
|
|
},
|
|
filters: {
|
|
str(val) {
|
|
return val.substring(0,3)+"..."
|
|
}
|
|
},
|
|
computed: {
|
|
test2() {
|
|
|
|
}
|
|
},
|
|
directives: {
|
|
title (el, binding, vnode) {
|
|
document.title = binding.value
|
|
}
|
|
},
|
|
components: {
|
|
'v-footer': lb_footer
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |