0. 方便起见，定个轮廓

不妨记下方的程序为 code1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-xxx</title>
    <script src="./vue.js"></script>
    <style>
        /* d */
    </style>
</head>
<body>
    <div id="app">
        <form>
            <!-- a -->
        </form>
        <!-- c -->
    </div>
    <script>
        // b
    </script>
</body>
</html>

1. v-model

一般用于表单的指令
- 将表单的 value 和数据模型当中的变量进行绑定
- 通常用来实现数据的双向绑定

举例

把 code1 的 a 用下方语句替换

<!-- 1. 对普通文本框的值的设置 -->
<input type="text" name="username" v-model="msg"> {{msg}} <br>

<!-- 2. 单选框与多选框 -->
<input type="radio" name="gender" v-model="gender" value="1">
<input type="radio" name="gender" v-model="gender" value="0">
{{gender}} <br>

<input type="checkbox" name="live" value="1" v-model="live">
<input type="checkbox" name="live" value="2" v-model="live">
{{live}} <br>

<input type="checkbox" name="change" value="1" v-model="change">
<input type="checkbox" name="change" value="2" v-model="change">
<input type="checkbox" name="change" value="3" v-model="change">
{{change}} <br>

<select v-model="select">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select> {{select}}

把 code1 的 b 用下方语句替换

new Vue({
    el: "#app",
    data: {
        msg:    "123",
        gender: "1",
        live:   "",
        change: ["2", "3"],
        select: ""
    }
});

2. v-for

循环

举例

把 code1 的 c 用下方语句替换

<ul>
    <!-- 1. v-for=""
        此处一定要使用 "" -->
    <li v-for="i in arr">{{i}}</li>
</ul>

<ul>
    <!-- 2.
        2.1 v,i 加不加括号均可
        2.2 v,i 可以用别的变量替换
        2.3 可以做简单的运算
        2.4 :key="idx" 加与不加，影响不大，但是推荐加上 -->
    <li v-for="v,idx in arr" :key="idx">{{v}} -> {{idx+1}}</li>
</ul>

<ul>
    <!-- 3. 此处与 Python 的字典有所不同
        3.1 key 与 value 顺序相反
        3.2 有索引值，排在第三位 -->
    <li v-for="v,k,idx in obj">{{k}} -> {{v}} -> {{idx}}</li>
</ul>

把 code1 的 b 用下方语句替换

new Vue({
    el: "#app",
    data: {
        arr: ["铅笔", "橡皮", "尺子", "圆规"],
        obj: {
            name:   "张三",
            gender: "1",  // 一般地，男：1，女：0
            length: "180cm"
        }
    }
});

3. v-if

显示和隐藏
- v-if
- v-else-if
- v-else
- 使用时，中间不能穿插别的元素

举例

把 code1 的 c 用下方语句替换

<div class="box1" v-if="1<0">1</div>
<div class="box2" v-else-if="1==0">2</div>
<div class="box3" v-else>3</div>

<!-- 穿插一些 v-show
    若判断一次即确定显示或隐藏，推荐使用 v-if
    若频繁地显示与隐藏，推荐使用 v-show
-->
<div class="box2" v-show="true">4</div>
<div class="box2" v-show="false">5</div>

把 code1 的 b 用下方语句替换

new Vue({
    el: "#app",
    data: {
    }
});

把 code1 的 d 用下方语句替换

div{
    width: 200px;
    height: 200px;
}
.box1{
    background: red;
}
.box2{
    background: green;
}
.box3{
    background: blue;
}

4. 事件绑定

v-on: 事件类型
- 简写：@事件类型
- 鼠标事件
  - mouseout
  - mouseover
  - mousemove
  - click
  - dblclick
- 键盘事件
  - keydown
  - keyup

举例

把 code1 的 c 用下方语句替换

<button v-on:click="al">单击</button> <br>
<button v-on:dblclick="al">双击</button> <br>
<button v-on:mouseover="al">鼠标移入</button> <br>
<button v-on:mouseout="al">鼠标移出</button> <br>
<input @keydown="down1"> <br>
<input @keydown.50="down2">

把 code1 的 b 用下方语句替换

new Vue({
    el: "#app",
    data: {
        msg: "ok",
    },

    // 主要用来写函数
    methods: {
        al: function(){
            alert(this.msg);
        },
        down1: function(e){
            // alert("你按下了键盘");
            // console.log(e);
            console.log(e.keyCode);
        },
        down2: function(e){
            console.log("你按下了 2");
        }
    }
});

5. v-show

与元素的 display 属性有紧密的关联

举例

把 code1 的 c 用下方语句替换

<button @click="show">show</button>
<div class="box1" v-show="flag"></div>

把 code1 的 b 用下方语句替换

new Vue({
    el: "#app",
    data: {
        flag: false,
    },
    methods: {
        show: function(){
            // this.flag = true;
            this.flag = ~this.flag;  // this.flag = !this.flag; 也行
        }
    }
});

把 code1 的 d 用下方语句替换

.box1{
    width: 200px;
    height: 200px;
    background: red;
}

code1

[Web 前端] 033 Vue 的简单使用

0. 方便起见，定个轮廓

1. v-model

举例

2. v-for

举例

3. v-if

举例

4. 事件绑定

举例

5. v-show

举例