Vue.js 模板语法详解：插值表达式与指令使用指南

在这里插入图片描述

引言

简要介绍主题：
Vue.js 是一个现代化的 JavaScript 框架，用于构建用户界面。Vue 的模板语法提供了直观且功能强大的工具，用于将数据与 DOM 绑定。本文将深入探讨 Vue.js 的两个核心知识点：插值表达式和指令，帮助读者掌握 Vue 的模板语法。

目标和预期收获：
读者将学习如何使用 Vue.js 的插值表达式和各种指令来动态地控制和渲染 DOM 元素。通过对 Vue 2 和 Vue 3 的比较，读者能够了解各版本的差异，并应用这些知识于实际项目中。

文章目录

- Vue.js 模板语法详解：插值表达式与指令使用指南
- - 引言
  - 主要内容
  - - 1. 插值表达式
    - 2. 指令
  - 深入探讨
  - 实际应用
  - - 案例研究：构建一个简单的用户界面
  - 总结
  - 参考资料

主要内容

1. 插值表达式

什么是插值表达式：
插值表达式是 Vue.js 模板语法的基础，它允许开发者在模板中嵌入 JavaScript 表达式，动态地显示数据。

基本用法：
插值表达式使用双大括号 {{ }} 包裹变量或表达式，将其插入到 HTML 中。

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 1 }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    message: 'Hello, Vue.js!',
    number: 42
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ number + 1 }}</p>
  </div>
</template>

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

const message = ref('Hello, Vue.js!');
const number = ref(42);
</script>

解释：
在这个例子中，{{ message }} 和 {{ number + 1 }} 将 message 和 number 的值插入到 HTML 中。当这些数据发生变化时，页面上的内容也会自动更新。

复杂表达式：
插值表达式也可以用于更复杂的计算和方法调用。例如，调用一个方法来格式化日期：

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p>{{ formatDate(date) }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    date: new Date()
  },
  methods: {
    formatDate(date) {
      return date.toLocaleDateString();
    }
  }
};
</script>

<template>
  <div>
    <p>{{ formatDate(date) }}</p>
  </div>
</template>

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

const date = ref(new Date());

function formatDate(date) {
  return date.toLocaleDateString();
}
</script>

解释：
通过在插值表达式中调用 formatDate 方法，我们可以将日期格式化为本地日期字符串。这种方式使得模板更加动态和灵活。

2. 指令

Vue.js 指令是 Vue 模板语法的核心部分，提供了丰富的功能来控制 DOM 的行为。以下是 Vue.js 常用的指令，包括 Vue 2 和 Vue 3 的使用方法及其区别：

v-bind：绑定属性
v-model：双向数据绑定
v-if、v-else-if、v-else：条件渲染
v-for：循环渲染
v-on：事件处理
v-show：显示/隐藏
v-pre：跳过这个元素和它的子元素的编译
v-cloak：保留元素直到 Vue 实例准备好
v-once：仅渲染元素一次

v-bind

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <img v-bind:src="imageSrc" alt="Vue Logo">
</div>

<script>
export default {
  name: 'app',
  data: {
    imageSrc: 'https://vuejs.org/images/logo.png'
  }
};
</script>

<template>
  <div>
    <img :src="imageSrc" alt="Vue Logo">
  </div>
</template>

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

const imageSrc = ref('https://vuejs.org/images/logo.png');
</script>

解释：
v-bind 指令用于绑定 HTML 属性。在 Vue 3 中，简写为 :。

v-model

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <input v-model="message" placeholder="Type something">
  <p>Message: {{ message }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    message: ''
  }
};
</script>

<template>
  <div>
    <input v-model="message" placeholder="Type something">
    <p>Message: {{ message }}</p>
  </div>
</template>

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

const message = ref('');
</script>

解释：
v-model 实现双向数据绑定。Vue 3 的写法与 Vue 2 相同。

v-if、v-else-if、v-else

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p v-if="isVisible">This is visible</p>
  <p v-else>This is hidden</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    isVisible: true
  }
};
</script>

<template>
  <div>
    <p v-if="isVisible">This is visible</p>
    <p v-else>This is hidden</p>
  </div>
</template>

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

const isVisible = ref(true);
</script>

解释：
v-if 根据条件渲染元素。Vue 3 中的使用方式与 Vue 2 相同。

v-for

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
  </ul>
</div>

<script>
export default {
  name: 'app',
  data: {
    items: [
      { text: 'Learn Vue.js' },
      { text: 'Build something awesome' }
    ]
  }
};
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
  </ul>
</template>

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

