发表于 | 分类于 | | 阅读次数

什么是单向数据流
数据从父组件流向子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据

改变props的情况
1.作为data中局部数据的初始值使用
2.作为子组件中的computed属性

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

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<custorm :count="count"></custorm>
	
		</div>
		<script>
			Vue.component('custorm',{
				data:function(){
					return {
						incriem:this.count  //作为局部组件data的初始值
					}
				},
				computed:{
					incriem2:function(){
						return this.incriem
					}
				},
				props:['count'],
				template:`
					<div>
						<h2>我是自定义组件1</h2>
						<button @click="creat">点击</button>
						{{incriem2}}
						</div>
				`,
				methods:{
					creat(){
						this.incriem++;
					}
				}
			})

			let vm=new Vue({
				el:"#app",
				data:{
					count:0
				}
				
			})
		</script>
	</body>
</html>

发表于 | 分类于 | | 阅读次数

什么是单向数据流
数据从父组件流向子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据

改变props的情况
1.作为data中局部数据的初始值使用
2.作为子组件中的computed属性

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

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<custorm :count="count"></custorm>
	
		</div>
		<script>
			Vue.component('custorm',{
				data:function(){
					return {
						incriem:this.count  //作为局部组件data的初始值
					}
				},
				props:['count'],
				template:`
					<div>
						<h2>我是自定义组件1</h2>
						<button @click="creat">点击</button>
						{{incriem}}
						</div>
				`,
				methods:{
					creat(){
						this.incriem++;
					}
				}
			})

			let vm=new Vue({
				el:"#app",
				data:{
					count:0
				}
				
			})
		</script>
	</body>
</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
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div style="float: left;">
				<h2>自定义的下拉框</h2>
				<custorm btn="查询" :list="list1"></custorm>
			</div>
			<div style="float: left;">
					<h2>自定义的下拉框2</h2>
					<custorm btn="搜查" :list="list2"></custorm>
			</div>
	
		</div>
		<script>
			Vue.component('custorm',{
				data:function(){
					return{
						isshow:false,
						val:""
					}
				},
				props:["btn","list"],
				template:`
				<section class="warp">
						<div class="searchIpt clearFix">
							<div class="clearFix">
								<input type="text" class="keyWord" :value="val" @click="isshow=!isshow"/>
								<input type="button" :value="btn">
								<span></span>
							</div>
							<custormChild v-show="isshow" :listchild="list" v-on:recive="changeValueHandle"></custormChild>
						</div>
				</section>
				`,
				methods:{
					changeValueHandle(item){
						this.val=item;
					}
				}
			})
			Vue.component('custormChild',{
				props:["listchild"],
				template:`
				<ul class="list">
						<li v-for="item of listchild" @click="select(item)">{{item}}</li>
					</ul>
				`,
				methods:{
					select(item){
						this.$emit('recive',item)
					}
				}
			})


			let vm=new Vue({
				el:"#app",
				data:{
					list1:["北京","上海","广州"],
					list2:["张幸","张琪","zhangdaguo"]
				}
			})
		</script>
	</body>
</html>

###css

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

body{
	margin:0;
	font-family:"微软雅黑";
}
ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
input{
	outline:none;
	cursor: pointer;
}
.clearFix:after{
	display: block;
	content:'';
	clear:both;
}
.warp{
	width: 348px;
	padding:100px 76px 50px;
	margin:50px;
	background:url(images/select_bg.png) no-repeat;
	box-shadow:2px 2px 10px #6789ad;
}
.searchIpt{
	position: relative;
	width: 336px;
	border:1px solid #3736ae;
	padding:5px;
	border-radius:24px;
	background: #e4e4fe;
}
.searchIpt input{
	line-height: 34px;
	border-radius:18px;
}
.searchIpt input:nth-of-type(1){
	float: left;
	width: 228px;
	padding-left: 40px;
	border:1px solid #c9c9d5;
	background: #d9d9e2;

}
.searchIpt input:nth-of-type(2){
	float: right;
	width: 58px;
	height: 36px;
	border:1px solid #fd635e;
	background: #fd635e;
}
.searchIpt span{
	position: absolute;
	top:12px;
	left: 15px;
	width: 23px;
	height: 23px;
	background: url(images/select_search.png) no-repeat;
}
.searchIpt input:nth-of-type(1):focus{
	background: #fff;
	border-color:#fd635e;
}
.list{
	margin-top:9px;
}
.list li{
	margin:3px 0;
	color:#333;
	line-height: 30px;
	padding-left: 16px;
	width: 270px;
	box-sizing:border-box;
	border-radius:14px;

}
.list li.active,.list li:hover{
	color:#fff;
	background: #fd635e;
	cursor: pointer;
}

发表于 | 分类于 | | 阅读次数 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background: red;}
        #div2{width: 50px;height: 50px;background: yellow;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <script>
        // 子级影响父级bug的解决方式
        /* 
            2.js方法解决方式  如下  
            
         */
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseenter=function(ev){
                var ev = ev || window.event;
                var a = this, b = ev.relatedTarget;
                
                // console.log(a.innerHTML);
                // console.log(b.innerHTML);
                
                if( !elContains(a,b) && a!=b ){
                    
                    document.title += '1';
                    
                }
            }
            oDiv1.onmouseout = function(ev){
                
                var ev = ev || window.event;
                var a = this, b = ev.relatedTarget;
                
                if(!elContains(a,b) && a!=b){
                    document.title += '2';
                    
                }
            };
        }

        
        function elContains(a, b){  //判断两个元素是否是嵌套关系  a是否嵌套包含b
            
            return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
            
        }

    </script>
</body>
</html>