首页 > 其他分享 >vue3一种page结构

vue3一种page结构

时间:2024-08-20 15:27:49浏览次数:11  
标签:do name 示例 watch let vue3 page 结构

<template>
    <view>

    </view>
</template>

<script setup>
    // 引入生命周期,
    import {onLoad,onReady,onShareAppMessage,onShow} from "@dcloudio/uni-app";
    // 引入计算属性
    import {computed,watch,getCurrentInstance,ref} from "vue";

    let { proxy } = getCurrentInstance(); // onl oad执行登录校验
    
    // 变量示例
    let name = ref('默认值');
    // 使用 console.log(name.value)
    // 重新赋值 name.value = '我是新的值'

    // 计算属性
    let nameC = computed(() => {
        let style = "name"
        // do something
        // 当这个方法内的所有用到的值发生改变时 都会重新执行并计算
        return style;
    })
    //  假设监听 一个 name 变量
    watch(name, (newValue, oldValue) => {
        // do something 
        // 这里就是当 name 属性值发生变化时 ,就会执行此方法
    })
    // 如果需要监听多个变量,且要做的事情是一样的 那么我们只需要把第一个参数变为数组即可
    watch([name, name2], (newValue, oldValue) => {
        // do something 
        // 这里就是当 name或者name2 值发生变化时 ,就会执行此方法
    })

    // 方法示例,获取当前页面栈
    let action = (id) => {
        console.log('我是一个方法')
        // vue3
        // 获取当前页面栈
        // const self = getCurrentPages()?.[0]
        // self.$http()
    }

    // 生命周期示例
    // onl oad示例
    onl oad(async(e) => {
        await proxy.$onLaunched;
    })
</script>

<style>

</style>

 

标签:do,name,示例,watch,let,vue3,page,结构
From: https://www.cnblogs.com/xqxacm/p/18369516

相关文章

  • Python学习日记(Page.3)
    今日整理方便日后回顾。如有错误欢迎指正。  今天总结一下字符串扩展的内容。第一部分字符串的三种定义方式 单引号name='黑马'   2.双引号name="黑马"   3.三引号name="""黑马"""注:单引号可包含双引号,但不能包含单引号双引号可包含单......
  • JAVA的数据结构
    JAVA数据结构一、数组(Arrays)可以存储固定大小的相同类型的元素。int[]array=newint[5];优点:随机访问元素效率高缺点:大小固定,插入和删除元素相对较慢二、列表(Lists)1、ArrayListList<String>arrayList=newArrayList<>();特点:动态数组,可变大小优点:高效的随机访......
  • 创建uni-app项目(vue3+ts+vite)
     npxdegitdcloudio/uni-preset-vue#vite-tsm-uni-demo1跳转到对应目录,装包,运行cdm-uni-demo1yarnyarndev:h5tsconfig.json:{"extends":"@vue/tsconfig/tsconfig.json","compilerOptions":{"ignoreDeprecations&quo......
  • 【NOI】C++数据结构入门之一维数组(二)数组找数
    文章目录前言一、概念1.导入2.数组找数二、例题讲解问题类型——查找特定值问题:1154.数组元素的查找问题:1815.最后一次出现该数的位置问题类型——查找最值问题:1152.求n个数的最大值和最小值问题:1168.歌唱比赛评分问题类型——统计出现次数问题:1810.最贵商品和最......
  • C#不完全折腾:结构体,值类型,引用类型,泛型
    1.背景需要创建多个不同结构的结构体,依据输入的int数来选择并返回确定且唯一的结构体实例,并且实现把结构实例映射成一个字典(键值对)格式用来输出到richtextbox.2.结构体的初始化一个最基本的结构体格式如下://rwdim0publicstructrwdim0{publicushortblocktype......
  • 数据结构之 红黑树入门教程、红黑树代码示例
    红黑树(Red-BlackTree)是一种自平衡的二叉查找树(BST),它在插入、删除和查找操作后通过一些特定的规则来维护树的平衡,从而确保这些操作的时间复杂度始终为O(logn)。红黑树主要应用在需要高效动态集合操作的场景中,如操作系统中的进程调度器、数据库中的索引等。红黑树的基本性......
  • 数据结构详细教程绪论
    ......
  • 学习vue3——分页(前、后端分页两种)
    一、前端分页 后端将所有数据给前端,前端来实现分页1<template>2<divclass="flexitems-centerjustify-centermt-5">3<el-pagination4background5v-model:current-page="currentPage1"6......
  • 数据结构day01(数据结构、算法基础知识)
    目录【1】数据结构基础知识1》什么是数据结构2》数据 3》逻辑结构1>线性关系2>层次关系3>网状关系4》存储结构  1>顺序存储 2>链式存储3>索引存储结构 4>散列存储 5》操作【2】算法基础知识1>什么是算法 2>算法设计 3>算法的特性 4>评价算法的......
  • vue3 响应式 API:computed()
    介绍基本概念:computed()接收一个getter函数或者一个包含getter和setter函数的对象作为参数,并返回一个基于原始响应式数据计算得到的新的响应式数据对象。计算属性的值会根据其依赖的响应式数据自动更新,当依赖的数据发生变化时,计算属性的值也会自动重新计算。返......