-
Notifications
You must be signed in to change notification settings - Fork 144
/
Copy path22.语法糖.html
107 lines (99 loc) · 2.92 KB
/
22.语法糖.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
107
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<table>
<tr is="parent"></tr>
</table>-->
//给parent 模板传递了一个msg变量
<!--message = who ar you-->
<!--:message="'1'"-->
<!--//这里是原本界面的data -->
全局下的<input type="text" v-model="data">
<!--//默认是单向数据流-->
<parent :message.sync="data"></parent>
<template id="parent"><br>
parent<input type="text" v-model="message">
<div>parent {{message}} {{message2}}</div>
<div>parent</div>
<ch></ch>
</template>
<template id="child">
<div>child</div>
<div>child</div>
</template>
</div>
<script src="vue.js"></script>
<script>
//我们想传递数据 先从属性 传递到props 在从props取出来绑定到组件里
//:message="1" 是绑定的数字1
//message="1" 绑定的字符串1 只能传递字符串1
//组件的嵌套
//先创建自组件，子组件创建后插到父组件里
//vuex
Vue.component('parent',{
template:'#parent',
props:{ //对属性进行验证
'message':{
type:[String], //只能传递字符串类型的
default: function () {
return 100 //默认值可以不符合type类型
},
twoWay:true, //要求必须是双向的
validator: function (v) {//不写的话没有校验器
//v就代表传进来的值 校验v的值是否是你的预期
return true
//v==='who are you6000'
},
coerce: function (v) {
console.log(v);
//传进来的值 强制进行改变 在验证之前
return v;//之后开始检测type是否符合
}
},
'message2':{
default: function () {
return 200
},
coerce: function (v) {
console.log(v);
//传进来的值 强制进行改变 在验证之前
return 2000;//之后开始检测type是否符合
}
}
}, //属性
components:{
ch:{
template:'#child'
}
}
});
//组件和数据交互
/*var child = Vue.extend({
template:'<div>child</div>'
});
//只能在父组件里使用
var parent = Vue.extend({
template:'<div>parent</div><ch></ch>',
components:{
ch:child
}
});
//只注册了父亲组件
Vue.component('parent',parent);*/
/*Vue.component('com',{
template:'<div>hello</div>'
});*/
var vm = new Vue({
el:'#app',
data:{
data:'who are you'
}
});
</script>
</body>
</html>