20231114歌谣v3--学习篇-组件基础1

最新推荐文章于 2024-09-14 21:53:48 发布

前端歌谣

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量321

点赞数 11

文章标签：学习 vue.js 前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/134396856

版权

前端学习-2023 专栏收录该内容

4420 篇文章 3 订阅

订阅专栏

本文介绍了在Vue中使用`ref`和`setup`函数来管理组件状态，展示了如何在模板中实现点击按钮后计数器的递增，展示了Vue的响应式特性。

摘要由CSDN通过智能技术生成

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // 也可以针对一个 DOM 内联模板：
  // template: '#my-template-element'
}