模板中的指令与表达式的基础用法

在Vue 3中，模板语法提供了强大的指令和表达式功能，可以帮助我们在页面中进行动态渲染和交互。通过掌握这些基本的用法，可以更好地构建Vue应用。

1. 模板指令（Directives）

Vue中的模板指令是带有前缀“v-”的特殊属性，它们用来对DOM元素进行特殊的操作。

1.1 `v-bind`

v-bind指令用于动态绑定一个或多个属性到元素上。例如，我们可以用它来动态绑定元素的href属性，或者绑定图片的src。

示例：

<template>
  <div>
    <a v-bind:href="url">点击访问</a>
    <img v-bind:src="imageSrc" alt="图片"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com',
      imageSrc: 'https://www.example.com/image.jpg'
    };
  }
};
</script>

代码解释：

使用v-bind动态绑定href和src，根据数据的变化，链接地址和图片地址也会自动更新。

1.2 `v-model`

v-model是用于创建双向数据绑定的指令。它通常用于表单输入元素，如input、textarea和select等。

示例：

<template>
  <div>
    <input v-model="message" placeholder="请输入内容" />
    <p>你输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

代码解释：

v-model绑定input元素的值，并且可以双向更新数据。当输入框的内容变化时，message数据也会更新，反之亦然。

1.3 `v-if` 和 `v-else`

v-if指令用于根据条件渲染一个元素。如果条件为true，则渲染该元素；否则，不渲染。v-else是v-if的补充，用来指定条件为false时显示的元素。

示例：

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来！</p>
    <p v-else>请登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

代码解释：

当isLoggedIn为true时，显示“欢迎回来！”；如果isLoggedIn为false，则显示“请登录”。

1.4 `v-for`

v-for指令用于在DOM中渲染一个列表。可以用它来遍历数组或对象，并动态创建元素。

示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  }
};
</script>

代码解释：

使用v-for遍历items数组，并生成一个li元素列表。每个li的内容是item.name。

2. 表达式

Vue的模板中可以直接使用JavaScript表达式。表达式的返回值会动态更新并展示到页面上。

2.1 插值表达式

插值表达式用于插入数据到HTML中，基本形式是使用{{ }}括起来的JavaScript表达式。

示例：

<template>
  <div>
    <p>当前时间：{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleString()
    };
  }
};
</script>

代码解释：

{{ currentTime }}插值表达式会将currentTime的值渲染到页面上。当数据变化时，页面会自动更新。

2.2 计算属性

计算属性是基于它们的依赖进行缓存的，只有相关依赖发生变化时，才会重新计算。

示例：

<template>
  <div>
    <p>全名：{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

代码解释：

fullName是一个计算属性，它依赖于firstName和lastName，并返回它们的组合。当firstName或lastName改变时，fullName会自动更新。

2.3 方法调用

在模板中也可以调用组件中的方法，返回值将会渲染到页面上。

示例：

<template>
  <div>
    <button @click="changeMessage">点击我改变消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好，Vue！'
    };
  },
  methods: {
    changeMessage() {
      this.message = '消息已改变';
    }
  }
};
</script>

代码解释：