vue

First Post:

Last Update:

01.Vue简介

image-20240701130838024

02.第一个Vue程序

官方文档

image-20240715184346174

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <body>
        <div id="app">
            {{message}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
    </head>
</html>

image-20240715184937553

03.el挂载点

el挂载可以使用各种选择器，但是建议使用id选择器，还有就是el不能挂载在body和html标签上。

image-20240715185558945

image-20240715185613823

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
<!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>el: 挂载点</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <body>
        <div id="app">
            {{message}}
            <div>{{message}}</div>

        </div>
        <script>
            var app = new Vue({
                
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
    </head>
</html>

image-20240715185704406

04.data数据对象

image-20240715190222498

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </meta>
        </meta>
        <title>data数据对象</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
            <div>{{message}}</div>
            <h2>{{school}}</h2>
            字典获取类型：<h2>{{school.name}}</h2>
            <h2>{{campus}}</h2>
            数组获取类型：<h2>{{campus[0]}}</h2>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    school:{
                        name:'北京大学',
                        address:'北京市海淀区'
                    },
                campus:[
                    '北京校区',
                    '上海校区',
                    '广州校区'
                ]
                }
            })
        </script>
    </body>
</html>

image-20240715190406665

05.本地应用v-text

image-20240715190544976

image-20240715190556655

image-20240715190649614

image-20240715191018001

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
<!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>v-test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <span v-text="message"></span>
            <div v-text="school.name+'!'"></div>支持字符串拼接<br>
            </br>
            <h2>{{message}}</h2>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    show:true,
                    school:{
                        name:'北京大学',
                        address:'北京市海淀区'
                    }
               }
            })
        </script>
    </body>
</html>

image-20240715191212239

06.v-html

image-20240715191712002

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>v-html</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       
    </head>
    <body>
        <div id="app">
            <p v-html="message"></p>
            <p v-text="message"></p>"
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: '<a href="https://www.baidu.com">百度</a>',
                }
            })
        </script>
</html>

image-20240715191644260

07.v-on

元素绑定事件

image-20240715191926946

image-20240715192648491

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
<!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>v-on</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="v-on指令" v-on:click="show"/>
            <input type="button" value="v-on简写" @click="show"/>
            <input type="button" value="双击事件" @dblclick="show"/>
            <input type="button" value="change事件" @click="changeFood"/>
            <h2>{{food}}</h2>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    food:'苹果'
                },
                methods:{
                    show:function(){
                        alert('show')
                    },
                    changeFood:function(){
                        this.food='香蕉'
                    }            
                }
            })
        </script>
</html>

image-20240715192716988

08.计数器

image-20240715193302690

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
<!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>计数器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            点击直接加减<br>
            </br>
            <button @click="count++">+</button>
            <button @click="count--">-</button>
            <button @click="count=0">reset</button>
            <div>{{count}}</div>
            <div>
                点击调用事件<br>
                </br>
                <button @click="add">+</button>
                <button @click="sub">-</button>
                <button @click="reset">reset</button>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    count:0
                },
                methods:{
                    add:function(){
                        this.count++
                    },
                    sub:function(){
                        this.count--
                    },
                    reset:function(){
                        this.count=0
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715193245175

09.v-show

image-20240715193410742

image-20240715193804592

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
<!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>v-show</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
    </head>
    
    <body>
        <div id="app">
            <span v-show="show">Hello Vue!</span>
            <div v-show="show">Hello Vue!</div>
            <button @click="show=!show">显示/隐藏</button>
            <h2>{{show}}</h2>
            <input type="button" value="显示/隐藏" @click="changeShow">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    show:true
               },
               methods:{
                   changeShow(){
                       this.show=!this.show
                   }
               }
            })
        </script>
    </body>
</html>

image-20240715193723837

10.v-if

image-20240715194327034

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
<!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>v-if</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       
    </head>
    <body>
        <div id="app">
            <button @click="show=!show">切换</button><br/>
            <div v-if="show">Hello Vue!</div>
            <div v-if="show">Hello Vue!</div>
            <div v-show="show">Hello Vue!</div>
            <div v-if="times>10">Hello Vue!</div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    times:20,
                    show:true
                }
            })
        </script>
    </body>
</html>

image-20240715194335025

11.v-bind

设置元素的属性

