03, 指令上

码路教育

# 03, 指令上

# 1.1, 什么是指令

指令英文【directive】
Vue框架借鉴angular框架小技巧，指令概念。
Vue框架给咱们提供很多指令, Vue框架中的指令，实质就是给标签新增自定义属性，只不过指令【自定义属性】都是以v-xxxx
自定义属性是指程序员自己瞎写、胡写、乱写人家官方没有提出的属性，称之为自定义属性

# 1.2, v-bind指令

v-bind: Vue框架提供的一个指令, 它主要的作用是，可以给标签绑定动态属性，可以简写成：
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）
{{}}给标签绑定动态文本，v-bind给标签绑定动态属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- {{}}只能写在文件节点处，不能写在属性节点处 -->
        <!-- <img src="{{url}}" alt=""> -->

        <!-- 这样写也不行，url是死的三个字母，并不是动态数据 -->
        <!-- <img src="url" alt=""> -->

        <!-- v-bind作用是用于把数据绑定到属性节点处 -->
        <!-- 如果写了v-bind "url"不再是字符串了  "url"是表达式了 -->
        <!-- <img v-bind:src="url" alt=""> -->

        <!-- v-bind可以简写成: -->
        <!-- <img :src="url" alt=""> -->

        <!-- "haha是字符串" -->
        <!-- <p title="haha"></p> -->

        <!-- <p :title="haha">我是一个P标签</p> -->

        <!-- <input type="text" :value="ok"> -->

        <a :href="name">{{name}}</a>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    url:"https://cn.vuejs.org/images/logo.svg",
                    haha:"lala",
                    ok:"ok666",
                    name:"wangcai"
                }
            }
        });
    </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

# 1.3, v-once指令（了解）

v-once用于指定元素或者组件只渲染一次
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过
该指令可以用于性能优化
如果是子节点，也是只会渲染一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app"  v-once>
        <!-- v-once表示只会第一次渲染数据到模板中，后面数据变了，模板也不会刷新了 -->
        <!-- <h2 v-once>计数器：{{number}}</h2> -->
        <h2>计数器：{{number}}</h2>
        <button @click="increment">加1</button>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    number:0
                }
            },
            methods:{
                increment(){
                    this.number++
                }
            }
        });
    </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

# 1.4, v-text指令（了解）

用于更新元素的 textContent：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <h2>{{msg}}</h2>
        <!-- "msg" 不是字符串，不是字符中，不是字符串，不是字符串 -->
        <!-- {{}}是v-text的语法糖，说白了，就是简写形式 -->
        <!-- 基本上不用，一般使用{{}} -->
        <h2 v-text="msg"></h2>

        <hr>

        <!-- v-text并不会解析标签 -->
        <div v-text="msg2"></div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"hello vue",
                    msg2:"<p style='color:red;'>我是一个P标签</p>"
                }
            }
        });
    </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

# 1.5, v-html指令

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 如果绑定的内容是html标签字符串，使用v-html会解析这个字符串 -->
        <!-- 解析html标签字符串，也是有安全隐患的，html标签字符串不是被信任的，不要使用v-html  -->
        <div v-html="msg2"></div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"hello vue",
                    msg2:"<p style='color:red;'>我是一个P标签</p>"
                }
            }
        });
    </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

# 1.6, v-pre指令（了解）

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
跳过不需要编译的节点，加快编译的速度；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <!-- v-pre是一个指令，了解，作用：跳过模板编译 -->
        <!-- 模板中有些标签，不需要编译，可以使用v-pre，跳过模板编译，性能就高了 -->
        <div v-pre>
            <h2>{{msg}}</h2>
            <p>{{count}}</p>
        </div>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "hello vue",
                    count: 10
                }
            }
        });
    </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

# 1.7, v-cloak指令（了解）

这个指令保持在元素上直到关联组件实例结束编译
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 需求：如果vm和模板没有关联好，不要去编译{{}} -->
        <h2 v-cloak>{{msg}}</h2>
    </div>

    <script>
        setTimeout(() => {
            let vm = new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "hello vue"
                    }
                }
            });
        }, 3000);
    </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

# 1.8, v-if指令

在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了
Vue提供了下面的指令来进行条件判断：
- v-if
- v-else
- v-else-if
- v-show

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容

