173 lines
3.6 KiB
HTML
173 lines
3.6 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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
{{ message }}
|
|
<lb_header>
|
|
<template v-slot:one>
|
|
<h2>测试 one</h2>
|
|
</template>
|
|
|
|
<template v-slot:two>
|
|
<h2>测试 two</h2>
|
|
</template>
|
|
</lb_header>
|
|
<lb_footer v-demo="1" @send="getData"></lb_footer>
|
|
|
|
|
|
<h2>{{ tips | copyright }}</h2>
|
|
<h2>{{ message }}</h2>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
|
<script>
|
|
// 组件
|
|
// 全局组件 Vue.component
|
|
// 局部组件
|
|
// 父 --> 子 props
|
|
// 子 --> 父 $emit 事件来回传数据
|
|
|
|
// 插槽 默认插槽
|
|
// 别名插槽
|
|
// 作用域插槽
|
|
// 可以把数据从子组件抛出去给父组件
|
|
// 同一个组件在不同地方使用，响应事件的处理方式不一样
|
|
|
|
// 状态过渡
|
|
// 混入 代码封装
|
|
// 自定义指令
|
|
// 过滤器
|
|
|
|
// 路由 地址
|
|
|
|
// vuecli2.x 3.x （不写项目）
|
|
// 封装脚手架
|
|
|
|
// vue 3.x vite Pinia ts 博客 状态管理 vuex
|
|
// linux部署(选配)
|
|
// 电商(ts)
|
|
|
|
// react
|
|
|
|
//
|
|
|
|
// uniapp flutter ( ts+js+java = dart )
|
|
|
|
// 小程序
|
|
var loadMore = {
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
totalPage: 0
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
load: function () {
|
|
console.log('hello from mixin!: ')
|
|
}
|
|
}
|
|
}
|
|
|
|
Vue.directive('demo', {
|
|
bind: function (el, binding, vnode) {
|
|
console.log("el: ", el);
|
|
console.log("binding: ", binding);
|
|
console.log("vnode: ", vnode);
|
|
}
|
|
})
|
|
|
|
|
|
// 定义局部组件
|
|
var footers = {
|
|
data() {
|
|
return {
|
|
text: '公共底部',
|
|
children: "我是footer子组件的数据"
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$emit("send", this.children)
|
|
},
|
|
methods: {
|
|
// ddd() {
|
|
// this.$emit("send", this.children)
|
|
// }
|
|
},
|
|
template: `
|
|
<div class="footer">
|
|
<h2 >底部 {{ text }}</h2>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
Vue.component('lb_header', {
|
|
// props: ['msg'],
|
|
mixins: [loadMore],
|
|
props: {
|
|
msg: {
|
|
type: String,
|
|
default: "默认值"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
text: 1
|
|
}
|
|
},
|
|
created() {
|
|
this.load()
|
|
},
|
|
template: `
|
|
<div class="header">
|
|
<h2>头部 {{ msg }}</h2>
|
|
<hr/>
|
|
<slot name="one"></slot>
|
|
<hr/>
|
|
<slot name="two"></slot>
|
|
|
|
</div>
|
|
`
|
|
});
|
|
|
|
|
|
|
|
let vm = new Vue({
|
|
el: ".app",
|
|
mixins: [loadMore],
|
|
data: {
|
|
message: '父组件',
|
|
tips: "我是数据"
|
|
},
|
|
created() {
|
|
this.load()
|
|
},
|
|
// 注册局部组件
|
|
components: {
|
|
'lb_footer': footers
|
|
},
|
|
methods: {
|
|
getData(res) {
|
|
console.log(res);
|
|
}
|
|
},
|
|
filters: {
|
|
copyright(value){
|
|
return value + ' --- 版权来自bmy'
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |