Vue3 学习笔记（五）Vue3 模板语法详解

在 Vue3 的世界里，模板语法是我们构建用户界面的基石。今天，让我们一起深入了解 Vue3 的模板语法，我将用通俗易懂的语言和实用的例子，带你掌握这项必备技能。

1、文本插值：最基础的开始

想在页面上显示数据？双大括号语法 {``{ }} 就是你的好帮手！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试)</title>

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>

</head>
<body>

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: '你好 Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

运行结果：

2、插入 HTML：`v-html` 指令

双大括号会将数据解释为纯文本，而不是 HTML。

如果想插入 HTML，需要使用 v-html 指令.

 <p>使用双大括号的文本插值: {{ rawHtml }}</p>
 <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

运行结果：

这里看到的 v-html attribute 被称为一个指令。

指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

3 、绑定属性：让元素活起来

双大括号不能在 HTML attributes 中使用。

想要响应式地绑定一个 attribute，应该使用 v-bind 指令。

（1）、常规 `v-bind` 指令

<div v-bind:id="dynamicId"></div>

<div v-bind:class="{'class1': use}">

测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
</head>
<body>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>

<script>
const app = {
  data() {
    return {
      use: false
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

运行结果：

（2）、简写

v-bind 非常常用，简写语法：

<div :id="dynamicId"></div>

 <div :class="{'class1': use}">

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。

（3）、布尔型 Attribute

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮</button

（4）、类名和样式绑定

<!-- 类名绑定 -->
<div :class="{ active: isActive, 'text-danger': hasError }">
  动态类名
</div>

<!-- 样式绑定 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  动态样式
</div>

（5）、动态绑定多个值

如果有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

通过不带参数的 v-bind，可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 属性绑定示例</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
.wrapper {
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}
.active {
  border: 2px solid blue;
  color: white;
}
.large {
  font-size: 20px;
}
.centered {
  text-align: center;
}
</style>
</head>
<body>
<div id="app">
  <!-- 1. 基础绑定 -->
  <div v-bind="objectOfAttrs">
    基础属性绑定
  </div>

  <!-- 2. 动态修改属性 -->
  <div class="controls" style="margin: 20px 0;">
    <button @click="toggleTheme">切换主题</button>
    <button @click="toggleSize">切换大小</button>
    <button @click="addNewAttr">添加新属性</button>
  </div>

  <!-- 3. 组合绑定 -->
  <div 
    v-bind="objectOfAttrs"
    :class="additionalClasses"
  >
    组合属性绑定
  </div>

  <!-- 4. 显示当前属性值 -->
  <div style="margin-top: 20px;">
    <h3>当前属性值：</h3>
    <pre>{{ JSON.stringify(objectOfAttrs, null, 2) }}</pre>
  </div>

  <!-- 5. 自定义属性输入 -->
  <div style="margin-top: 20px;">
    <h3>添加新属性：</h3>
    <input v-model="newAttrKey" placeholder="属性名">
    <input v-model="newAttrValue" placeholder="属性值">
    <button @click="addCustomAttr">添加</button>
  </div>
</div>

<script>
const app = {
  data() {
    return {
      // 基础属性对象
      objectOfAttrs: {
        id: 'container',
        class: 'wrapper',
        style: 'background-color: #42b983',
        'data-custom': 'value'
      },
      // 是否使用暗色主题
      isDark: false,
      // 是否使用大号字体
      isLarge: false,
      // 新属性的输入值
      newAttrKey: '',
      newAttrValue: ''
    }
  },
  computed: {
    // 计算额外的类名
    additionalClasses() {
      return {
        'active': this.isDark,
        'large': this.isLarge,
        'centered': true
      }
    }
  },
  methods: {
    // 切换主题
    toggleTheme() {
      this.isDark = !this.isDark
      this.objectOfAttrs.style = this.isDark 
        ? 'background-color: #34495e; color: white'
        : 'background-color: #42b983'
    },
    // 切换大小
    toggleSize() {
      this.isLarge = !this.isLarge
    },
    // 添加新属性
    addNewAttr() {
      this.objectOfAttrs['data-timestamp'] = new Date().getTime()
    },
    // 添加自定义属性
    addCustomAttr() {
      if (this.newAttrKey && this.newAttrValue) {
        this.objectOfAttrs[this.newAttrKey] = this.newAttrValue
        this.newAttrKey = ''
        this.newAttrValue = ''
      }
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

输出结果：

(6)、使用 JavaScript 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

仅支持单一表达式

每个绑定仅支持单一表达式 ，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

下面的例子无效：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

4、调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 绑定表达式中的函数调用</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
.date-display {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.highlight {
  background-color: #e8f5e9;
}
.format-switch {
  margin: 10px 0;
}
time {
  display: inline-block;
  padding: 5px 10px;
}
time:hover {
  background-color: #f5f5f5;
}
</style>
</head>
<body>
<div id="app">
  <!-- 基础日期显示 -->
  <time 
    :title="toTitleDate(currentDate)" 
    :datetime="currentDate"
    class="date-display"
    :class="{ highlight: isHighlighted }"
    @click="toggleHighlight"
  >
    {{ formatDate(currentDate) }}
  </time>

  <!-- 格式切换 -->
  <div class="format-switch">
    <label>
      <input type="checkbox" v-model="useDetailedFormat">
      使用详细格式
    </label>
  </div>

  <!-- 多个日期展示 -->
  <div>
    <h3>日期列表：</h3>
    <time 
      v-for="date in dates" 
      :key="date"
      :title="toTitleDate(date)"
      :datetime="date"
      :style="getDateStyle(date)"
    >
      {{ formatDate(date) }}
    </time>
  </div>

  <!-- 日期计算 -->
  <div style="margin-top: 20px;">
    <button @click="addDays(1)">添加一天</button>
    <button @click="addDays(-1)">减少一天</button>
    <button @click="resetDate">重置日期</button>
  </div>

  <!-- 自定义格式输入 -->
  <div style="margin-top: 20px;">
    <input 
      v-model="customFormat" 
      placeholder="输入自定义格式"
      :title="getFormatExample()"
    >
  </div>
</div>

<script>
const app = {
  data() {
    return {
      currentDate: new Date().toISOString(),
      useDetailedFormat: false,
      isHighlighted: false,
      customFormat: 'YYYY-MM-DD',
      dates: [
        new Date().toISOString(),
        new Date(Date.now() - 86400000).toISOString(), // 昨天
        new Date(Date.now() + 86400000).toISOString()  // 明天
      ]
    }
  },
  methods: {
    // 格式化为标题日期
    toTitleDate(date) {
      const d = new Date(date)
      return d.toLocaleString('zh-CN', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    // 格式化显示日期
    formatDate(date) {
      const d = new Date(date)
      if (this.useDetailedFormat) {
        return this.toTitleDate(date)
      }
      return d.toLocaleDateString('zh-CN')
    },

    // 获取日期样式
    getDateStyle(date) {
      const d = new Date(date)
      const today = new Date()
      const isToday = d.toDateString() === today.toDateString()
      
      return {
        backgroundColor: isToday ? '#e3f2fd' : 'transparent',
        margin: '0 5px',
        borderRadius: '4px'
      }
    },

    // 切换高亮
    toggleHighlight() {
      this.isHighlighted = !this.isHighlighted
    },

    // 添加天数
    addDays(days) {
      const d = new Date(this.currentDate)
      d.setDate(d.getDate() + days)
      this.currentDate = d.toISOString()
    },

    // 重置日期
    resetDate() {
      this.currentDate = new Date().toISOString()
    },

    // 获取格式示例
    getFormatExample() {
      return `格式示例: ${this.formatDate(this.currentDate)}`
    }
  },
  watch: {
    // 监听自定义格式变化
    customFormat(newFormat) {
      console.log('Format changed:', newFormat)
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

输出效果：

Vue3 学习笔记（五）Vue3 模板语法详解

1、文本插值：最基础的开始

2、插入 HTML：v-html 指令

3 、绑定属性：让元素活起来

（1）、常规 v-bind 指令

（2）、简写

（3）、布尔型 Attribute

（4）、类名和样式绑定

（5）、动态绑定多个值

(6)、使用 JavaScript 表达式

仅支持单一表达式

4、调用函数

2、插入 HTML：`v-html` 指令

（1）、常规 `v-bind` 指令