编辑“︁Vue.js模板语法”︁（章节）

= Vue.js模板语法 =

Vue.js的模板语法是一种基于HTML的扩展语法，允许开发者以声明式的方式将数据绑定到DOM（文档对象模型）。Vue.js的模板语法设计简洁且直观，使开发者能够轻松构建动态用户界面。

== 介绍 ==

Vue.js的模板语法是Vue.js的核心特性之一，它允许开发者通过简单的HTML标记扩展来动态渲染数据。Vue.js的模板语法主要包括以下几种形式：
* **插值**：使用双大括号`{{ }}`将数据绑定到文本内容。
* **指令**：以`v-`为前缀的特殊属性，用于动态绑定属性或执行逻辑。
* **过滤器**（Vue 2.x支持）：用于格式化文本显示。
* **计算属性与方法**：在模板中调用方法或计算属性。

Vue.js的模板语法是响应式的，当数据发生变化时，视图会自动更新。

== 插值 ==

插值是Vue.js模板语法中最基础的部分，用于将数据绑定到文本内容。

=== 文本插值 ===
最简单的插值形式是使用双大括号`{{ }}`包裹变量名：

<syntaxhighlight lang="html">
<div id="app">
  {{ message }}
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});
</syntaxhighlight>

输出：
<pre>
Hello, Vue.js!
</pre>

=== 原始HTML插值 ===
如果数据包含HTML标签，可以使用`v-html`指令渲染原始HTML：

<syntaxhighlight lang="html">
<div id="app" v-html="rawHtml"></div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red;">This is red text.</span>'
  }
});
</syntaxhighlight>

输出：
<span style="color: red;">This is red text.</span>

== 指令 ==

指令是带有`v-`前缀的特殊属性，用于动态绑定或执行逻辑。

=== `v-bind` 绑定属性 ===
`v-bind`用于动态绑定HTML属性：

<syntaxhighlight lang="html">
<div id="app">
  <a v-bind:href="url">Visit Vue.js</a>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org'
  }
});
</syntaxhighlight>

输出：
<a href="https://vuejs.org">Visit Vue.js</a>

`v-bind`可以简写为`:`：

<syntaxhighlight lang="html">
<a :href="url">Visit Vue.js</a>
</syntaxhighlight>

=== `v-on` 事件绑定 ===
`v-on`用于监听DOM事件：

<syntaxhighlight lang="html">
<div id="app">
  <button v-on:click="sayHello">Click me</button>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue.js!');
    }
  }
});
</syntaxhighlight>

`v-on`可以简写为`@`：

<syntaxhighlight lang="html">
<button @click="sayHello">Click me</button>
</syntaxhighlight>

=== `v-model` 双向数据绑定 ===
`v-model`用于在表单元素上实现双向数据绑定：

<syntaxhighlight lang="html">
<div id="app">
  <input v-model="message" placeholder="Type something">
  <p>You typed: {{ message }}</p>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</syntaxhighlight>

当用户在输入框中输入内容时，`message`会实时更新，并显示在`<p>`标签中。

== 条件渲染 ==

Vue.js提供`v-if`、`v-else`和`v-show`指令来控制元素的显示与隐藏。

=== `v-if` 和 `v-else` ===
<syntaxhighlight lang="html">
<div id="app">
  <p v-if="showMessage">This is shown if showMessage is true.</p>
  <p v-else>This is shown otherwise.</p>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    showMessage: true
  }
});
</syntaxhighlight>

=== `v-show` ===
`v-show`与`v-if`类似，但`v-show`仅切换CSS的`display`属性，而`v-if`会完全移除DOM元素：

<syntaxhighlight lang="html">
<div id="app">
  <p v-show="isVisible">This is visible.</p>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});
</syntaxhighlight>

== 列表渲染 ==

`v-for`指令用于渲染列表数据：

<syntaxhighlight lang="html">
<div id="app">
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ]
  }
});
</syntaxhighlight>

输出：
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

== 计算属性和方法 ==

Vue.js允许在模板中调用计算属性或方法，以动态计算值。

=== 计算属性 ===
计算属性基于依赖的响应式数据缓存结果：

<syntaxhighlight lang="html">
<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Reversed message: "{{ reversedMessage }}"</p>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});
</syntaxhighlight>

输出：
<pre>
Original message: "Hello"
Reversed message: "olleH"
</pre>

=== 方法调用 ===
方法可以在模板中直接调用：

<syntaxhighlight lang="html">
<div id="app">
  <p>Reversed message: "{{ reverseMessage() }}"</p>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});
</syntaxhighlight>

== 实际案例 ==

以下是一个简单的待办事项列表应用，展示Vue.js模板语法的实际应用：

<syntaxhighlight lang="html">
<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task">
  <ul>
    <li v-for="(todo, index) in todos">
      {{ todo.text }}
      <button @click="removeTodo(index)">×</button>
    </li>
  </ul>
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Learn Vue.js' },
      { text: 'Build a project' }
    ]
  },
  methods: {
    addTodo: function() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo });
        this.newTodo = '';
      }
    },
    removeTodo: function(index) {
      this.todos.splice(index, 1);
    }
  }
});
</syntaxhighlight>

== 总结 ==

Vue.js的模板语法提供了一种简洁而强大的方式来构建动态用户界面。通过插值、指令、条件渲染和列表渲染，开发者可以轻松实现数据绑定和DOM操作。计算属性和方法进一步增强了模板的动态性，使代码更易于维护和扩展。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]