跳到主要内容

第3章：Vue 实例与模板语法

3.1 创建 Vue 实例​

在 Vue 中，一个 Vue 实例是最基本的组件单元，它通过 new Vue 创建。一个完整的 Vue 实例通常包含以下配置：

3.1.1 基本语法​

const vm = new Vue({
  el: '#app',               // 指定要挂载的 DOM 元素
  data: {                   // 存储 Vue 实例的数据
    message: 'Hello Vue!'
  }
});

3.1.2 实例的作用域​

  • el：指定 Vue 实例挂载到哪个 DOM 元素。
  • data：存储数据，Vue 会自动将其转换为响应式数据。

3.2 数据绑定​

Vue 提供了多种数据绑定方式，包括插值和 v-bind。

3.2.1 插值（Interpolation）​

插值是最简单的数据绑定方式，通过双花括号 {{}} 实现。

示例​

<div id="app">
  <p>{{ message }}</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
});

动态效果：当 message 的值发生变化时，页面会自动更新。

3.2.2 v-bind​

v-bind 是一个指令，用于绑定 HTML 属性和 Vue 实例的数据。

示例​

<div id="app">
  <img v-bind:src="imageSrc" alt="Vue">
</div>
const vm = new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://vuejs.org/logo.png'
  }
});

动态效果：当 imageSrc 的值发生变化时，图片会自动更新。

3.3 模板语法​

模板语法是 Vue 中用于操作 DOM 的核心语法，包含指令和表达式。

3.3.1 指令​

指令是以 v- 开头的特殊 HTML 属性，用于绑定 Vue 实例的行为。

常见指令​

  1. v-text：设置元素的文本内容。
  2. v-html：设置元素的 HTML 内容。
  3. v-bind：动态绑定属性。
  4. v-model：双向绑定表单元素的数据（第八章详细讲解）。

示例​

<div id="app">
  <p v-text="message"></p>
  <div v-html="<strong>{{ message }}</strong>"></div>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

3.3.2 表达式​

在模板中，可以使用任何 JavaScript 表达式，如变量、运算、过滤器等。

示例​

<div id="app">
  <p>{{ message.length }}</p>
  <p>{{ message.toUpperCase() }}</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

3.3.3 过滤器​

Vue 过滤器是用于处理数据的特殊函数，常用于数据格式化。

示例​

<div id="app">
  <p>{{ message | upper }}</p>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    upper(value) {
      return value.toUpperCase();
    }
  }
});

3.4 小结​

  • Vue 实例是 Vue 应用的核心，通过 new Vue 创建。
  • 数据绑定通过插值 {{}} 或 v-bind 实现，能够动态更新 DOM。
  • 模板语法中的指令和表达式，提供了丰富的数据展示方式。

本章主要介绍了 Vue 的基本数据绑定方式和模板语法，下一章我们将讲解组件系统，了解如何通过组件化开发提升应用的可维护性。

← 上一章：Vue 基础概念与初始化 | 下一章：组件系统 →

最后于 更新