基本语法

# 单向数据绑定

v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，简写是冒号 :

<!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>
</head>

<body>
    <div id="app">
        <div :style="style">单向绑定</div>
        <div v-bind:style="style">单向绑定</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: 'color: green'
            }
        })
    </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

# 双向数据绑定

什么是双向数据绑定？
- 当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
- 当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去

<!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>
</head>

<body>
    <div id="app">
        {{myValue}}
        <br>
        <input type="text" :value="myValue">
        <br>
        <input type="text" v-model="myValue">
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                myValue: 'stt'
            }
        })
    </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

最后一个输入框是双向绑定，修改后其他的显示会跟着修改，而第一个输入框是单向绑定，修改后没有对myValue造成影响

# 绑定事件

使用 v-on 进行数件处理
v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
@ 是 v-on 的简写

<!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>
</head>

<body>
    <div id="app">
        <button v-on:click="show('事件1')">事件绑定1</button>
        <button @click="show('事件2')">事件绑定2</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                show(msg) {
                    alert(msg)
                }
            }
        })
    </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

# 条件指令

v-if
v-else-if
v-else

<!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>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>
        <br/>
        <div v-if="ok">选中了</div>
        <div v-else>没有选中</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </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

# 循环指令

v-for

<!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>
</head>

<body>
    <div id="app">
        <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
        <div v-for="(user,index) in userList">
            {{index}} -- {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [{ "name": "stt", "age": 22 }, { "name": "lisi", "age": 30 }]
            }
        })
    </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

# 生命周期

<!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>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'hello'
            },
            created() { //在页面渲染之前执行
                debugger
                console.log('created.....')
            },
            mounted() {//在页面渲染之后执行
                debugger
                console.log('mounted.....')
            }
        })
    </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

Last Updated: 2022/01/16, 11:29:51

← 介绍