个人博客
0%

【Vue】Vue基本语法

发表于 更新于 分类于

介绍Vue的基本语法

一、Vue的template

1.1 代码规范

代码规范：缩进使用2个空格

在IDEA中设置：

1.2 设置IDEA模板

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
  {{message}}
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！"
    }
  });
</script>

二、插值操作

2.1 mustache语法

  • mustache：插值操作，即{{ }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
  <h2>{{message}}</h2>

  <!--mustache语法支持简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + '·' + lastName}}</h2>
  <h2>{{number * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      firstName: "莱特",
      lastName: "雷",
      number: 10
    }
  });
</script>

2.2 其他的插值操作

  • （1）v-once
1
2
3
4
<div id="app">
  <!--不会随着数据改变而页面显示也发生改变-->
  <h2 v-once>{{message}}</h2> 
</div>
  • (2)v-html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <!--以html的形式展示url属性-->
  <h2 v-html="url"></h2> <!--结果：B站-->
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      url: "<a href='http://bilibili.com'>B站</a>"
    }
  });
</script>
  • （3）v-text
1
2
3
4
<div id="app">
  <!--展示文本，与mustache语法相似，但不灵活，一般不使用-->
  <h2 v-text="message"></h2>
</div>
  • （4）v-pre
1
2
3
4
<div id="app">
  <!--将文本原封不动的进行显示-->
  <h2 v-pre>{{message}}</h2> <!--结果：{{message}}-->
</div>
  • （5）v-cloak
    • 案例：解决html中vue加载出现卡顿，导致信息没有及时更改
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
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none; /*拥有v-clock属性的标签不显示内容*/
    }
  </style>
</head>
<body>
  <!--cloak在被vue解析前存在
           在vue解析后会消失
  -->
  <div id="app" v-cloak>
    {{message}}
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: "你好啊！"
        }
      });
    }, 1000)
  </script>
</body>

二、属性绑定

标签中的属性无法使用mustache语法来进行绑定，则需要v-bind来进行绑定

2.1 v-bind基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <!--标签中属性的取值绑定，不能使用mustache语法-->
  <!-- 使用v-bind来绑定-->
  <img v-bind:src="imgUrl" width="130" height="200"/>

  <!-- v-bind的语法糖 ':'-->
  <a :href="aUrl">B站</a>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      imgUrl: "../../img/刻晴.jpg",
      aUrl: "https://www.bilibili.com"
    }
  });
</script>

2.2 动态绑定class

  • （1）对象语法
    • 把对象作为class的参数
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
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--原始方法-->
    <h2 class="active">{{message}}</h2>
    <!--v-bind绑定-->
    <h2 :class="type">{{message}}</h2>

    <!--开发需求：已经点击过的链接颜色发生改变-->
    <!--
      v-bind:class="{key1: value1, key2: value2 ...}" class绑定可以绑定一个对象
      v-bind:class="{类名1: true, 类名2: false}" boolean值为true，则绑定该类名，false不绑定
    -->
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2> <!--可以在动态绑定class之后，一样可以定义普通class，会自动合并-->
    <button v-on:click="change()">改变</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: "你好啊！",
        type: "active",
        isActive: true,
        isLine: true
      },
      methods: {
        change : function () {
          this.isActive = !this.isActive;
        }
      }
    });
  </script>
</body>
  • （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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
    .line{
      font-size: 50px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--数组绑定
    注意：数组带''为字符串，不带''为变量，会从vue中寻找
    -->
    <h2 :class="['active', 'line']">{{message}}</h2> <!--和普通class可以共存-->
    <h2 :class="[type1, type2]">{{message}}</h2>

    <!--可以将数组绑定封装在方法中调用-->
    <h2 :class="getClass()">{{message}}</h2>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: "你好啊！",
        type1: "active",
        type2: "line"
      },
      methods: {
        getClass : function () {
          return [this.type1, this.type2];
        }
      }
    });
  </script>
</body>

