模板语法（2）

一、循环

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

1. 循环数组

<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. 循环对象

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

<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标签，并且标签的顺序不会跟着数据的顺序更改而更改。比如：

 

<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属性就可以了。示例代码如下：

<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对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。这些方法如下：

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

5. 覆盖数组

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

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

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

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

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

二、事件绑定 

1. 基本使用

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

<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参数。示例代码如下：

<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
const subtract = function(value,event){this.count -= value;console.log(event);
}
...
</script>

3. 事件修饰符

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

<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来实现。示例代码如下：

<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：在页面滚动的时候告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅

三、ref属性

ref属性用于在script 标签中获取template 中的元素。使用方法如下：

• 在template中的某个标签上定义ref属性。
• 在script中定义与template中与ref同名的变量。

示例代码如下：

<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属性实现，示例代码如下：

<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>