Vue快速入门第一天：Vue简介

在正式学习vue之前，先通过这个小案例，初步了解它的两个核心功能——组件化和数据响应性。

图1

比如购物车中的数量板块，就可以轻松的改造成一个Vue组件。

第一步：引入Vue

在Vue官方文档中的快速上手菜单中，找到Vue的CDN<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>，引入到案例中。

第二步：声明变量

<script>

  const { createApp, ref } = Vue

  createApp({

    setup() {

    // JavaScript代码

    }

  })

</script>

目前暂时不要动脑子去思考这段代码，就理解为这是默认写法，看完整套视频自然就懂了。

接着在setup中声明一个变量count并返回

    setup() {

      const count= ref(0)

      return {

        count

      }

    }

最后用.mount方法将这个变量跟ID名为app的元素联系起来。

<script>

  const { createApp, ref } = Vue

  createApp({

    setup() {

      const count= ref(0)

      return {

        count

      }

    }

  }).mount('#app')

</script>

第三步：给购物车数量板块的DIV加一个id="app"，让它们双向奔赴。count变量就可以使用了。看下效果。

<button @click="count--"></button>

count

<button @click="count++-"></button>

这就是数据的响应性。