2.3、动态绑定style

  • （1）对象语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <!--对象绑定
  {key1: value1, key2: value2 ...}
  {属性名: 属性值}
  注意：属性名要使用驼峰命名 font-size ==> fontSize，属性值要用''括住，否则被当做变量
  -->
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
  <h2 :style="{fontSize: size + 'px'}">{{message}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      size: 50 //可以动态改变字体大小
    }
  });
</script>
  • （2）数组语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  <!--数组语法
  在数组中传递对象
  -->
  <h2 :style="[style1, style2]">{{message}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      //创建数组参数对象
      style1: {fontSize: '50px', color: 'white'},
      style2: {backgroundColor: 'red'}
    }
  });
</script>

四、计算属性

计算属性为在展示数据时，先进行数据处理再展示

4.1 计算属性基本使用

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
<div id="app">
  <!--旧方法实现字符拼接-->
  <h2>{{firstName + '·' + lastName}}</h2>

  <!--使用方法解决-->
  <h2>{{getFullName()}}</h2>
  
  <!--计算属性：跟方法类似-->
  <h2>{{fullName}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: "莱特",
      lastName: "雷"
    },
    methods: {
      getFullName: function () {
        return this.firstName + '·' + this.lastName;
      }
    },
    //计算属性
    computed: {
      fullName: function () { //看似函数，实则属性
        return this.firstName + '·' + this.lastName;
      }
    }
  });
</script>

4.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
27
28
29
30
31
32
33
34
35
36
37
38
<div id="app">
  <h2>总价格为：{{totalPrice}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      games: [
        {id: 101, name: '怪物猎人', price: 200},
        {id: 102, name: '塞尔达传说', price: 330},
        {id: 103, name: '古剑三', price: 98}
      ]
    },
    //computed执行一次后会有缓存，函数每调用一次就会执行一次，效率比函数好
    computed:{
      totalPrice: function () {
        let result = 0;
        for (let i=0; i< this.games.length; i++){
          result += this.games[i].price;
        }
        return result;

        /*
        其余for循环
         */
        for (let i in this.games){ //获取下标
          result += this.games[i].price;
        }

        for (let game of games){ //获取对象
          result += game.price;
        }
      }
    }
  });
</script>

4.3 计算属性getter和setter

  • 计算属性本质是一个类，里面包含一个get、set方法，所有调用计算属性的时候不用函数的形式调用，直接使用属性名
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
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: "莱特",
      lastName: "雷"
    },
    computed: {
      // 计算属性的简写方法
      // fullName: function () {
      //   return this.firstName + '·' + this.lastName;
      // }

      //计算属性详细写法
      //一般计算属性只要实现get方法就可以
      fullName: {
        set: function (newValue) {
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get : function () {
          return this.firstName + '·' + this.lastName;
        }
      }
    }
  });
</script>

4.4 计算属性和methods的区别

  • 计算属性使用后会有缓存，效率要比method效率高

五、ES6语法

5.1 块级作用域

  • var可以看作为JavaScript的语言设计上的错误，且不能修复和移除，因为要向后兼容。因此设计出let来替代var。let拥有块级作用域，var没有
1
2
3
4
5
6
7
<script>
  {
    var name = "莱特雷";
    console.log(name);
  }
  console.log(name); //var没有块级作用域，'{}'里面外面都能用
</script>
  • 在es5之前，因为if和for都没有块级作用域的概念，所有在很多时候，我们都必须借助function作用域来解决引用外面变量的问题
  • es6加入了let，let拥有了if和for的的作用域

5.2 const关键字

  • const：将某个变量变成常量，不可再次赋值
  • const使用注意：
    • 1.不能重新赋值
    • 2.在创建的时候一定要赋值
    • 3.常量指向的对象不能修改，但是对象内的属性可以修改

5.3 对象字面量增强写法

  • 字面量：const Obj = {} ，中’{}’内的内容为字面量
  • （1）属性增强写法
1
2
3
4
5
6
7
8
9
ES5写法
    const name = "莱特雷";
    const age = 18;
   
    const person = {
      name: name,
      age: age
    }
    console.log(person);
1
2
3
4
5
6
7
8
9
ES6写法
    const name = "莱特雷";
    const age = 18;

    const person2 = {
      name,
      age,
    }
    console.log(person2)
  • （2）函数定义增强写法
