初识Vue

Vue浅学

初识Vue

使用id来将Vue和容器绑定

通过网址来引入Vue

Vue的实例作用范围 ： Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是推荐使用id选择器

可以使用其他的双标签，但是不能使用HTML和BODY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue.day1</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
    <div id="root">
        <h1>{{name}},{{address}}</h1>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'elysia',
            address:'往事乐土'
        }
    })
</script>
</html>

Data内的数据使用

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <p>{{name}}</p>
        <p>{{people.address}}</p>
        <p>{{cla[0]}}</p>
        <p>{{cla[1]}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            name: "elysia",
            people:{
                address:'1111111'
            },
            cla:['aaa','bbb','ccc']
        }
    })
</script>
</html>

Vue使用的数据定义在data中

data中可以写复杂的数据

渲染复杂类型数据时，遵守js的语法即可

使用 v-xxx指令

v-text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <p v-text="msg"></p>
        <!--  或者使用 <p>{{msg}}</p>  使用插值表达式简化写法-->
	    <!--  如果需要拼接字符串的话 <p v-text="msg +'!!!!'"></p> 或者 <p>{{msg}}!!!!</p>-->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            msg:'这里是通过v-text指定的属性'
        }
    })
</script>
</html>

v-html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <p v-html="msg"></p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            msg:'<h2>这里是通过v-html指定的属性</h2>'
        }
    })
</script>
</html>

v-on:事件

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <input v-on:click="say_cli" type="button" value="点击"/>
        <input v-on:dblclick="say_db" type="button" value="双击"/>
<!--   简写版本     <input @click="say_cli" type="button" value="点击"/>-->
<!--   简写版本     <input @dblclick="say_db" type="button" value="双击"/>-->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
        },
        methods:{
            say_cli(){
                alert('被单点了');
            },
            say_db(){
                alert('被双点了');
            }
        }
    })
</script>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="root" style="background-color: wheat;border-radius: 10px;display: flex;width: 100px;">
        <button style="border-radius: 15px;width: 50px;font-size:20px;
            text-align: left;margin-right: -20px; z-index: 1" id="smaller" @click="smaller">-</button>
        <span style="background-color: coral; width: 50px;text-align: center;font-size:20px;z-index: 2;">{{number_}}</span>
        <button style="border-radius: 15px;width: 50px;font-size:20px;
            text-align: right; margin-left: -20px; z-index: 1" id="bigger" v-on:click="bigger()">+</button>
    </span>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data(){
            return{
                number_:0,
            }
        },
        methods:{
            bigger(){
                this.number_ ++;
            },
            smaller(){
                if(this.number_ !== 0){
                    this.number_ --;
                }
            }
        }
    })
</script>
</html>

v-show

展示一个图片 多种选择模式 通过F12可以看到 v-show改变了标签的display属性，变得不可见

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">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <input type="button" value="改变状态" @click="changeShow"/>
        <input type="button" value="改变年龄" @click="changerAge"/>
        <br>
        <img v-show="isShow" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Q7WT69lcBwfRrBgwUlzikgHaKy?rs=1&pid=ImgDetMain" alt="" title="甘雨">
        <img v-show="age >= 20" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Q7WT69lcBwfRrBgwUlzikgHaKy?rs=1&pid=ImgDetMain" alt="" title="甘雨">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            isShow:false,
            age:18,
        },
        methods:{
            changeShow(){
                this.isShow = !this.isShow;
            },
            changerAge(){
                this.age ++;
            }
        }
    })
</script>
</html>

v-if

v-if 和 v-show接近，但是 v-if 是操作dom树来进行改变，对性能要求较高

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">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <input type="button" value="改变状态" @click="changeShow"/>
        <input type="button" value="改变年龄" @click="changerAge"/>
        <br>
        <img v-if="isShow" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Q7WT69lcBwfRrBgwUlzikgHaKy?rs=1&pid=ImgDetMain" alt="" title="甘雨">
        <img v-if="age >= 20" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Q7WT69lcBwfRrBgwUlzikgHaKy?rs=1&pid=ImgDetMain" alt="" title="甘雨">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            isShow:false,
            age:18,
        },
        methods:{
            changeShow(){
                this.isShow = !this.isShow;
            },
            changerAge(){
                this.age ++;
            }
        }
    })
