Vue模板语法详解与实践

# 1. 引言

### 1.1 什么是Vue模板语法？

Vue模板语法是一种基于HTML的语法扩展，用于描述Vue实例的视图。它允许开发者将数据动态地渲染到HTML模板中，从而实现动态的页面效果。

### 1.2 为什么要学习Vue模板语法？

学习Vue模板语法可以帮助开发者更好地理解和使用Vue.js框架。通过掌握Vue模板语法，开发者可以轻松地实现数据绑定、条件渲染、列表渲染等常见的页面操作。同时，Vue模板语法还支持一系列强大的特性，如过滤器、指令、计算属性等，可以使开发工作更加高效和灵活。

下面，我们将深入探讨Vue模板语法的基础和进阶用法，以及一些实践经验和优化技巧，希望能够帮助读者更好地运用Vue.js开发项目。

# 2. Vue模板语法基础

2.1 数据绑定
2.2 模板表达式
2.3 指令
2.3.1 v-if指令
2.3.2 v-for指令
2.3.3 v-bind指令
2.3.4 v-on指令
2.4 过滤器

# 3. Vue模板语法进阶

在这一章节中，我们将深入探讨Vue模板语法的进阶内容，包括计算属性、观察属性和组件通信。

#### 3.1 计算属性

计算属性是基于Vue实例的数据来动态计算得出的属性。它们在模板中使用与任何其他属性一样，但是它们是基于它们的依赖进行缓存的，并且只在相关依赖发生改变时它们才会重新求值。这带来了更高效的性能。

// 示例代码
<template>
  <div>
    <p>原始价格：{{ rawPrice }}</p>
    <p>折扣后价格：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawPrice: 100,
      discount: 0.8
    };
  },
  computed: {
    discountedPrice() {
      return this.rawPrice * this.discount;
    }
  }
};
</script>

**代码总结：** 上述示例中，我们使用了计算属性`discountedPrice`来动态计算折扣后的价格，这样可以保持模板的简洁性，而且只有在`rawPrice`或者`discount`发生变化时，`discountedPrice`才会重新计算，减少了不必要的重复计算。

**结果说明：** 当`rawPrice`或`discount`改变时，页面上的折扣后价格会自动更新。

#### 3.2 观察属性

除了计算属性，Vue还提供了观察属性，可以对数据的变化做出响应。

// 示例代码
<template>
  <div>
    <input v-model="message" placeholder="输入内容..." />
    <p>输入的内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('输入内容发生变化：', oldValue, ' => ', newValue);
    }
  }
};
</script>

**代码总结：** 上面的示例中，我们使用`watch`来监听`message`的变化，当输入内容发生变化时，会在控制台输出变化前后的内容。

**结果说明：** 当输入框中的内容发生变化时，会在控制台输出相应的提示信息。

#### 3.3 组件通信

组件通信是Vue中非常重要的一部分，它包括父子组件通信、兄弟组件通信以及跨级组件通信。

##### 3.3.1 父子组件通信

父子组件通信是最常见的组件通信方式，可以通过`props`向子组件传递数据，通过事件向父组件发送消息。

// 示例代码
// 父组件
<template>
  <div>
    <child-component :message="parentMessage" @notify="handleNotify" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleNotify(message) {
      console.log('Received message from child:', message);
    }
  }
};
</script>

// 子组件
<template>
  <button @click="notifyParent">向父组件发送消息</button>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from child');
    }
  }
};
</script>

**代码总结：** 在上面的示例中，父组件通过`props`向子组件传递数据，子组件通过`$emit`事件向父组件发送消息。

**结果说明：** 当点击子组件的按钮时，父组件会接收到来自子组件的消息并在控制台打印出来。

##### 3.3.2 兄弟组件通信

兄弟组件通信通常借助一个共享的父组件来传递数据。

// 示例代码
// 父组件
<template