Skip to content

Commit 068df3c

Browse files
author
zhangwanjing
committed
第5章
1 parent f7951ff commit 068df3c

File tree

5 files changed

+77
-50
lines changed

5 files changed

+77
-50
lines changed

‎Vue3/vue3js/第5章/1.application.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vue应用</title>
8+
<title>1. 应用</title>
89
<script src="https://unpkg.com/vue@next"></script>
910
</head>
11+
1012
<body>
1113
<div id="Application">
1214
<button @click="click">单击</button>
1315
</div>
1416
<script>
1517
const appData = {
16-
data:{
17-
count:0
18+
data: {
19+
count: 0
1820
}
1921
}
2022
const App = Vue.createApp({
21-
data(){
23+
data() {
2224
return appData
2325
},
2426
computed: {
2527
countString: {
26-
get(){
28+
get() {
2729
return this.count + "次"
2830
}
2931
}
3032
},
31-
methods:{
32-
click(){
33+
methods: {
34+
click() {
3335
this.data.count += 1
3436
}
3537
},
36-
watch:{
37-
data:{
38+
watch: {
39+
data: {
3840
handler(value, oldValue) {
3941
console.log(value, oldValue)
4042
},
41-
deep:true
43+
deep: true
4244
}
4345
}
4446
})
4547
App.mount("#Application")
4648
</script>
4749
</body>
50+
4851
</html>

‎Vue3/vue3js/第5章/2.component.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vue组件</title>
8+
<title>2. 自定义Vue组件</title>
89
<script src="https://unpkg.com/vue@next"></script>
910
</head>
11+
1012
<body>
1113
<div id="Application">
1214
<my-input v-model="inputText"></my-input>
@@ -15,23 +17,24 @@
1517
</div>
1618
<script>
1719
const App = Vue.createApp({
18-
data(){
20+
data() {
1921
return {
20-
inputText:""
22+
inputText: ""
2123
}
2224
},
2325
})
2426
const inputComponent = {
25-
props:["modelValue"],
26-
methods:{
27-
action(event){
28-
this.$emit('update:modelValue', event.target.value)
27+
props: ["modelValue"],
28+
methods: {
29+
action(event) {
30+
this.$emit('update:modelValue', event.target.value)
2931
}
3032
},
31-
template:`<div><span>输入框：</span><input :value="modelValue" @input="action"/></div>`
33+
template: `<div><span>输入框：</span><input :value="modelValue" @input="action"/></div>`
3234
}
3335
App.component("my-input", inputComponent)
3436
App.mount("#Application")
3537
</script>
3638
</body>
39+
3740
</html>

‎Vue3/vue3js/第5章/3.slot.html‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vue组件插槽</title>
8+
<title>3. 插槽</title>
89
<script src="https://unpkg.com/vue@next"></script>
910
</head>
11+
1012
<body>
1113
<div id="Application">
1214
<my-container2>
13-
<template #header>
14-
<h1>这里是头部元素</h1>
15+
<!-- 1.具名插槽 -->
16+
<template v-slot:header>
17+
这里是头部元素 <br />
18+
2. 注入插槽 两种写法：v-slot:header = #header
19+
1520
</template>
16-
21+
<!-- <template #header>
22+
<h1>这里是头部元素</h1>
23+
</template> -->
24+
1725
<template #main>
1826
<p>内容部分</p>
1927
<p>内容部分</p>
2028
</template>
21-
29+
2230
<template #footer>
2331
<p>这里是尾部元素</p>
2432
</template>
@@ -28,7 +36,8 @@ <h1>这里是头部元素</h1>
2836
const App = Vue.createApp({
2937
})
3038
const container2Component = {
31-
template:`<div>
39+
template: `<div>
40+
1. 定义插槽
3241
<slot name="header"></slot>
3342
<hr/>
3443
<slot name="main"></slot>
@@ -38,12 +47,13 @@ <h1>这里是头部元素</h1>
3847
}
3948
App.component("my-container2", container2Component)
4049
const containerComponent = {
41-
template:`<div style="border-style:solid;border-color:red; border-width:10px">
50+
template: `<div style="border-style:solid;border-color:red; border-width:10px">
4251
<slot>插槽的默认内容</slot>
4352
</div>`
4453
}
4554
App.component("my-container", containerComponent)
4655
App.mount("#Application")
4756
</script>
4857
</body>
58+
4959
</html>

‎Vue3/vue3js/第5章/4.dynamic.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vue动态组件</title>
8+
<title>4. 动态组件</title>
89
<script src="https://unpkg.com/vue@next"></script>
910
</head>
11+
1012
<body>
1113
<div id="Application">
12-
<input type="radio" value="page1" v-model="page"/>页面1
13-
<input type="radio" value="page2" v-model="page"/>页面2
14+
<input type="radio" value="page1" v-model="page" />页面1
15+
<input type="radio" value="page2" v-model="page" />页面2
16+
<br />
17+
:is="page"动态插槽
1418
<component :is="page"></component>
1519
</div>
1620
<script>
1721
const App = Vue.createApp({
18-
data(){
22+
data() {
1923
return {
20-
page:"page1"
24+
page: "page1"
2125
}
2226
}
2327
})
2428
const page1 = {
25-
template:`<div style="color:red">
29+
template: `<div style="color:red">
2630
页面组件1
2731
</div>`
2832
}
2933
const page2 = {
30-
template:`<div style="color:blue">
34+
template: `<div style="color:blue">
3135
页面组件2
3236
</div>`
3337
}
@@ -36,4 +40,5 @@
3640
App.mount("#Application")
3741
</script>
3842
</body>
43+
3944
</html>

‎Vue3/vue3js/第5章/5.switch.html‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,64 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vue开关组件</title>
8+
<title>5. Vue开关组件</title>
89
<script src="https://unpkg.com/vue@next"></script>
910
</head>
11+
1012
<body>
1113
<div id="Application">
12-
<my-switch @switch-change="change1" switch-style="mini" background-color="green" border-color="green" color="blue"></my-switch>
14+
<my-switch @switch-change="change1" switch-style="mini" background-color="green" border-color="green"
15+
color="blue"></my-switch>
1316
<div>开关状态:{{state1}}</div>
14-
<br/>
15-
<my-switch @switch-change="change2" switch-style="normal" background-color="blue" border-color="blue" color="red"></my-switch>
17+
<br />
18+
<my-switch @switch-change="change2" switch-style="normal" background-color="blue" border-color="blue"
19+
color="red"></my-switch>
1620
<div>开关状态:{{state2}}</div>
1721
</div>
1822
<script>
1923
const App = Vue.createApp({
20-
data(){
24+
data() {
2125
return {
22-
state1:"关",
23-
state2:"关"
26+
state1: "关",
27+
state2: "关"
2428
}
2529
},
26-
methods:{
27-
change1(isOpen){
30+
methods: {
31+
change1(isOpen) {
2832
this.state1 = isOpen ? "开" : "关"
2933
},
30-
change2(isOpen){
34+
change2(isOpen) {
3135
this.state2 = isOpen ? "开" : "关"
3236
},
3337
}
3438
})
3539

3640
const switchComponent = {
3741
// 定义的外部属性
38-
props:["switchStyle", "borderColor", "backgroundColor", "color"],
42+
props: ["switchStyle", "borderColor", "backgroundColor", "color"],
3943
// 内部属性，控制开关状态
4044
data() {
4145
return {
42-
isOpen:false,
43-
left:'0px'
46+
isOpen: false,
47+
left: '0px'
4448
}
4549
},
4650
// 通过计算属性来设置CSS样式
4751
computed: {
48-
cssStyleBG:{
52+
cssStyleBG: {
4953
get() {
5054
if (this.switchStyle == "mini") {
51-
return `position: relative; border-color: ${this.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 30px; background-color: ${this.isOpen ? this.backgroundColor:'white'};`
55+
return `position: relative; border-color: ${this.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 30px; background-color: ${this.isOpen ? this.backgroundColor : 'white'};`
5256
} else {
53-
return `position: relative; border-color: ${this.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 10px; background-color: ${this.isOpen ? this.backgroundColor:'white'};`
57+
return `position: relative; border-color: ${this.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 10px; background-color: ${this.isOpen ? this.backgroundColor : 'white'};`
5458
}
5559
}
5660
},
57-
cssStyleBtn:{
61+
cssStyleBtn: {
5862
get() {
5963
if (this.switchStyle == "mini") {
6064
return `position: absolute; width: 30px; height: 30px; left:${this.left}; border-radius: 50%; background-color: ${this.color};`
@@ -69,10 +73,11 @@
6973
click() {
7074
this.isOpen = !this.isOpen
7175
this.left = this.isOpen ? '25px' : '0px'
76+
// 自组件调用父组件
7277
this.$emit('switchChange', this.isOpen)
7378
}
7479
},
75-
template:`
80+
template: `
7681
<div :style="cssStyleBG" @click="click">
7782
<div :style="cssStyleBtn"></div>
7883
</div>
@@ -82,4 +87,5 @@
8287
App.mount("#Application")
8388
</script>
8489
</body>
90+
8591
</html>

0 commit comments

Comments
 (0)