Vue模板字符串详解

发布时间：2023-05-22

Vue是一个流行的JavaScript框架，用于构建用户界面。Vue使用模板语法来描述应用程序的HTML结构，这个模板语法被称为Vue模板字符串。Vue模板字符串通常包含模板语法、数据绑定、指令和事件监听。

一、模板语法

Vue模板字符串使用特殊的语法来表示数据和逻辑。我们可以在Vue模板字符串中使用双大括号{{data}}来表示数据。

<div>
  <p>{{data}}</p>
</div>

在上面的代码中，我们使用了数据绑定以显示data的值。 另外，在Vue模板字符串中我们也可以使用JavaScript表达式。

<div>
  <p>{{ 1 + 2 + 3 }}</p>
</div>

上述代码输出6。

二、数据绑定

Vue模板字符串允许我们轻松地将组件的状态绑定到模板中。数据绑定的格式通常是一个双向绑定的变量或者表达式。当双向绑定的变量被更改时，模板立即更新。

<div>
  <p>{{ message }}</p>
  <input v-model="message">
</div>

在上面的代码中，我们使用了v-model指令来绑定message变量到input元素中。当input元素更改时，数据绑定的变量实时更新。

三、指令

Vue模板字符串中，指令以v-开头，用于将特定功能附加到DOM元素上。以下是一些常见的指令。

v-if 和 v-show

v-if 和 v-show两个指令都可以用于控制组件的渲染时机。v-if的问题在于每次条件变更时需要重新渲染 DOM，而 v-show 只是控制元素的显示与隐藏。

<div>
  <p v-if="isShow">{{ message }}</p>
  <p v-show="isShow">{{ message }}</p>
</div>

上述代码中，只有当isShow的值为true时，v-if指令才会渲染对应的元素，并在值为false时移除。而v-show则只是显示或隐藏元素。

v-for

v-for指令允许我们在渲染模板时遍历数组或对象。在每次迭代时，我们可以使用特殊变量$index来获取当前迭代的索引。

<ul>
  <li v-for="(item, index) in items">{{ index }}: {{ item }}</li>
</ul>

v-on

v-on指令用于注册事件监听器，通常配合一个方法使用。它可以监听DOM事件和自定义事件。常见的DOM事件有click、focus、blur、submit等。

<button v-on:click="doSomething">Click</button>

四、事件监听器

Vue模板字符串允许我们使用v-on指令来监听事件。在组件中，我们可以定义一个方法，然后将这个方法注册到一个事件处理程序中。

<button v-on:click="doSomething">Click me</button>
<script>
  new Vue({
    el: '#app',
    methods: {
      doSomething: function () {
        alert('done');
      }
    }
  });
</script>

五、计算属性和监听属性

Vue模板字符串允许我们使用计算属性和监听属性来对数据进行处理和观察。计算属性通常是基于数据属性而得出的一组新数据，而监听属性则用于在数据变化时执行特定逻辑。

计算属性

<div>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js'
    },
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

监听属性

<div>
  <p>{{ fullName }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName;
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val;
      }
    }
  });
</script>

六、总结

Vue模板字符串是Vue框架中非常重要的一部分，它是Vue应用程序中用户界面的核心部分。Vue模板字符串通过特殊的语法表达组件的状态和行为，并与数据、指令和事件处理程序配合使用，从而实现了强大的数据绑定和逻辑控制功能。

推荐文章