【Vue】模板语法

系列文章目录

第三章 模板语法

---

---

前言

---

一、文本：

在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

<script setup name="App">
  import { ref } from 'vue'

  let username = ref('张三')

  function onModifyUsername() {
    username.value = '李四'
  }
</script>

<template>
  <p>用户名：{{ username }}</p>
  <button @click="onModifyUsername">修改用户名</button>
</template>

当然，如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。示例代码如下：

<p v-once>{{username}}</p>

二、显示原生的HTML

有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。示例代码如下：

<script setup name="App">
  let code = "<h1>欢迎来到知了课堂</h1>"
</script>

<template>
  <div v-html="code"></div>
</template>

三、属性绑定

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。比如以下代码是不行的：

<script setup name="App">
  let classname = "main"
</script>

<template>
  <div class="classname">粉红色的回忆</div>
</template>

  <style scoped>
  .main{
  background-color: pink;
  }
</style>

需要使用v-bind才能生效：

<template>
  <div v-bind:class="classname">粉红色的回忆</div>
</template>

或者可以把v-bind 省略，仅保留:class 即可：

<template>
  <div :class="classname">粉红色的回忆</div>
</template>

四、使用JavaScript表达式：

在使用了v-bind，或者{{}}的语法中。我们还可以执行一个JavaScript表达式。示例代码如下：

<script setup name="App">
  let temp = 19;
</script>

<template>
  <div>{{ temp>18?'出去玩':'回家睡觉' }}</div>
</template>

注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了。

五、条件判断：

在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下：

<script setup name="App">
  let weather = 'sun';
</script>

<template>
  <p v-if="weather == 'sun'">今天去公园玩！</p>
  <p v-else-if="weather == 'rain'">今天去看电影！</p>
  <p v-else>今天哪儿也不去！</p>
</template>

六、v-show和v-if：

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

七、循环

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

1. push()：添加元素的方法。

books.push("金瓶梅")

2. pop()：删除数组最后一个元素。

books.pop()

3. shift()：删除数组的第一个元素。

books.shift()

4. unshift(item)：在数组的开头位置添加一个元素。

books.unshift('金瓶梅')

5. splice(index,howmany,item1,…,itemX)：向数组中添加或者删除或者替换元素。

// 向books第0个位置添加元素
books.splice(1,0,"金瓶梅")
// 下标从0开始，删除2个元素
books.splice(0,2)
// 下标从0开始，替换2个元素
books.splice(0,2,'金瓶梅','骆驼祥子')

6. sort(function)：排序。

books.sort(function(x,y){
    // 取两个随机数排序
    a = Math.random();
    b = Math.random();
  return a-b;
});

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

更多事件修饰符请参考：https://cn.vuejs.org/guide/essentials/event-handling.html

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