92 lines
2.0 KiB
HTML
92 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>vue</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<img :src="hello | test" alt="">
|
|
<lb_header v-title="'首页'">
|
|
<template v-slot:selectinput>
|
|
<div class="aaaaa">管理后台查询条件的html</div>
|
|
</template>
|
|
|
|
<template v-slot:selectlist>
|
|
<div class="tsssssest">dfdddd</div>
|
|
</template>
|
|
|
|
|
|
<template v-slot:default="{ list }">
|
|
{{ list }}
|
|
</template>
|
|
|
|
|
|
</lb_header>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
Vue.directive('title', {
|
|
|
|
inserted: function (el,binding,vnode) {
|
|
console.log(el);
|
|
console.log(binding.value);
|
|
console.log(vnode);
|
|
document.title = binding.value
|
|
}
|
|
});
|
|
|
|
|
|
Vue.component("lb_header", {
|
|
data() {
|
|
return {
|
|
text: '我是lb_header组件传递给父亲的数据',
|
|
list: [
|
|
1, 2, 3, 4, 5, 6
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
demos() {
|
|
|
|
}
|
|
},
|
|
template: `
|
|
<h2 @click="demos">
|
|
{{ text }}
|
|
<div class="right">
|
|
<slot name="selectinput">
|
|
|
|
</slot>
|
|
<slot name="selectlist">
|
|
|
|
</slot>
|
|
|
|
<slot :list="list"></slot>
|
|
</div>
|
|
</h2>
|
|
`
|
|
})
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
created() {
|
|
},
|
|
data: {
|
|
hello: '/img/PC_803382a656108089122dc9a79d2729e8.png'
|
|
},
|
|
methods: {
|
|
},
|
|
filters: {
|
|
test(v) {
|
|
return "https://www.baidu.com" + v
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |