学习Vue3（二）

属性的绑定

在上一篇中，我们使用 {{}} 将数据和Html标签值进行了绑定。

<h1>{{ message }}</h1>

对于标签Html中的属性，我们使用一个叫做指令（directive）的概念将数据和Html属性进行绑定。
我们需要使用一个叫做 v-bind 的指令来绑定:

 <h1 v-bind:class="titleClass">{{ message.split('').reverse().join('') }}</h1>

这里我们将h1标签的class属性和数据“titleClass”进行了绑定。全部代码如下，

<script>
 export default {
  data() {
    return {
      message: 'Hello World!',
      titleClass: 'title'
    }
  }
 }
</script>

<template>
  <h1>{{ message }}</h1>
  
  <h1 v-bind:class="titleClass">{{ message.split('').reverse().join('') }}</h1>
</template>

<style>
  .title {
    color: red;
  }

</style>

运行后我们可以发现，反转的字符串变成了红色

图片.png

这里同时介绍一个简略的写法，因为v-bing这个指令非常常用，因此Vue提供了一个简略的写法：

<h1 :class="titleClass">{{ message.split('').reverse().join('') }}</h1>

事件监听

Vue还提供了另一个指令 v-on 用来监听事件，这里将click事件绑定到了函数 increment 上。

<button v-on:click="increment">count is: {{ count }}</button>

在Vue的methods中定义 increment 函数：

<script>
 export default {
  data() {
    return {
      message: 'Hello World!',
      titleClass: 'title',
      count: 0
    }
  },
  methods: {
    increment () {
      this.count ++;
    }
  }
 }
</script>

运行后可以发现count按钮可以计数：

图片.png

因为v-on也比较常用，因此Vue也提供了一个简介的写法

<button @click="increment">{{ count }}</button>