</script>
</html>

v-bind

1
v-bind:属性名 = 'js表达式' 单向绑定该属性 如果data中的属性发生变化，单向绑定的数据也会改变
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <span>{{name}}</span>
        <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习</a>
        <hr>
        <a :href="school.url">点我去学习</a>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'Elysia',
            school:{
                name:'往事乐土',
                url:'https://www.baidu.com'
            }
        }
    })
</script>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .div_{
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <div id="root">
        <button v-show="left_bu" @click="last">点击切换到上一张</button>
        <img :class="cla_" :src="arr_p[num]" alt="" title="">
        <button v-show="right_bu" @click="next">点击切换到下一张</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
     new Vue({
        el:'#root',
        data(){
            return{
                num:0,
                right_bu:true,
                left_bu:false,
                cla_:"div_",
                arr_p:['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg']
            }
        },
        methods:{
            next(){
                if(this.num === this.arr_p.length - 2){
                    this.num ++;
                    this.right_bu = false;
                }else if(this.num < this.arr_p.length - 1){
                    this.num ++;
                }
                if(this.num !== 0) this.left_bu = true;
            },
            last(){
                if(this.num === 1){
                    this.num --;
                    this.left_bu = false;
                }else if(this.num !== 0){
                    this.num --;
                }
                if(this.num !== this.arr_p.length - 1) this.right_bu = true;
            }
        }
    })
</script>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!-- 对于其对象的引用符合js语法就可 -->
        <!-- 如果需要引入下标的话，使用 (item,index) in username 使用插值引入index即可-->
        <!-- 对于一个字符串会被分成字符来分别输出 且为响应式布局 -->
        <input type="button" value="增加" @click="more"/>
        <input type="button" value="减少" @click="less"/>
        <ul>
            <li v-for="item in username">{{item}}</li>
        </ul>
        <h1 v-for="item in username"> {{item}}</h1>
        <h1 v-for="item in password">{{item}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new  Vue({
        el:'#app',
        data(){
            return{
                username:['elysia_1','elysia_2','elysia_3'],
                password:'Elysia'
            }
        },
        methods:{
            more(){
                this.username.push("elysia_0")
            },
            less(){
                this.username.shift();
            }
        }
    })
</script>
</html>

v-on增加内容

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">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="button" value="增加" @click="more('ELYSIA')">
        <label>
            <input type="text" value="键盘事件" @keyup.enter="keyboard"/>
        </label>
        <h1 v-for="item in username">{{item}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    username:['elysia'],
                }
            },
            methods:{
                more(username_){
                    this.username.push(username_)
                },
                keyboard(){
                    this.username.push('键盘被使用了')
                }
            }
        })
    </script>
</body>
</html>

v-model

1
v-model:value = 'js表达式' 双向绑定 一方被修改另一方也会改动
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">
    <title>Title</title>
</head>
<body>
    <div id="root">
      <form>
          <label>
              <input type="text" v-model:value="username"/>
          </label>
          <label>
              <input type="password" v-model="username"/>
          </label>
          <div>username的值{{username}}</div>
      </form>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            username:'elysia',
        }
    })
</script>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #note{
        width: 700px;
        margin-top: 10%;
        margin-left: 25%;
        background-color: #e3d4bd;
    }
</style>