这些内容只有在条件为true时，才会被渲染出来
v-if是惰性的
当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉
当条件为true时，才会真正渲染条件块中的内容；
v-if每一次展示都是创建一个新的DOM, 每一次隐藏都需要移出、干掉DOM进行隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        button {
            margin-top: 100px;
            width: 400px;
            height: 50px;
        }
        .box{
            width: 400px;
            height: 200px;
            background: yellowgreen;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- v-if后面也是写表达式 -->
        <!-- " true " 不是字符串，不是字符串，不是字符串 -->
        <!-- v-if后面如果是真，就渲染DOM元素或组件 -->
        <!-- <h1 v-if=" true ">今天是08月08号，再过一段时间就9月份了</h1> -->

        <!-- v-if后面表达式只要转化成真，DOM元素或组件就会渲染 -->
        <!-- <h1 v-if=" 1+1 ">今天是08月08号，再过一段时间就9月份了</h1> -->

        <!-- v-if后面如果转化成假，这个DOM元素或组件压根不会渲染 -->
        <!-- <h1 v-if=" 1-1 ">今天是08月08号，再过一段时间就9月份了</h1> -->

        <button @click="handle">让盒子显示或隐藏</button>
        <!-- v-if可以控制一个DOM元素创建或销毁 -->
        <!-- 频繁地创建或销毁一个DOM元素，性能也很低 -->
        <!-- 换句话说，如果一个DOM元素，需要频繁地显示或隐藏，建议不要使用v-if -->
        <!-- v-if是惰性的  如果判断值本身就是false，压根就不会创建 -->
        <!-- 每一次显示，都是创建出一个新的DOM元素，每一隐藏都是移除，销毁掉这个DOM元素 -->
        <div class="box" v-if="show"></div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    // 响应式数据
                    show:true
                }
            },
            methods:{
                handle(){
                    this.show = !this.show
                }
            }
        });
    </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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 20px 0px;
        }

        .pink {
            background: pink;
        }

        .skyblue {
            background: skyblue;
        }

        .gold {
            background: gold;
        }
    </style>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <div class="pink" v-if=" show==='pink' "></div>
        <div class="skyblue" v-else-if=" show=='skyblue' "></div>
        <!-- v-if|v-eles-if|v-else中间不要出现其它的标签，否则失效了，报警告了 -->
        <!-- <p>我是一个孤独的P标签</p> -->
        <div class="gold" v-else></div>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    show:"gold"
                }
            }
        });
    </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

template元素

因为v-if是一个指令，所以必须将其添加到一个元素上
如果我们希望切换的是多个元素，此时我们渲染div，但是我们并不希望div这种元素被渲染，这个时候，我们可以选择使用template
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来，有点类似于小程序中的block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>

<body>
    <!-- 定义的容器 -->
    <!-- <div id="app">
        <div v-if="number==1">
            <div>haha</div>
            <div>haha</div>
            <div>haha</div>
        </div>

        <div v-else-if="number==2">
            <div>xixi</div>
            <div>xixi</div>
            <div>xixi</div>
        </div>

        <div v-else>
            <div>hehe</div>
            <div>hehe</div>
            <div>hehe</div>
        </div>
    </div> -->

    <div id="app">
        <!-- template标签，也叫幽灵标签 -->
        <template v-if="number==1">
            <div>haha</div>
            <div>haha</div>
            <div>haha</div>
        </template>

        <template v-else-if="number==2">
            <div>xixi</div>
            <div>xixi</div>
            <div>xixi</div>
        </template>

        <template v-else>
            <div>hehe</div>
            <div>hehe</div>
            <div>hehe</div>
        </template>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    number: 1
                }
            }
        });
    </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

v-show

v-show: 也是Vue框架提供一个指令, 可以让元素进行显示与隐藏？【功能与v-if类似】
v-show: 右侧属性一般需要的是布尔值|JS表达式
v-show是通过样式display实现元素的显示（block）与隐藏（none）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 400px;
            height: 200px;
            margin: 150px 0px;
            background-color: gold;
            animation: donghua 2s linear 0s infinite;
        }
        /* 定义一个动画 */
        @keyframes donghua {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <button @click="handle">通过v-show控制元素的显示与隐藏</button>
        <!-- v-show后面不是字符串 -->
        <div class="box" v-show="show"></div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    // 响应式数据
                    show:true
                }
            },
            methods:{
                handle(){
                    this.show = !this.show
                }
            }
        });

        // v-if和v-show的区别？
        //   v-if是控制元素的创建或销毁，每次创建出来的都是新的，创建或销毁DOM元素，很耗性能。
        //   v-if后面的条件是false，它是惰性的，DOM元素压根不会创建
        //   v-show后面的条件不管是true或false，DOM元素都会创建，它是通过display来控制元素的显示或隐藏
        //   v-show不支持template标签，v-if支持template标签
        //   v-if会导致浏览器的重排（重排一定会引起重绘），v-show导致浏览器的重绘。
        //   如果需要频繁控制元素的显示或隐藏，那么使用v-show，不频繁，也可以使用v-if，尽可能使用v-show
    </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

v-show和v-if的区别

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件：
v-show是不支持template
v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中
v-if直接操作DOM创建与销毁，频繁的操作DOM，很耗性能的。
如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show
如果不会频繁的发生切换，那么使用v-if
v-if与v-show在控制元素的显示与隐藏的时候，尽可能使用v-show

为什么做元素的显示与隐藏的效果，使用v-show性能会优化一些那?

v-if：通过创建DOM、移出DOM完成元素的显示与隐藏，会导致浏览器重排。
v-show: 通过样式display实现元素的显示与隐藏，会导致浏览器重绘。
虽然重绘、重排都消耗电脑的性能，但是重绘消耗的性能更少一些。
v-show与v-if选择的时候，尽可能使用v-show

# 1.9, v-model指令

表单提交是开发中非常常见的功能，也是和用户交互的重要手段

比如用户在登录、注册时需要提交账号密码
比如用户在检索、创建、更新信息时，需要提交一些数据

