Vue 3 + Ts 钩子函数(hooks)的用法,以<script setup lang=“ts“/>语法糖形式 #reactive #ref

这篇具有很好参考价值的文章主要介绍了Vue 3 + Ts 钩子函数(hooks)的用法,以<script setup lang=“ts“/>语法糖形式 #reactive #ref。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

reactive

<template>
  <div>
    <h2 @click="increment">{{ count }}</h2>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 使用reactive创建响应式数据
const state = reactive({
  count: 0
})

// 定义一个增加count的方法
const increment = () => {
  state.count++
}

// 在组件挂载后输出初始化信息
onMounted(() => {
  console.log('组件已挂载')
})

// 导出响应式数据和方法
export { state, increment }
</script>

<style>
/* 样式代码 */
</style>

在上述代码中,使用了reactive函数来创建一个响应式的state对象,其中包含一个count属性。还定义了一个increment方法,用于增加count的值。在组件挂载后,使用onMounted钩子函数输出了一个初始化信息。
最后,通过export关键字将state和increment导出,以便在模板中使用。

ref


<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<style scoped>
/* 样式代码 */
</style>

在这个例子中,使用了ref函数来创建一个响应式的变量count,并将其初始值设置为0。
然后,定义了一个increment函数,当按钮被点击时,会将count的值加1。
在模板中,展示了count的值,并提供了一个按钮来触发increment函数。文章来源地址https://www.toymoban.com/news/detail-821110.html

到了这里,关于Vue 3 + Ts 钩子函数(hooks)的用法,以<script setup lang=“ts“/>语法糖形式 #reactive #ref的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports

    当使用vue3+vite使用语法糖setup时,要注意写法. 第一种写法就是 script 标签里面配置 setup,另一种是:export default 类里配置 setup() 方法, 我们只需要使用一种方法即可,混用了就会报错了。 解决: 第一种 script setup import {ref} from \\\'vue\\\' import { Toast } from \\\'vant\\\'; import Index from \\\'../pag

    2023年04月08日
    浏览(47)
  • Vue3:组合式函数(引入外部ts文件,修改外部ts参数)

            在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用 有状态逻辑 的函数。更为复杂的业务逻辑可以使用store来处理         vue3中不在推荐使用mixins,在 Vue 2 中,mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留

    2024年02月15日
    浏览(50)
  • 【实战】用 Custom Hook + TS泛型实现 useArray

    完善自定义 Hook —— useArray ,使其能够完成 tryUseArray 组件中测试的功能: 入参:数组 返回值: value:最新状态的数组; add:添加元素; removeIndex:移除数组特定位置的元素; clear:清空数组; 相关文件代码: srcutilsindex.ts srctryUseArray.tsx srcApp.tsx 答 答 答 案 案 案 在 在

    2024年02月02日
    浏览(29)
  • 【实战】 TS 应用:JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(三)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月09日
    浏览(48)
  • vue3 script setup

    解决在使用vue 3 composition API(组合式API)时繁琐的问题,比如定义一个方法,模板需要使用该方法,就必须将方法返回,当组件中存在大量方法和属性时就很麻烦。 一、什么是script setup 二、script setup什么作用 1.自动注册子组件 2.属性和方法无需返回 3.支持props、emit、context scr

    2024年02月09日
    浏览(41)
  • 【实战】三、TS 应用:JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(三)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月11日
    浏览(55)
  • 测试框架pytest教程(6)钩子函数hook开发pytest插件

    pytest hook 函数也叫钩子函数,pytest 提供了大量的钩子函数,可以在用例的不同生命周期自动调用。 比如,在测试用例收集阶段,可利用 hook 函数修改测试用例名称的编码。 pytest的hook是基于Python的插件系统实现的,使用特定的命名规范和装饰器来定义钩子函数。你可以在py

    2024年02月12日
    浏览(37)
  • Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式,最后教给大家自己封装一个时间hooks,直接复用

    Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式 最后教给大家自己封装一个时间hooks,直接复用 1.没有封装,直接使用 假如我们现在其他地方还需要用到这个,那么我们可以把这个方法封装成一个hooks,用以复用 1.在src目录下,新建一个utils文件夹,定义一个

    2024年02月13日
    浏览(40)
  • TS—枚举Enum用法

    枚举用于定义数据集合,使用枚举可以定义一些带名字的常量,有普通枚举、字符串枚举和常量枚举等类型。 普通枚举:初始值默认为 0,其余的属性按顺序依次递增。 也可手动设置初始值(其余的属性依旧按顺序递增): 字符串枚举: 常量枚举:使用 const 修饰的枚举

    2024年02月16日
    浏览(39)
  • 第九章、Vue3中<script setup>语法糖

    摘要:script setup语法糖: https://cn.vuejs.org/api/sfc-script-setup.html 一、script setup语法糖用法 1.1 基本语法: 要使用这个语法,在script 中添加setup属性即可。 里面的代码最终会编译成setup()函数中的内容: 所以每次在组件实例被创建时,都会执行; 1.2 顶层绑定自动暴露给模板 当使用

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包