<body>
    <div id="note">
        <h1 style="text-align: center;">记事本</h1><hr>
        <label>
            <input id='isThing' style='height: 40px;font-size: 30px' type="text" @keyup.enter="add"/>
        </label>
        <hr>
        <ul>
            <li v-for="item in things"><h2 style="text-align: left" >{{item}}</h2><hr></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#note',
            data(){
                return{
                    things:['eat','sleep'],
                }
            },
            methods:{
                add(){
                    let isThing = document.getElementById('isThing');
                    this.things.push(isThing.value)
                    isThing.value = '';
                }
            }
        })
    </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #note{
        width: 700px;
        margin-top: 10%;
        margin-left: 25%;
        background-color: #e3d4bd;
    }
</style>
<body>
    <div id="note">
        <h1 style="text-align: center;">记事本</h1><hr>
        <label>
            <input v-model="context_input" style='height: 40px;font-size: 30px' type="text" @keyup.enter="add"/>
        </label>
        <hr>
        <ul>
            <li v-for="item in things"><h2 style="text-align: left" >{{item}}</h2><hr></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#note',
            data(){
                return{
                    things:[],
                    context_input:''
                }
            },
            methods:{
                add(){
                    if(this.context_input.length !== 0) {
                        this.things.push(this.context_input);
                        this.context_input = '';
                    }
                }
            }
        })
    </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<body>
    <div id="app">
        <h1 style="text-align: center">天知道</h1>
        <div>
            <label>
                <input @keyup.enter="search_" v-model:value="city_" style="margin-left: 25%;width:50%; height: 40px;font-size:20px;border-radius: 10px" type="text" placeholder="请输入要查询的城市名字"/>
            </label>
        </div>
        <table>
            <tr style="">
                <td :style="idx === result_.length - 1 ?'':prov_td" v-for="(item,idx) in result_">
                    <h1>{{item.weather + item.tempter + item.day_}}
                    </h1>
                </td>
            </tr>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        new Vue({
            el:'#app',
            data(){
                return{
                    prov_td:' border-right: 2px solid black',
                    city_:'',
                    result_:[
                        {weather:'多云',tempter:'10 ~ 20',day_:'11日星期五'},
                        {weather:'多云',tempter:'10 ~ 20',day_:'11日星期五'},
                        {weather:'多云',tempter:'10 ~ 20',day_:'11日星期五'},
                        {weather:'多云',tempter:'10 ~ 20',day_:'11日星期五'},
                        {weather:'多云',tempter:'10 ~ 20',day_:'11日星期五'},
                    ]
                }
            },
            methods:{
                // 没写css
                // 可以自己写一个json文件，给res，从中拿出信息，进行放入即可
                search_(){
                    axios('/url' + `&address=${this.city_}`).then(function(res){
                        console.log(res);
                    }).catch(function(res){
                        console.log(res);
                    })
                }
            }
        })
    </script>
</body>

</html>

为Vue赋值

1.对象式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <span>{{name}}</span>
        <span>welcome to {{address}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'Elysia',
            address:'Elysia'
        }
    })
</script>
</html>

2.函数式

将数据作为返回值返回

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <span>{{name}}</span>
        <span>welcome to {{address}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data(){
            return{
                name:'elysia_111',
                address:'Elysia'
            }
        }
    })
</script>
</html>

tips

1.使用组件时，必须使用函数式定义数据

2.由Vue管理的函数不能写成函数箭头，如果使用函数箭头，函数中的this指的是window

Vue声明

el的两种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <span>{{name}}</span>
        <span>{{address}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'elysia',
            address:'elysia'
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <span>{{name}}</span>
        <span>{{address}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    const vue_ = new Vue({
        data:{
            name:'elysia',
            address:'elysia'
        }
    })
    vue_.$mount('#root')
</script>
</html>

MVVM模型

M：模型(model)：data中的数据

V：视图(view)：模板代码

VM：视图模型(ViewModel)：Vue实例

Data Bindings：数据存放在Model中，经过Vue实例将数据绑定在页面上

DOM Listener：页面上的数据会被Vue实例监听，比如双向绑定：页面数据发生变化，对应的Model中的数据也跟着变化

Vue
#前端
初识Vue
http://example.com/2024/03/06/Vue/
作者
smg
发布于
2024年3月6日
许可协议