setup: 是vue3中组合API的入口函数,将逻辑都写在这里面。
响应式数据:数据变化,页面跟着渲染变化。
ref: 是一个函数。作用:定义一个响应式数据,返回一个ref对象,若想操作数据,用ref里的value属性
return: 将所定义的方法属性暴露出来。

<template>
  <div id="nav">
      <h2>{{count}}</h2>
      <button @click="updateCount">更新数据</button>
  </div>

</template>

<script>
  import {defineComponent, ref} from "vue"
  export default defineComponent ({
    name: 'App',
    // vue3组合API
    setup() { // 组合API入口函数
        const count = ref(0)
        // console.log(count)
        // 方法
        function updateCount() {
            this.count++
        }
      return { // 把...暴露出来
        // let count = 0 //此时数据不是响应式数据(响应式数据:数据变化,页面跟着渲染变化)
        // ref是一个函数,作用:定义一个响应式数据,返回一个ref对象,对象中value属性,若需要兑数据进行操作,
        // 需要使用该ref对象调用value属性的方式进行数据的操作
          count,
          updateCount
      }

    }
  })
</script>
Logo

前往低代码交流专区

更多推荐