一文带你搞懂Vue3的基本语法

Vue.js是一款流行的前端JavaScript框架，Vue.js 3是Vue.js框架的最新版本，其基本语法与Vue.js 2有许多不同之处。

创建Vue应用程序

要创建一个Vue应用程序，您需要创建一个Vue实例。您可以使用Vue.createApp()方法来创建Vue实例。以下是一个基本的Vue应用程序示例：

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue.js 3!'
      }
    }
  })

  app.mount('#app')
</script>

在上面的示例中，我们创建了一个Vue应用程序，并将其绑定到了id为“app”的<div>元素。Vue实例使用了一个名为message的数据属性，在<div>元素中通过双重花括号插值语法({{}})进行了渲染。

模板语法

Vue.js 3仍然使用和Vue.js 2相同的模板语法，可以使用指令(v-if、v-for、v-bind、v-on等)和双花括号插值语法。

双花括号插值语法

双花括号插值语法允许您将数据绑定到Vue模板中。在Vue.js 3中，您可以在插值表达式中使用JavaScript表达式，如下所示：

<div id="app">
  {{ message.toUpperCase() }}
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue.js 3!'
      }
    }
  })

  app.mount('#app')
</script>

在上面的示例中，我们使用JavaScript表达式message.toUpperCase()将message的值转换为大写字母。

指令

指令是Vue.js模板语法的核心，用于将应用程序状态绑定到DOM元素。

以下是几个常用的指令：

v-if：用于根据表达式的值条件性地渲染元素。
v-for：用于渲染列表中的元素。
v-bind：用于绑定属性。
v-on：用于绑定事件监听器。

下面是一个使用v-for指令来迭代数组的示例：

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        items: ['Item 1', 'Item 2', 'Item 3']
      }
    }
  })

  app.mount('#app')
</script>

在上面的示例中，我们使用v-for指令来迭代items数组，将每个数组元素渲染为<li>元素。:key绑定用于给Vue一个提示，以便它能够跟踪渲染期间的每个元素，以便进行有效的重绘。

计算属性和监听器

计算属性允许您基于其他数据属性来计算新值。使用计算属性可以更好地组织代码并提高性能。以下是使用计算属性的简单示例：

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    },
    computed: {
      fullName() {
        return `${this.firstName} ${this.lastName}`
      }
    }
  })

  app.mount('#app')
</script>

在上面的示例中，我们使用计算属性将firstName和lastName的值组合成一个完整的名字，并在模板中通过双花括号插值语法渲染。

监听器用于在数据属性发生改变时执行特定的操作。以下是使用监听器的简单示例：

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  })

  app.mount('#app')
</script>

在上面的示例中，我们使用@click指令将increment()方法绑定到<button>元素的点击事件上。每次点击该按钮时，都会更新count的值，并在模板中重新渲染该值。