vue学习笔记 七、方法的定义和使用

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、样例效果图：

 

分别点击10和20后 浏览器控制台输出上图中红色内容。

二、项目结构截图

 

三、代码

 

<template>
    <div @click="cliceknum">
         {{num}}
    </div>
    //带参数的方法
    <div  @click="cliceknum1(99)">
         {{num1}}
    </div>
     
</template>

<script>
 
import {defineComponent,ref} from 'vue'

export default defineComponent({
    //组件名称
    name:'Home',
    //接收父组建的数据
    props:{
        
    },
    //定义子组件
    components:{
         
    },
    setup(props,ctx){
        let num1 = ref(20)
        let num = ref(10)
         

        let cliceknum =() =>{
            console.log('点击了num')
        }
        let cliceknum1 =(val) =>{
            console.log(val)
            console.log('点击了num1')
        }

        return{
            num,
            num1,
            cliceknum,
            cliceknum1 
        }
    }
})
    
    
</script>

<style scoped lang="scss">
</style>