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模板语法中最基础的部分，用于将数据绑定到文本内容。

文本插值

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

<div id="app">
  {{ message }}
</div>

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

输出：

Hello, Vue.js!

原始HTML插值

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

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

对应的JavaScript代码：

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

输出： This is red text.

指令

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

`v-bind` 绑定属性

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org'
  }
});

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

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

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

`v-on` 事件绑定

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue.js!');
    }
  }
});

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

<button @click="sayHello">Click me</button>

`v-model` 双向数据绑定

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

当用户在输入框中输入内容时，`message`会实时更新，并显示在`

`标签中。

条件渲染

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

`v-if` 和 `v-else`

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    showMessage: true
  }
});

`v-show`

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

列表渲染

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ]
  }
});

输出：

• Item 1
• Item 2
• Item 3

计算属性和方法

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

计算属性

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

输出：

Original message: "Hello"
Reversed message: "olleH"

方法调用

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

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

对应的JavaScript代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

实际案例

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

<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>

对应的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);
    }
  }
});

总结

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