Vue3写法

ゞ浴缸里的玫瑰 2022-10-15 13:55 14阅读 0赞

### Vue3写法  https://www.jianshu.com/p/b9f8c23e2ebb ###

一个data、一个methods

<template>
      <div>
        <p>{
       {id}}--{
       {name}}--{
       {num}}</p>
        <button @click="change1">点击</button>
      </div>
    </template>
    <script>
    import { reactive ,toRefs,computed,onMounted,onUnmounted} from 'vue'
    export default {
      name: "component_name",
      setup() {
        // reactive 数据双向绑定
        const data = reactive({
          id:1,
          name:'',
          num:computed(()=>state.id+=5) //计算属性
        })
        onMounted(()=>{
          methods.fn1();//自动调用方法
        })
        // 方法
        const methods = {
          change1(){
     
          },
          fn2(){
     
          }
        }
        const test = ()=>{
            console.log('方法测试')
        }
        //页面加载完成
        onMounted(() => {
          
        })
        //销毁
        onUnmounted(() => {
          
        })
        return {
          // toRefs转换为响应式数据
          ...toRefs(data),
          ...methods,
          test
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 动态样式写法

在Vue中，可以使用动态样式来根据组件的数据或计算属性来动态地设置元素的样式。Vue提供了多种方式来实现动态样式的写法，以下是几种常见的方法：使用:style指令：可以

喜欢ヅ旅行/ 2024年03月24日 19:20/ 0 赞/ 108 阅读

相关 vue脚手架的写法

在 Vue.js 中，可以使用 Vue CLI（脚手架）来创建和管理 Vue 项目。以下是使用 Vue CLI 4.x 版本创建 Vue 项目的步骤：确保你已经安装了 No

布满荆棘的人生/ 2024年03月17日 22:13/ 0 赞/ 70 阅读

相关 vue常用组件通信方式及vue2和vue3写法对比

vue常用组件通信方式及vue2和vue3写法对比 1. 父子组件通信 1.1 props/$emit vue2写法

- 日理万妓/ 2023年10月11日 22:01/ 0 赞/ 20 阅读

相关 vue-property-decorator vue typescript写法

什么是Typescript TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。作

偏执的太偏执、/ 2023年06月21日 07:16/ 0 赞/ 136 阅读

相关 Vue3 生命周期函数的新写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

柔光的暖阳◎/ 2023年01月22日 12:50/ 0 赞/ 6 阅读

相关 vue计算属性写法2

<template> <div> <h2>\{ \{ msg \}\}</h2> <p>新闻ID：\{ \{ $route.params.newsId\}\}</p>

川长思鸟来/ 2022年10月31日 00:45/ 0 赞/ 115 阅读

相关 Vue组件分离写法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

落日映苍穹つ/ 2022年10月29日 06:28/ 0 赞/ 261 阅读

相关 Vue3写法

Vue3写法 https://www.jianshu.com/p/b9f8c23e2ebb 一个data、一个methods <template>

ゞ浴缸里的玫瑰/ 2022年10月15日 13:55/ 0 赞/ 15 阅读

相关 vue的两种写法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

旧城等待，/ 2022年09月10日 12:11/ 0 赞/ 271 阅读

相关 Vue Router升级版写法

router/index.js import Index from '../pages/Index' import Mine from '../pages

「爱情、让人受尽委屈。」/ 2022年02月26日 06:16/ 0 赞/ 307 阅读