101 lines
2.2 KiB
HTML
101 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>
|
|
</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: {
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// 定义一个混入对象
|
|
var myMixin = {
|
|
data: {
|
|
name: '111111'
|
|
},
|
|
created: function () {
|
|
this.a()
|
|
},
|
|
methods: {
|
|
hello: function () {
|
|
console.log('hello from mixin!')
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
new Vue({
|
|
el: '.app',
|
|
mixins: [myMixin],
|
|
data: {
|
|
|
|
},
|
|
directives: {
|
|
title: {
|
|
bind(el,binding,vnode,oldnode) {
|
|
console.log("el: ", el);
|
|
console.log("binding: ", binding.value);
|
|
document.title = binding.value
|
|
console.log("vnode: ", vnode);
|
|
console.log("oldnode: ", oldnode);
|
|
},
|
|
// 指令的定义
|
|
inserted: function (el) {
|
|
el.focus()
|
|
},
|
|
update() {
|
|
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
this.hello()
|
|
},
|
|
methods: {
|
|
a() {
|
|
console.log(this.name);
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |