Vue的相关指令

作者: 咸鱼不咸_123 | 来源:发表于2022-04-05 15:29 被阅读0次

1.vue的基本使用

先导入所需要的js模块
创建vue实例
- el:是vue实例所要控制的DOM结构，接收的值是一个选择器
- data:是vue实例控制的DOM结构所依赖的数据源

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">{{message}}</div>
  <!-- 导入vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        message: "hello vue.js"
      }
    })
  </script>
</body>

</html>

2.指令

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构.

vue的指令分为6大类

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

3.内容渲染指令

3.1 v-text

往标签内进行渲染数据源中数据，但会覆盖标签原本已有的数据。

实际开发中，用的少

30.png

3.2 {{}} 语法（插值表达式）

专门用来解决v-text会覆盖标签内的文本内容，相当于提供了一个占位符的作用

在实际开发中，用的比较多，只是内容的占位符，不会覆盖原有的。

31.png

3.3 v-html

将带标签的字符串，渲染为真正的html标签。

v-text和插值表达式只能渲染纯文本内容
如果需要将包含html标签的字符串渲染为页面的HTML元素，则需要用到v-html这个命令。
会覆盖标签原有的内容

32.png

4.属性绑定指令

插值表达式只能用在内容节点中，不能用在元素的属性节点中！

可以使用v-bind对元素的属性进行动态绑定值

语法格式如下：

v-bind:属性名="变量名"

简写为

:属性名="变量名"

在使用v-bind绑定属性期间，如果需要拼接字符串，则字符串外面需要包裹单引号，不加单引号，则认为是一个变量
```
  <div :id="'list-'+id">动态绑定id</div>
```

33.png

4.1 使用js表达式

其实在vue的模板渲染语法中，除了支持绑定简单的数据值之外，还支持javascript表达式

4.1.1 插值表达式中使用js表达式

34.png

4.1.2 属性绑定使用js表达式

35.png

5. 事件绑定指令

5.1 v-on的基本用法

基本用法

v-on:事件名="事件处理函数"

事件处理函数放在methods节点下定义

36.png

5.2 v-on的语法糖 @

v-on简写方式是

@事件名="处理函数"

例如：

通过this访问数据源中的数据

37.png

5.3 绑定事件并传参

在绑定事件处理函数时，可以使用()小括号来传递参数

@事件名="事件处理函数(参数)"

38.png

5.4 原生事件的替换

原生DOM对象有onclick、oninput、onkeyup事件，替换为vue绑定事件后：

分别为 v-on:click、v-on:input、v-on:keyup

5.5 事件绑定的$event

如果事件处理函数不传参，则默认的第一个参数是一个事件对象，通过e.target可以获取当前dom元素

注意不要加小括号，即使不传参数，但加了小括号，第一个参数就不是一个事件对象

例如：下面这个例子如果count的值为偶数，则按钮的背景颜色变为红色，否则移除

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>{{count}}</p>
    <!-- 如果count为偶数，添加按钮的背景颜色为红色，否则去掉按钮的背景颜色 -->
    <!-- 默认情况下，如果不给事件处理函数传参，则默认的第一个参数为事件对象 -->
    <button @click="add">+N</button>


  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        count: 0
      },
      methods: {
        add(e) {
          this.count++;
          if (this.count % 2 == 0) {
            e.target.style.backgroundColor = 'red';
          } else {
            e.target.style.backgroundColor = '';
          }


        }
      },
    })
  </script>
</body>

</html>

5.5.1 $event事件对象

如果我们需要传参数，但是又需要事件对象，则可以自己传入事件对象，即$event代表这个触发的事件对象

39.png

5.6 事件修饰符

5.6.1 prevent

在没有使用事件修饰符时，如果不想跳转页面，则需要使用事件对象，然后.preventDefault()来阻止默认事件

<div id="app">
    <a href="http://www.baidu.com" @click="show">跳转到百度</a>

  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        count: 0
      },
      methods: {
        show(e) {
          // 希望了点击了不跳转页面，则需要 阻止默认事件
          e.preventDefault();
          console.log("点击了a链接");
        }
      },
    })
  </script>

但我们可以在事件名的后面使用事件修饰符.prevent来阻止默认事件

例如：将上述代码可以改为如下：

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="show">跳转到百度</a>

  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        count: 0
      },
      methods: {
        show() {
          console.log("点击了a链接");
        }
      },
    })
  </script>

5.6.2 stop

阻止事件冒泡

5.6.2.1 不阻止默认事件

40.png

5.6.2.2 使用js原生阻止默认事件 stopPropagation

