Vue.js 模板语法学习笔记

插值

在 Vue.js 的模板语法中，我们可以使用双大括号来进行文本插值。

htmlCopy Code
<p>{{message}}</p>

其中的 message 属性会被渲染到这个 <p> 元素中。

除了使用双大括号进行插值，我们还可以使用 v-bind 指令来进行属性绑定。

htmlCopy Code
<img v-bind:src="imageSrc">

在上面的例子中，imageSrc 变量的值会被绑定到 src 属性上，从而实现了图片的动态加载。

指令

除了插值，Vue.js 还提供了丰富的指令来控制文档的行为。

v-if

v-if 指令可以根据条件来判断是否渲染某个元素。例如：

htmlCopy Code
<div v-if="seen">这里是一个元素</div>

当 seen 变量为真时，该元素会被渲染出来。

v-for

v-for 指令可以用来循环渲染元素。例如：

htmlCopy Code
<ul>
  <li v-for="item in items">{{item}}</li>
</ul>

在上面的例子中，items 数组中的每个元素都会被循环渲染成一个 <li> 元素。

v-on

v-on 指令可以用来监听事件。例如：

htmlCopy Code
<button v-on:click="doSomething">点击我</button>

在上面的例子中，当用户点击该按钮时，doSomething 方法会被调用。

计算属性

Vue.js 还提供了计算属性，用来根据已有的数据动态计算出新的值。例如：

htmlCopy Code
<div>{{fullName}}</div>

javascriptCopy Code
data: {
  firstName: 'John',
  lastName: 'Doe'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
}

在上面的例子中，fullName 计算属性通过拼接 firstName 和 lastName 的值来计算出新的字符串，从而渲染到页面上。

实例

htmlCopy Code
<template>
  <div>
    <h1>{{title}}</h1>
    <ul>
      <li v-for="item in items">
        {{item}}
      </li>
    </ul>
    <input v-model="inputValue">
    <button v-on:click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '我的待办事项',
      items: ['第一件事', '第二件事', '第三件事'],
      inputValue: ''
    };
  },
  methods: {
    addItem() {
      if (this.inputValue) {
        this.items.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
};
</script>

在上面的例子中，我们展示了一个待办事项列表，并提供了添加新事项的功能。使用 v-for 指令循环渲染数组中的每个元素，并使用 v-model 指令双向绑定输入框的值。当用户点击添加按钮时，调用 addItem 方法将输入框中的值添加到数组中，并清空输入框。