第6节:Vue3 调用函数

简介: 第6节:Vue3 调用函数

在Vue3中,你可以使用setup函数来调用函数。

<template>
  <button @click="handleClick">点击我</button>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    // 创建一个响应式的引用
    const count = ref(0);
    // 定义一个函数,当按钮被点击时,这个函数会被调用
    function handleClick() {
      count.value++; // 增加计数器的值
      console.log('按钮被点击了', count.value); // 打印日志
    }
    return {
      count, // 将计数器暴露给模板使用
      handleClick // 将函数暴露给模板使用
    };
  }
}
</script>

在这个例子中,我们首先导入了ref函数,然后在setup函数中创建了一个响应式的引用count。然后我们定义了一个函数handleClick,当按钮被点击时,这个函数会被调用,增加计数器的值并打印日志。最后,我们将counthandleClick返回,这样它们就可以在模板中使用了。

订阅专栏,每日更新

相关文章
|
9天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
28 2
|
9天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
19 2
|
9天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
32 1
|
9天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
19 1
|
9天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
17 1
|
10天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
19 1
|
9天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
48 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0