72 lines
1.5 KiB
HTML
72 lines
1.5 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">
|
|
<div class="header" v-title="'测试标题'"></div>
|
|
<love_p>
|
|
<template slot-scope="scope" slot="test">
|
|
<h2>dqdqwdqw</h2>
|
|
<a>{{ scope.text }}</a>
|
|
</template>
|
|
|
|
<template v-slot:zhangsan>
|
|
<h2>zhangsan</h2>
|
|
</template>
|
|
</love_p>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script>
|
|
|
|
Vue.component('love_p', {
|
|
template: `
|
|
<div>
|
|
<h2>{{title}}</h2>
|
|
|
|
<slot name="test" :text="biaoto"></slot>
|
|
<hr/>
|
|
<slot name="zhangsan"></slot>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
title: '组件 love_p',
|
|
biaoto: '哈哈哈哈哈test'
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
});
|
|
|
|
new Vue({
|
|
el:'.app',
|
|
// mixins:[myMixin],
|
|
data:{},
|
|
directives:{
|
|
title:{
|
|
bind(el,binding,vnode,lodnode){
|
|
document.title = binding.value
|
|
},
|
|
inserted:function(el){
|
|
el.focus()
|
|
},
|
|
update(){}
|
|
}
|
|
},
|
|
created(){},
|
|
methods:{}
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</html> |