1
2
3
4
5
6
7
ES5写法
    const func = {
      run: function () {
        console.log("跑步")
      }
    };
    func.run();
1
2
3
4
5
6
7
ES6写法
    const func2 = {
      run() {
        console.log("跑步")
      }
    };
    func2.run();

六、事件监听

  • Vue使用v-on来监听事件

6.1 v-on介绍

  • 作用：绑定事件监听器
  • 语法糖：@
  • 预期：Function|Inline Statement|Object
  • 参数：event

6.2 v-on参数传递

  • （1）无参函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <!--无参，括号可省略-->
  <button @click="btn1Click">按钮1</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btn1Click() {
        console.log("btn1被按下");
      }
    }
  });
</script>
  • （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
<div id="app">
  <!--1、有参，正常使用-->
  <button @click="btn2Click('按钮2')">按钮2-1</button>

  <!--2、有参，传递空参
    会传递undifine属性给函数
  -->
  <button @click="btn2Click()">按钮2-2</button> <!--undefined被按下-->

  <!--3、有参，省略括号调用
    换传递浏览器自动生成的event事件对象
  -->
  <button @click="btn2Click">按钮2-3</button> <!--[object MouseEvent]被按下-->
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btn2Click(name){
        console.log(name + "被按下");
      }
    }
  });
</script>
  • （3）传参并传事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <!--同时获取普通参数，以及浏览器事件，可以使用$event手动获取浏览器事件-->
  <button @click="btn3Click('按钮3', $event)">按钮3</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btn3Click(name, event){
        console.log("按钮：" + name + ", " + "事件：" + event);
      }
    }
  });
</script>

6.3 v-on修饰符

  • （1）stop修饰符
    • 阻止事件冒泡：触发按钮事件的同时，不触发div事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 1、stop修饰符 -->
<div id="app" @click="divClick">
  这是div文本
  <button @click.stop="btnClick">按钮</button> <!--阻止事件冒泡-->
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btnClick() {
        console.log("btnClick");
      }
    }
  });
</script>
  • （2）prevent修饰符
    • 阻止自动执行的事件（网页跳转，表单提交）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <!--2、阻止页面自动跳转-->
  <a href="https://www.bilibili.com" v-on:click.prevent="alert()">bilibili</a>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      alert(){
        alert("正要跳转bilibili!");
      }
    }
  });
</script>
  • （3）{keyCode}修饰符
    • 指定监听键盘特定按键
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app" @click="divClick">
  <!-- 3、监听键盘某个按键的点击
    案例：监听Enter键的按下
  -->
  <input type="text" @keyup.enter="keyUp" />
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    // el: "#div2",
    methods: {
      keyUp() {
        console.log("正在使用键盘按钮")
      }
    }
  });
</script>
  • （4）native
    • 用于组件的修饰符，暂时不讲
  • （5）once修饰符
    • 事件只触发一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 1、stop修饰符 -->
<div id="app">
  <!--事件只触发一次-->
  <button @click.once="btnClick">按钮</button>
</div>


<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btnClick() {
        console.log("btnClick");
      }
    }
  });
</script>

七、条件判断

7.1 v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <button @click="change()">切换</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      isShow: true
    },
    methods: {
      change() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

7.2 v-if和v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h2 v-else>isShow为false时显示我</h2>
  <button @click="change()">切换</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！",
      isShow: true
    },
    methods: {
      change() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

7.3 v-if和v-else-if和v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <p v-if="score>=90">优秀</p>
  <p v-else-if="score>=80">良好</p>
  <p v-else-if="score>=60">及格</p>
  <p v-else>不及格</p>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 55
    }
  });
</script>

7.4 v-if小案例

  • 用户登录可以选择登录的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="请输入用户账号"/>
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="请输入用户邮箱"/>
  </span>
  <button @click="isUser = !isUser">切换登录</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  });