v-model可以用来收集表单中的数据

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定
它会根据控件类型自动选取正确的方法来更新元素
尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 不使用v-model，实现双向绑定 -->
        <!-- <input type="text" :value="msg" @input="inputChange"> -->

        <!-- 在vue中，如果监听器中的代码就一行，可以写在模板中，不建议使用 -->
        <input type="text" :value="msg" @input="msg = $event.target.value">

        <hr>

        <!-- v-model就是一个语法糖： :value + @input -->
        <!-- <input type="text" v-model="msg"> -->

        <!-- 模拟登录 -->
        <label for="account">
            账号：<input type="text" id="account" v-model="account">
        </label>
        <label for="pwd">
            密码：<input type="password" id="pwd" v-model="pwd">
        </label>
        <button @click="loginClick">登录</button>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"i love vue",
                    account:"",
                    pwd:""
                }
            },
            methods:{
                inputChange(e){
                    this.msg = e.target.value
                },
                loginClick(){
                    console.log("用户名：",this.account);
                    console.log("密码：",this.pwd);
                    // axios
                    console.log("发送网络请求，实现登录....");
                }
            }
        });
    </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

v-model的原理

官方有说到，v-model的原理其实是背后有两个操作
v-bind绑定value属性的值
v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

<input v-model="searchText" />

等价于：

<input :value="searchText" @input="searchText = $event.target.value" />

v-model绑定textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <textarea cols="30" rows="10" v-model="content"></textarea>
        <p>输入的内容：{{content}}</p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    content:""
                }
            }
        });
    </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

v-model绑定checkbox

v-model绑定checkbox：单个勾选框和多个勾选框
单个勾选框：v-model即为布尔值
此时input的value属性并不影响v-model的值
多个复选框: 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组
当选中某一个时，就会将input的value添加到数组中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- checkbox可以作为一个是否同意的单选框 -->
        <label for="agree">
            <!-- 单个选框（是否同意按钮） v-model的值是布尔值 -->
            <input type="checkbox" id="agree" v-model="isAgree"> 同意xxx协议
        </label>
        <h2>单选框：{{isAgree}}</h2>

        <hr>

        <!-- checkbox多选框：v-model绑定的就是一个数组了 -->
        <!-- 每一个input上，必须有一个value -->
        <div class="hobbies">
            <h2>请选择你的爱好：</h2>
            <label for="sing">
                <!-- 单个选框（是否同意按钮） v-model的值是布尔值 -->
                <input type="checkbox" id="sing" v-model="hobbies" value="sing"> 唱歌
            </label>
            <label for="coding">
                <input type="checkbox" id="coding" v-model="hobbies" value="coding"> 打代码
            </label>
            <label for="basketball">
                <input type="checkbox" id="basketball" v-model="hobbies" value="basketball"> 打篮球
            </label>
        </div>

        <h2>爱好：{{hobbies}}</h2>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    isAgree:false,
                    hobbies:[]
                }
            }
        });
    </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

v-model绑定radio

v-model绑定radio，用于选择其中一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <div class="gender">
            <label for="male">
                <!-- v-model收集的也是value值 -->
                <input id="male" name="sex" type="radio" v-model="gender"  value="male"> 男
            </label>
            <label for="female">
                <input id="female" name="sex" type="radio" v-model="gender" value="female"> 女
            </label>
            <h2>性别: {{gender}}</h2>
        </div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    gender:"female"
                }
            }
        });
    </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

v-model绑定select

和checkbox一样，select也分单选和多选两种情况
单选：只能选中一个值，v-model绑定的是一个值
多选：可以选中多个值，v-model绑定的是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- select的单选 -->
        <!-- v-model需要写在select身上 -->
        <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <h2>单选：{{fruit}}</h2>

        <hr>

        <!-- multiple 多选 -->
        <!-- size=3 表示可视区中显示几个选项 -->
        <!-- 收集多个，v-model绑定的就是一个数组 -->
        <select multiple size="3" v-model="fruit2">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <h2>多选：{{fruit2}}</h2>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    fruit:"banana",
                    fruit2:["apple"]
                }
            }
        });
    </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

# 2.0, v-model修饰符

lazy

默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步
如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发

number

将绑定的字符串类型，转换为数字类型

trim

自动过滤用户输入的首尾空白字符，可以给v-model添加 trim 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- lazy 把input事件切换成change事件 -->
        <input type="text" v-model.lazy="msg">
        <h2>msg:{{msg}}</h2>

        <hr>

        <input type="text" v-model.number="number">
        <h2>number:{{number}} --- {{ typeof number }}</h2>

        <hr>

        <input type="text" v-model.trim="str">
        <h2>str:{{str}} --- {{ typeof str }}</h2>

        <hr>

        <!-- 多外修改符是可以连用的 -->
        <input type="text" v-model.lazy.number.trim="str">
        <h2>str:{{str}} --- {{ typeof str }}</h2>

    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"I love Vue~",
                    // 数据  ==>  状态
                    number:0,
                    str:"hello vue"
                }
            }
        });
    </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

02-响应式原理与事件绑定 04, 指令下