一、循环

在模板中可以用v-for指令来循环数组，对象等。

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
<script setup name="App">
  import { reactive } from "vue"

  const books = reactive([
    {'title': '三国演义','author': '罗贯中'}, 
    {'title': '水浒传','author': '施耐庵'}, 
    {'title': '西游记','author': '吴承恩'}, 
    {'title': '红楼梦','author': '曹雪芹'}
  ])

</script>

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>作者</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(book, index) in books">
        <td>{{ index }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 循环对象

循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup name="App">
  import { reactive } from "vue"

  const person = reactive({
    "username": "知了",
    "age": 18,
    "homepage": "https://www.baidu.com/"
  })

</script>

<template>
  <div v-for="(value, key) in person">
    {{ key }}:{{ value }}
  </div>
</template>

3. 保持状态

循环出来的HTML标签，如果没有使用key属性来唯一标识，如果后期的数据发生了更改，默认是会重用的HTML标签，并且标签的顺序不会跟着数据的顺序更改而更改。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup name="App">
  import { reactive } from "vue"

  const books = reactive(["红楼梦", "水浒传", "三国演义", "西游记"])

  const changeBooks = () => {
    books.sort((x, y) => {
      return 5 - parseInt(Math.random() * 10)
    });
  }

</script>

<template>
  <div v-for="(book, index) in books">
    <label for="book">{{ book }}</label>
    <input type="text" v-bind:placeholder="book">
    </div>
  <button v-on:click="changeBooks">更换图书</button>
</template>

如果你在某个input标签中输入了值，然后点击了“更换图书”的按钮，你会发现即使数据更改了，input并不会跟着数据的更改而更改，这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下：

1
2
3
4
<div v-for="(book,index) in books" v-bind:key="book">
    <label for="book">{{book}}</label>
    <input type="text" v-bind:placeholder="book">
</div>

注意，key只能是整形，或者是字符串类型，不能为数组或者对象。

4. 触发视图更新

Vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。这些方法如下：

4.1 push()：添加元素的方法。
1
books.push("金瓶梅")
4.2 pop()：删除数组最后一个元素。
1
books.pop()
4.3 shift()：删除数组的第一个元素。
1
2
3
shift()：删除数组的第一个元素。
~~~bash
books.shift()
4.4 unshift(item)：在数组的开头位置添加一个元素。
1
books.unshift('金瓶梅')
4.5 splice(index,howmany,item1,…,itemX)：向数组中添加或者删除或者替换元素。
1
2
3
4
5
6
// 向books第0个位置添加元素
books.splice(1,0,"金瓶梅")
// 下标从0开始，删除2个元素
books.splice(0,2)
// 下标从0开始，替换2个元素
books.splice(0,2,'金瓶梅','骆驼祥子')
4.6 sort(function)：排序。
1
2
3
4
5
6
books.sort(function(x,y){
    // 取两个随机数排序
    a = Math.random();
    b = Math.random();
  return a-b;
});
4.7 reverse()：将数组元素进行反转。
1
books.reverse();

5. 覆盖数组

如果是使用ref 函数定义的数组，则可直接赋值，比如：

1
2
3
// ref类型的数组：books是一个数组的ref
let books = ref(["红楼梦", "水浒传", "三国演义", "西游记"])
books.value = ["红楼梦", "水浒传"]

如果是使用reactive 函数定义的数组，则通过以下方式覆盖数组：

1
2
3
4
5
// 通过定义成对象的方式
let books = reactive({
  value: ["红楼梦", "水浒传", "三国演义", "西游记"]
});
books.value = ["红楼梦", "水浒传"]

所以数组建议使用ref 函数来定义。

二、事件绑定

1. 基本使用

事件绑定就是在HTML元素中，通过v-on绑定事件的。事件代码可以直接放到v-on后面，也可以写成一个函数。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup name="App">
import { reactive, ref } from "vue"

let count = ref(0);

const subtract = function (value) {
  count.value -= value;
}

</script>

<template>
  <p>{{ count }}</p>
  <button v-on:click="count += 1">加</button>
  <button v-on:click="subtract(10)">减10</button>
</template>

也可以简写成@click 来代替v-on:click 。

2. 传入event 参数

如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。示例代码如下：

1
2
3
4
5
6
7
8
9
10
<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
const subtract = function(value,event){
    this.count -= value;
    console.log(event);
}
...
</script>

3. 事件修饰符

有时候事件发生，我们可能需要做一些操作。比如针对这个事件要他的默认行为。那么我们可能通过以下代码来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup name="App">
import { reactive, ref } from "vue"

let count = ref(0);

const gotoWebsite = function (event) {
  event.preventDefault();
  window.location = "https://www.360.cn/"
}

</script>

<template>
  <a href="https://www.baidu.com/" v-on:click="gotoWebsite($event)">百度</a>
</template>

那个阻止默认事件执行的代码，我们可以通过click.prevent来实现。示例代码如下：

1
<a href="https://www.baidu.com/" v-on:click.prevent="gotoWebsite($event)">百度</a>

另外，常见的修饰符还有以下：

  1. .stop：event.stopPropagation，阻止事件冒泡。
  2. .capture：事件捕获。
  3. .once：这个事件只执行一次。
  4. .self：代表当前这个被点击的元素自身。
  5. .passive：在页面滚动的时候告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅。
    更多事件修饰符请参考：https://cn.vuejs.org/guide/essentials/event-handling.html

三、ref属性

ref属性用于在script 标签中获取template 中的元素。使用方法如下：
● 在template中的某个标签上定义ref属性。
● 在script中定义与template中与ref同名的变量。
示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <input type="text" ref="usernameInput" placeholder="用户名"/>
    <button @click="showUsername">获取用户名</button>
</template>

<script setup>
import {ref} from 'vue'

let usernameInput = ref()
const showUsername = () => {
    console.log(usernameInput.value.value);
}
</script>

四、v-model

Vue中的响应式变量是双向的，如果想要通过表单元素（比如input、select）实时修改响应式变量，则可以通过v-model属性实现，示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup>
import {ref} from "vue";
let username = ref("");

let category = ref(0);
</script>

<template>
<div>
<input v-model="username" />
<p>用户名为：{{username}}</p>
</div>

<div>
    <select v-model="category">
        <option value="1">Python</option>
        <option value="2">前端</option>
    </select>
    <p>分类为：{{category}}</p>
</div>
</template>