</script>
  • 问题：input输入框在切换登录形式时没有清空，仍然保留前面的信息
  • 原因：Vue内部使用虚拟Dom，会出于性能考虑，尽量使用重复的元素，而不是新建元素
  • 解决方法：在input标签中添加key属性，作为唯一标识，vue会识别key属性是否相同，不相同就不会复用
1
2
3
4
5
...
<input type="text" id="username" placeholder="请输入用户账号" key="username"/>
...
<input type="text" id="email" placeholder="请输入用户邮箱" key="email"/>
...

7.5 v-show使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <!--
  条件元素为false：
    v-if ：包含的元素不会存在Dom中
    v-show：只是个元素添加行内样式'display: none'，来隐藏，仍然存在Dom中
  -->
  <h2 v-if="isShow" id="if">{{message}}</h2>
  <h2 v-show="isShow" if="show">{{message}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊",
      isShow: true
    }
  });
</script>

八、循环遍历

8.1 遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
  <!--遍历数组
  一个取值时，获取的是数组元素
  两个取值时，参数1时数组元素，参数2是数组下标
  -->
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>

  <ul>
    <li v-for="(name, index) in names">{{index+1}}、{{name}}</li>
  </ul>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ["莱特雷", "C酱", "咕料", "定春"]
    }
  });
</script>

8.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
27
28
29
30
31
32
<div id="app">
  <!--遍历对象中的属性
    在遍历对象中，如何只获取一个值，获取的是value
    获取两个值时，参数1为value，参数2为key
    获取三个值时，参数1为value，参数2为key，参数3为index
  -->
  <ul>
    <li v-for="value in person">{{value}}</li>
  </ul>

  <ul>
    <li v-for="(value, key) in person">{{key + ": " + value}}</li>
  </ul>

  <ul>
    <li v-for="(value, key, index) in person">{{index+1 + "、" + key + ": " + value}}</li>
  </ul>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      person: {
        name: "C酱",
        age: 18,
        hair: "没有"
      }
    }
  });
</script>

8.3 v-for绑定key

  • 在v-for使用中，可以绑定一个key，key的值要唯一，建议之间绑定数组元素。
    • 绑定key，在数组插入元素时，会直接才插入的位置，创建新的元素，不需要进行额外操作
    • 未绑定key，会在尾部创建一个元素，然后逐步从插入的位置进行替换

8.4 数组响应式

  • 数据的响应式，即数据发生修改，页面内容自动更新
  • 数组中具有响应式的方法：
    • （1）push()：在数据尾部添加数据
    • （2）pop()：从尾部开始删除数据
    • （3）shift()：从头部开始删除数据
    • （4）unshift()：在数据头部添加元素
    • （5）splice(起始位置, 删除元素个数, 插入参数)
    • （6）sort()：排序
    • （7）reverse()：反转
    • （8）Vue.set(要修改的对象, 索引值, 修改值)：Vue自带的方法
  • 数组中不具有响应式的方法
    • （1）通过数组下标修改数组

九、JavaScript高阶函数

9.1 正常写法

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
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      numbs: [1, 8, 24, 50, 99, 100 ,152, 365, 777]
    },
    methods: {
      /*
      编程范式：命令式编程/声明式编程
      编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
      */
      getNumbers() {
        //需求1：将所有小于100的数提取出来
        let newNums = [];
        for (let num of this.numbs) {
          if (num < 100) {
            newNums.push(num);
          }
        }

        //需求2：将上面数据x2
        for (let i in newNums) {
          newNums[i] = 2 * newNums[i];
        }

        //需求3：将该数组相加求和
        let totalNum = 0;
        for (let num of newNums) {
          totalNum += num;
        }
        return totalNum;
      }
    }
  }
</script>

9.2 高阶函数使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getNumbers2 () {
  //1、filter中的回调函数，必须返回boolean值。
  //返回true时，会自动将遍历的元素，加入到新的数组中
  let newNums = this.numbs.filter(function (n) {
    return n < 100;
  });

  //2、map函数，遍历所有元素，返回对元素操作后的数据，加入到新数组中
  let newNum2 = newNums.map(function (n) {
    return n*2;
  });

  //3、reduce：对数据中所有内容进行汇总
  let totalNum = newNum2.reduce(function (preValue, n) {
    return preValue + n;
  }, 0); //0为初始值，即第一次遍历的perValue值
  return totalNum;
}