image-20240715195008293

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
<!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>v-bind</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .active{
                color:red;
            }
            .disabled{
                color:gray;
            }
        </style>
    </head>
    <body>
        v-bind
        <div id="app">
            <a v-bind:href="url">{{name}}</a>
            <a :href="url">{{name}}</a>

            <a :href="url" :title="name">{{name}}</a>
            <a :href="url" :title="name" :class="{active:isActive}">{{name}}</a>
            <a :href="url" :title="name" :class="{active:isActive,disabled:isDisabled}">{{name}}</a>
            <a :href="url" :title="name" :class="classObject">{{name}}</a>
            <button :class="{active:isActive,disabled:isDisabled}" @click="changeActive">{{name}}</button>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    url:'https://www.baidu.com',
                    name:'百度',
                    isActive:true,
                    isDisabled:false,
                    classObject:{
                        active:true,
                        disabled:false
                    }
                },
                methods:{
                    changeActive(){
                        this.isActive=!this.isActive;
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715195342158

12.图片切换

image-20240715202051250

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
<!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>切换图片</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            切换图片<br>
            <img :src="imgUrls[index]" alt=""><br>
            <button @click="index=0">切换到百度</button>
            <button @click="index=1">切换到QQ</button>
            <button @click="index=2">切换到新浪</button>
            
            </br></img>
            
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    index:0,
                    imgUrls: [
                        'https://www.baidu.com/img/bd_logo1.png',
                        'https://www.qq.com/favicon.ico',
                        'https://www.sina.com.cn/favicon.ico'
                    ],
                }
            })
        </script>
    </body>
</html>

image-20240715202122889

13.v-for

image-20240715203851376

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
<!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>v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
    </meta>
    </meta>
