-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path09.html
106 lines (105 loc) · 2.06 KB
/
09.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task-09</title>
<script src="vue/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app-01">
<com-keymod >
<com-keymod></com-keymod>
</com-keymod>
</div>
<div id="app-02">
<span>hello i'm parent text</span>
<br>
<com-02>
<p slot="foo">hello i'm parent text in child</p>
</com-02>
<com-03>
<com-04></com-04>
</com-03>
</div>
<script>
Vue.component('com-keymod',{
render:function(createElement){
var vm=this
return createElement(
'div',
{
on:{
'!click':this.doThisInCapturingMode,
'~mouseover':this.doThisOnceInCapturingModeOver,
'~mouseleave':this.doThisOnceInCapturingModeLeave
}
},
[
createElement('input',{
on:{
keyup:function(event){
if(event.target!==event.currentTarget)
this.value=1
if(!event.shiftKey||event.keyCode!==13)
this.value=2
}
}
}),
vm.value,
this.$slots.default
]
)
},
data:function(){
return {value:0}
},
methods:{
doThisInCapturingMode:function(){
this.value=3
},
doThisOnceInCapturingModeOver:function(){
this.value+=1
},
doThisOnceInCapturingModeLeave:function(){
this.value-=1
}
}
})
Vue.component('com-02',{
// template:'<div><slot name="foo"></slot></div>'
render:function(createElement){
return createElement('div',this.$slots.foo)
}
})
Vue.component('com-04',{
// template:'<div><slot :text="msg"></slot></div>'
render:function(createElement){
return createElement('div',[
this.$scopedSlots.default({
text:this.msg
})])
}
})
Vue.component('com-03',{
// template:'<child><template scope="props"><span>{{props.text}}</span></template></child>'
render:function(createElement){
return createElement('com-04',{
scopedSlots:{
default:function(props){
return createElement('span',props.text)
}
}
})
}
})
var app01=new Vue({
el:'#app-01'
})
var app02=new Vue({
el:'#app-02'
})
</script>
</body>
</html>