9.3 链式编程

1
2
3
4
5
6
7
8
9
10
11
12
//链式编程
getNumbers3() {
  let total = this.numbs.filter(function (n) {
    return n < 100;
  }).map(function (n) {
    return n*2;
  }).reduce(function (preValue, n) {
    return preValue + n;
  }, 0)

  return total;
}

9.4 箭头函数（Lambda表达式）

1
2
3
4
5
//箭头函数（Lambda表达式）
getNumbers4(){
  let total = this.numbs.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0);
  return total;
}

十、表单绑定

10.1 v-model基本使用

  • v-model实现表单元素和数据的双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <input type="text" v-model="message"> <!--双向绑定数据：前端数据改变，后端数据也跟着改变-->
  {{message}}
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！"
    }
  });
</script>

10.2 v-model实现原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--用已有的知识实现v-model-->
<div id="app">
  <!--方式一-->
  <input type="text" :value="message" @input="varChange">
  <!--方式二-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <br/>
  {{message}}
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！"
    },
    methods :{
      varChange(event){
        this.message = event.target.value;
      }
    }
  });
</script>
  • 总结：v-model可以看做是v-bind和v-on组合使用的一个实例

10.3 v-model结合radio使用（单选）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  <label form="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男 <!--v-model绑定同一个属性时，可以省略name，来实现单选的互斥-->
  </label>
  <label form="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h3>选择的性别是：{{sex}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      sex: '男' //直接设置默认值，不用添加标签参数checked
    }
  });
</script>

10.4 v-model结合checkbox使用

  • （1）单选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <!--checkbox单选框-->
  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同一协议
    <h3>你的选择是：{{isAgree}}</h3>
    <button :disabled="!isAgree">下一步</button>
  </label>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: false //单选框对应boolean类型
    }
  });
</script>
  • （2）多选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <!--checkbox多选框-->
  <input type="checkbox" value="怪物猎人" v-model="games">怪物猎人
  <input type="checkbox" value="蜘蛛侠" v-model="games">蜘蛛侠
  <input type="checkbox" value="最终幻想" v-model="games">最终幻想
  <input type="checkbox" value="塞尔达传说" v-model="games">塞尔达传说
  <h3>你喜欢的游戏是：{{games}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      games: [] //多选框对应数组类型
    }
  });
</script>

10.5 v-model结合select使用

  • （1）选择一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <!--选择一个-->
  <select name="game" v-model="game">
    <option value="怪物猎人">怪物猎人</option>
    <option value="漫威蜘蛛侠">漫威蜘蛛侠</option>
    <option value="塞尔达传说">塞尔达传说</option>
    <option value="刺客信条">刺客信条</option>
  </select>
  <h3>选择的游戏的是：{{game}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      game: '怪物猎人'
    }
  });
</script>
  • （2）选择多个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <!--选择多个-->
  <select name="game" v-model="games" multiple>
    <option value="怪物猎人">怪物猎人</option>
    <option value="漫威蜘蛛侠">漫威蜘蛛侠</option>
    <option value="塞尔达传说">塞尔达传说</option>
    <option value="刺客信条">刺客信条</option>
  </select>
  <h3>选择的游戏的是：{{games}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      games: []
    }
  });
</script>

10.6 v-model的修饰符

  • （1）lazy修饰符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <!--1、lazy：取消实时更新，当用户按Enter或失去焦点时才更新数据-->
  <input type="text" v-model.lazy="message">
  <h3>{{message}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好啊！"
    }
  });
</script>
  • （2）number修饰符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <!--2、number：绑定的值为number类型，v-model默认绑定的时String类型，若要后台读取的是number类型，需要添加此修饰符-->
  <input type="number" v-model.number="num">
  <h3>{{num}} + {{typeof num}}</h3>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num: 0
    }
  });
</script>
  • （3）trim修饰符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <!--3、trim：去除两边的空格-->
  <input type="text" v-model.trim="text">
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      text: '去除空格'
    }
  });
</script>