41.png

5.6.2.3 使用.stop事件修饰符

42.png

5.6.3 capture

以捕获模式触发当前的事件处理函数

一般来说，谁加capture就先捕获谁，但如果同时加了，就看祖先元素级别优先于子孙级别，则会先触发祖先元素，再触发子孙元素。

43.png

5.6.4 once

绑定的事件只触发一次

5.6.5 self

只有在event.target是当前元素自身时触发事件处理函数

5.6.6 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

5.6.6.1 .enter

只有按下回车会触发

5.6.6.2 esc

只有按下 ESC键才会触发

按下esc清空，input输入框的值

<div id="app">
    <input type="text" @keyup.esc="clear">
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源

      },
      methods: {
        clear(e) {
          e.target.value = ""
        }
      },
    })
  </script>

6.双向数据绑定指令

vue提供了v-model双向数据绑定，来辅助开发者在不操作DOM的前提下，快速获取表单的数据

6.1 使用v-model

 <div id="app">
    <p>用户名:{{username}}</p>
    <input type="text" v-model="username">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        username: ""
      },
      methods: {
      },
    })
  </script>

6.2 v-model的原理

在这里，我使用v-bind属性绑定指令和事件监听input事件共同实现v-model

 <div id="app">
    <p>用户名:{{username}}</p>
    <input type="text" :value="username" @input="changeName">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        username: ""
      },
      methods: {
        changeName(e) {
          this.username = e.target.value;
        }
      },
    })
  </script>

6.3 应用场景

input

type="text"

type="radio"

<input type="radio" v-model="gender" value="男">
<input type="radio" v-model="gender" value="女">

type="checkbox"
textarea

select

<select v-model="city">
        <option value="0">上海</option>
        <option value="1">广州</option>
        <option value="2">怀化</option>
</select>

6.4 v-model指令的修饰符

6.4.1 .number

自动将用户的输入值转化为数值,

如果输入的字符是纯数字，则会转换为数字
如果输入的字符包括非数字，则依然还是字符串形式

44.png

45.png

input的值为 type="number"的区别

它只能输入数字字符，除了指数e以外
但是最后的值的形式还是字符串形式

46.png

要想只输入数字，且最后值的形式是数字，可以使用type="number" 并且使用.number修饰符，将值转化为数字

47.png

6.4.2 .trim

自动过滤用户输入的首尾空白字符

6.4.3 .lazy

在"change"时而非"input"时更新

7 条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏，条件渲染指令主要有如下两个：

v-if:在显示与隐藏的过程中，显示的时候，会创建这个DOM元素，隐藏的时候，会销毁这个DOM元素
- 如果刚进入不会渲染，后面很长一段时间都可能不会被展示出来，用这个性能会比较好
- v-if绑定的值如果是false ,如果使用的是.html文件，会从上往下执行，会先被创建，然后再销毁
- v-if绑定的值如果是false,如果使用的文件是.vue文件，则会先编译，然后再渲染，所以不会先创建，再销毁

48.png

49.png

v-show：动态为元素添加或移除display:none;来达到元素的显示和隐藏
- 如果要频繁的切换元素的显示与隐藏，使用v-show的性能会较好

50.png

在实际开发中，不需要考虑性能问题，直接使用v-if即可。

7.1 v-if的配套使用

v-if
v-else-if
v-else

v-else-if 充当代码块的"else-if"，可以多次使用

注意:v-else-if需要和v-if一起配合使用，否则它不会被识别

8.列表渲染指令 v-for

基本语法如下：

v-for="(item,index) in items"

items是待循环的数组
item是循环的每一项
index是循环的第几项，可以省略不写，一般第二个参数为index

注意：v-for指令中的item和index都是形参，可以随意命名，没有固定规范

只要用到了v-for指令，一定要绑定key

具体代码示例如下：

 <div id="app">

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
      </thead>
      <tbody>
        <!-- 只要用到了v-for指令，一定要绑定key -->
        <tr v-for="(item,index) in list" :key="index">
          <td>{{index}}</td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
        </tr>

      </tbody>
    </table>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      // el是一个固定的写法，表示vm实例要控制哪个区域的DOM结构，接收的值是一个选择器
      el: '#app',
      data: { //对应控制区域的DOM结构所依赖的数据源
        list: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
        ]
      },
      methods: {
      },
    })
  </script>

8.1 key的注意点

在使用v-for的使用，一定要绑定key
key的值是有要求的，只能数字或字符串
注意：key的值千万不能重复，否则终端会报错

9.总结

vue的相关指令.png