const items = ref([
  { text: 'Learn Vue.js' },
  { text: 'Build something awesome' }
]);
</script>

解释：
v-for 用于循环渲染列表。Vue 3 中使用方式与 Vue 2 相同，但推荐使用 :key 属性来提高性能。

v-on

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <button v-on:click="showMessage">Click Me</button>
</div>

<script>
export default {
  name: 'app',
  methods: {
    showMessage() {
      alert('Hello, Vue.js!');
    }
  }
};
</script>

<template>
  <button @click="showMessage">Click Me</button>
</template>

<script setup>
function showMessage() {
  alert('Hello, Vue.js!');
}
</script>

解释：
v-on 用于绑定事件处理函数。Vue 3 的简写为 @click。

v-show

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p v-show="isVisible">This is visible</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    isVisible: true
  }
};
</script>

<template>
  <p v-show="isVisible">This is visible</p>
</template>

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

const isVisible = ref(true);
</script>

解释：
v-show 控制元素的显示和隐藏，与 v-if 的区别在于 v-show 始终渲染元素，但通过 CSS 控制其显示状态。

v-pre

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p v-pre>{{ rawText }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    rawText: 'This will not be compiled'
  }
};
</script>

<template>
  <p v-pre>{{ rawText }}</p

>
</template>

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

const rawText = ref('This will not be compiled');
</script>

解释：
v-pre 用于跳过这个元素及其子元素的编译，直接显示原始文本。

v-cloak

代码示例（Vue 2 和 Vue 3）：

<div id="app" v-cloak>
  <p>{{ message }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    message: 'This is a message'
  }
};
</script>

<style>
[v-cloak] {
  display: none;
}
</style>

<template>
  <div v-cloak>
    <p>{{ message }}</p>
  </div>
</template>

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

const message = ref('This is a message');
</script>

<style>
[v-cloak] {
  display: none;
}
</style>

解释：
v-cloak 用于防止 Vue 实例编译完成前页面的闪烁。编译完成后，v-cloak 会被自动移除。

v-once

代码示例（Vue 2 和 Vue 3）：

<div id="app">
  <p v-once>{{ message }}</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    message: 'This will only render once'
  }
};
</script>

<template>
  <p v-once>{{ message }}</p>
</template>

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

const message = ref('This will only render once');
</script>

解释：
v-once 指令仅渲染元素一次，之后不再更新。这对于性能优化特别有用。

深入探讨

插值表达式的应用：

动态内容：可以在模板中动态地插入计算结果或方法调用的返回值，提高模板的灵活性和动态性。
复杂计算：虽然插值表达式可以处理复杂的计算，但推荐将复杂逻辑放在计算属性或方法中，以保持模板的简洁性。

指令的应用与最佳实践：

v-bind：推荐为动态绑定属性使用 v-bind，并利用简写 : 提高代码的可读性。
v-model：在表单控件中使用 v-model 实现双向数据绑定，确保数据的实时更新。
v-if 和 v-show：选择使用 v-if 或 v-show 时应考虑性能和使用场景。v-if 更适合条件较少变化的场景，而 v-show 更适合频繁切换的场景。
v-for：在使用 v-for 时，始终使用唯一的 key，以便 Vue 更高效地更新 DOM。

Vue 2 和 Vue 3 的区别：

Vue 3 引入了更简洁的语法：例如，v-on 的简写 @ 和 v-bind 的简写 :。
Vue 3 的 Composition API：允许在 <script setup> 中使用更简洁的语法来定义数据和方法，避免了 Vue 2 中的 data、methods 等选项的冗长写法。
性能优化：Vue 3 对虚拟 DOM 和响应式系统进行了优化，使得性能比 Vue 2 更高效。

实际应用

案例研究：构建一个简单的用户界面

代码实现（Vue 2）：

<div id="app">
  <h1>{{ title }}</h1>
  <input v-model="search" placeholder="Search">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-if="filteredItems.length === 0">No items found</p>
</div>

<script>
export default {
  name: 'app',
  data: {
    title: 'User List',
    search: '',
    items: [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Jack Johnson' }
    ]
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.search.toLowerCase()));
    }
  }
};
</script>

代码实现（Vue 3 - setup 语法糖）：

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="search" placeholder="Search">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-if="filteredItems.length === 0">No items found</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const title = ref('User List');
const search = ref('');
const items = ref([
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' },
  { id: 3, name: 'Jack Johnson' }
]);

const filteredItems = computed(() => {
  return items.value.filter(item => item.name.toLowerCase().includes(search.value.toLowerCase()));
});
</script>