</head>
<body>
    <div id="app">
        <div v-for="school,index in schools">
            <h2>{{index}}</h2>
            <h2>{{school.name}}</h2>
            <p>{{school.address}}</p>
        </div>
        <div v-for="food in food">
            <span>{{food.name}}</span>
            <span>{{food.price}}</span>
        </div>
        <br/>
        添加食物
        <input type="text" v-model="food.name">
        </input>
        <input type="text" v-model="food.price">
        </input>
        <button @click="addFood">添加</button>
        <br/>删除食物
        <input type="text" v-model="food.name">
        </input>
        <button @click="removeFood">删除</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                schools:[
                    {name:'北京大学',address:'北京市海淀区'},
                    {name:'清华大学',address:'北京市海淀区'}, 
                    {name:'北京大学',address:'北京市海淀区'},
                    {name:'北京大学',address:'北京市海淀区' },
                ],
                food:[
                    {name:'苹果',price:10},
                    {name:'香蕉',price:20},
                    {name:'西瓜',price:30},
                    {name:'葡萄',price:40},
                    {name:'草莓',price:50},
                    {name:'火龙果',price:60},
                    {name:'苹果',price:10},
                    {name:'香蕉',price:20},
                    {name:'西瓜',price:30},
                ]
            },
            methods:{
                addFood(){
                    this.food.push({
                        name:this.food.name,
                        price:this.food.price
                    })
                },
                removeFood(){
                    for(var i=0;i<this.food.length;i++){
                        if(this.food[i].name==this.food.name){
                            this.food.splice(i,1)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

image-20240715203915876

14.v-on补充

image-20240715204348181

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
<!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>v-on补充</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="show">点我</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                show: function () {
                    alert('show')
                   
                }
            }
        })
    </script>
</body>
</html>

image-20240715204431422

15.v-model

双向数据绑定

image-20240715204817624

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
<!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>v-model</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       
    </head>
    <body>
        <div id="app">
            <button @click="message='Hello World!'">点我</button><br/>
            <input type="text" v-model="message">
            <div>{{message}}</div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
    </body>
</html>

image-20240715204827443

16.记事本-add

image-20240715205108039

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
<!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>记事本</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <div class="title">
                <input type="text" v-model="title" @keyup.enter="add">
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <div class="btn">
                <button @click="add">添加</button>
               <button @click="clear">清空</button>
            </div>
            <div class="list">
                <div class="title">笔记列表</div>
                <div class="item" v-for="(item,index) in list" :key="index">
                    <span class="title">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    title:'',
                    content:'',
                    list:[
                        {title:'标题1',content:'内容1'},
                        {title:'标题2',content:'内容2'},
                        {title:'标题3',content:'内容3'},
                        {title:'标题4',content:'内容4'},
                        {title:'标题5',content:'内容5'},
                        {title:'标题6',content:'内容6'},
                        {title:'标题7',content:'内容7'},
                       {title:'标题8',content:'内容8'},
                    ]
                },
                methods: {
                    add(){
                        this.list.push({
                            title:this.title,
                            content:this.content
                        })
                        this.title = ''
                        this.content = ''
                    },
                    clear(){
                        this.list = []
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715205814207

17.记事本-remove

image-20240715211147417

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
<!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>记事本</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <div class="title">
                <input type="text" v-model="title" @keyup.enter="add">
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <div class="btn">
                <button @click="add">添加</button>
               <button @click="clear">清空</button>
            </div>
            <div class="list">
                <div class="title">笔记列表</div>
                <div class="item" v-for="(item,index) in list" :key="index">
                    <span class="title">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                    <button @click="remove(index)">删除</button>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    title:'',
                    content:'',
                    list:[
                        {title:'标题1',content:'内容1'},
                        {title:'标题2',content:'内容2'},
                        {title:'标题3',content:'内容3'},
                        {title:'标题4',content:'内容4'},
                        {title:'标题5',content:'内容5'},
                        {title:'标题6',content:'内容6'},
                        {title:'标题7',content:'内容7'},
                       {title:'标题8',content:'内容8'},
                    ]
                },
                methods: {
                    add(){
                        this.list.push({
                            title:this.title,
                            content:this.content
                        })
                        this.title = ''
                        this.content = ''
                    },
                    clear(){
                        this.list = []
                    },
                    remove(index){
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715211212882

18.记事本-count

image-20240715211430417

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
<!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>记事本</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <div class="title">
                <input type="text" v-model="title" @keyup.enter="add">
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <div class="btn">
                <button @click="add">添加</button>
               <button @click="clear">清空</button>
            </div>
            <div class="count">
                <div class="title">笔记数量</div>
                <div class="count">{{list.length}}</div>
            </div>
            <div class="list">
                <div class="title">笔记列表</div>
                <div class="item" v-for="(item,index) in list" :key="index">
                    <span class="title">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                    <button @click="remove(index)">删除</button>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    title:'',
                    content:'',
                    list:[
                        {title:'标题1',content:'内容1'},
                        {title:'标题2',content:'内容2'},
                        {title:'标题3',content:'内容3'},
                        {title:'标题4',content:'内容4'},
                        {title:'标题5',content:'内容5'},
                        {title:'标题6',content:'内容6'},
                        {title:'标题7',content:'内容7'},
                       {title:'标题8',content:'内容8'},
                    ]
                },
                methods: {
                    add(){
                        this.list.push({
                            title:this.title,
                            content:this.content
                        })
                        this.title = ''
                        this.content = ''
                    },
                    clear(){
                        this.list = []
                    },
                    remove(index){
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715211459971

19.记事本-clear

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
<!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>记事本</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <div class="title">
                <input type="text" v-model="title" @keyup.enter="add">
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <div class="btn">
                <button @click="add">添加</button>
               <button @click="clear">清空</button>
            </div>
            <div class="count">
                <div class="title">笔记数量</div>
                <div class="count">{{list.length}}</div>
            </div>
            <div class="list">
                <div class="title">笔记列表</div>
                <div class="item" v-for="(item,index) in list" :key="index">
                    <span class="title">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                    <button @click="remove(index)">删除</button>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    title:'',
                    content:'',
                    list:[
                        {title:'标题1',content:'内容1'},
                        {title:'标题2',content:'内容2'},
                        {title:'标题3',content:'内容3'},
                        {title:'标题4',content:'内容4'},
                        {title:'标题5',content:'内容5'},
                        {title:'标题6',content:'内容6'},
                        {title:'标题7',content:'内容7'},
                       {title:'标题8',content:'内容8'},
                    ]
                },
                methods: {
                    add(){
                        this.list.push({
                            title:this.title,
                            content:this.content
                        })
                        this.title = ''
                        this.content = ''
                    },
                    clear(){
                        this.list = []
                    },
                    remove(index){
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715211640171

20.记事本-hidden

没有数据时，隐藏元素（v-show,v-for）

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
<!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>记事本</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <div class="title">
                <input type="text" v-model="title" @keyup.enter="add">
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <div class="btn">
                <button @click="add">添加</button>
               <button @click="clear">清空</button>
            </div>
            <div class="count">
                <div class="title">笔记数量</div>
                <div class="count">{{list.length}}</div>
            </div>
            <div class="list">
                <div class="title" v-show="list.length" style="background-color: aqua;">笔记列表</div>
                <div class="item" v-for="(item,index) in list" :key="index">
                    <span class="title" style="background-color: aquamarine;">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                    <button @click="remove(index)">删除</button>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    title:'',
                    content:'',
                    list:[
                        {title:'标题1',content:'内容1'},
                        {title:'标题2',content:'内容2'},
                        {title:'标题3',content:'内容3'},
                        {title:'标题4',content:'内容4'},
                        {title:'标题5',content:'内容5'},
                        {title:'标题6',content:'内容6'},
                        {title:'标题7',content:'内容7'},
                       {title:'标题8',content:'内容8'},
                    ]
                },
                methods: {
                    add(){
                        this.list.push({
                            title:this.title,
                            content:this.content
                        })
                        this.title = ''
                        this.content = ''
                    },
                    clear(){
                        this.list = []
                    },
                    remove(index){
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715212313904

21.axios基本使用

image-20240715212441104

image-20240715213219569

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
<!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>axios基本使用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="get">get</button>
            <button @click="post">post</button>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                methods: {
                    get(){
                        axios.get('https://api.github.com/users/zhongyuanzhi')
                       .then(function (response) {
                        var response = response.data;
                        alert(response.url)
                       })
                       .catch(function (error) {
                        alert(error)
                       });
                    },
                    post(){
                        axios.post('Http://example.com/login?username=admin&password=12345')
                       .then(function (response) {
                        var response = response.data;
                        alert(response.url)
                       })
                       .catch(function (error) {
                        alert(error)
                       });
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715213704367

22.axios+vue

image-20240715214835633

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
<!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>axios基本使用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="get">get</button>
            <button @click="post">post</button>
            <br/>
            <textarea name="message" rows="20" cols="59">{{tmp}}</textarea>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    tmp:''
                },
                methods: {
                    get(){
                        var that =this;
                        axios.get('https://api.github.com/users/zhongyuanzhi')
                       .then(function (response) {
                        var response = response;
                        that.tmp = JSON.stringify(response);
                        alert(response.data.url)
                       })
                       .catch(function (error) {
                        alert(error)
                       });
                    },
                    post(){
                        axios.post('Http://example.com/login?username=admin&password=12345')
                       .then(function (response) {
                        var response = response.data;
                        alert(response.url)
                       })
                       .catch(function (error) {
                        alert(error)
                       });
                    }
                }
            })
        </script>
    </body>
</html>

image-20240715214909054

23.example-weather

回车查询

image-20240715215204013

墨迹天气API

点击查询

image-20240716140812920

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
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Weather App</title>  
    <!-- 引入Vue -->  
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>  
    <!-- 引入Axios -->  
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>  
    <style>  
        /* 简单的样式 */  
        #app {  
            margin: 50px;  
            text-align: center;  
        }  
        input, button {  
            margin: 10px;  
        }  
    </style>  
</head>  
<body>  
  
<div id="app">  
    <input type="text" v-model="city" placeholder="Enter city name" @keyup.enter="getWeather">  
    <button @click="getWeather">Get Weather</button>  
    <br/>
    {{weather.location[0].fxLink}}
    <p v-html="weather.location[0].fxLink">
</div>  
  
<script>  
    // Vue实例  
    new Vue({  
        el: '#app',  
        data: {  
            city: '',  
            weather: {
                    code:200,
                    location:[
                        {
                           name: "海淀",
                            id: "101010200",
                            lat: "39.95607",
                            lon: "116.31032",
                            adm2: "北京",
                            adm1: "北京市",
                            country: "中国",
                            tz: "Asia/Shanghai",
                            utcOffset: "+08:00",
                            isDst: "0",
                            type: "city",
                            rank: "15",
                            fxLink: "https://www.qweather.com/weather/haidian-101010200.html"
                        }
                    ],
                
            }  
        },  
        methods: {  
            getWeather: function() {  
                if (!this.city) {  
                    alert('Please enter a city name!');  
                    return;  
                }  
                var vm = this;  
                axios.get(
                    "https://geoapi.qweather.com/v2/city/lookup?location=" + this.city + "&key=50a831558a6e47efaf68994e101b0e42")  
                    .then(function(response) {  
                        vm.weather = response.data;  
                    })  
                    .catch(function(error) {  
                        console.error('Error fetching weather:', error);  
                        alert('Failed to fetch weather.');  
                    });  
            }  
        }  
    });  
</script>  
  
</body>  
</html>
≡