Vue 选项式api和组合式api 路由嵌套

news2024/11/13 9:42:36

        选项式api和组合式api是两种不同的语法习惯,<template>标签内还是该怎么写就怎么写,不一样的只是<script>里面的语法改变了。

         

目录

选项式api:

组合式api:

  1)省略各种关键字:

                   省略前:

                    省略后:

  2)声明响应式数据  ref()函数

  3)嵌套组件间参数传递

  4)变量解构赋值

  5)computed()函数

  6)生命周期函数

 路由嵌套:

        1) 在add2的路由中设置cildren属性。

        2)设置路由响应位置

        3)直接访问路由add3



选项式api:

import  {  }   from  '  '

export   default{             

        components:{   },      // 挂载import导入的组件对象

        data(){              },      //  定义对象及属性值

        methods(){       },      //   创建函数对象

        mounted(){       }      //  各种生命周期函数

}

<script>    //model
import HelloWorld from   '@/components/HelloWorld.vue'
import qs from "qs"

export default{
   components:{
   HelloWorld
   },
   data(){
    return{
        student:{
        name:"张三",
        age:5
        },
        url:"https://www.baidu.com",
        加粗内容:"<b>我不喜欢钱</b>",
        score:999
      }
   },
   methods:{
    show(){
      alert(JSON.stringify(this.student))
    }
   ,
   testPost(){
       this.$axios({
         url:"/demo",
        method:"post",
         data:qs.stringify({ //使用qs.stringify({}) 将json数据转换为普通的键值对表单数据,后端单元方法直接声明形参接收
                             //不使用qs.stringify({}) 直接发送请求体格式的请求数据,后端单元方法必须使用@RequestBody注解来接收
           name:'张三',
           age:20
         }) 
       }).then(res=>{console.log(res)})
      }
   }
}
</script>


组合式api:

1)省略各种关键字:

                使用组合式api,只需要在<script >添加关键字setup

                标签内部的关键字export   default  data  return  都可以省略不写

                并且import导入的资源无需手动挂载


                   省略前:


                省略后:



  2)声明响应式数据  ref()函数

                  const直接声明的name,age是常量,只能渲染一次。

                  而使用ref()和reactive()声明的变量值可以多次更改。

                  ref()  reactive()区别在于:

                        通常使用ref()声明变量

                        reactive()参数接收的必须是一个对象。用来处理对象嵌套对象时使用该函数。

                                



3)嵌套组件间参数传递

                在MyAdd3组件中嵌套一个MyAdd4组件,进行参数传递id4=123。

                在MyAdd4中使用 defineProps([   ])接收参数,直接使用



4)变量解构赋值

        使用toRef()函数进行解构。



5)computed()函数

        虽然能在<template>标签中直接进行三目运算符运算,但是为了提高效率,通常使用computed()函数事先储存运算结果,只有在检测到变量改变时才重新进行方法调用,该函数类似于生命周期函数。



6)生命周期函数

        和选项式api一样,不过方法名前多加了一个on。



 路由嵌套:

            有两个组件add2.vue,add3.vue.

            实现路由访问add3.vue界面,最终显示add2界面 嵌套了add3界面。

      1) 在add2的路由中设置cildren属性。

     2)设置路由响应位置

        3)直接访问路由add3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2092863.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Qt】菜单栏

目录 菜单栏 例子&#xff1a;创建菜单栏、菜单、菜单项 例子&#xff1a;给菜单设置快捷键 例子&#xff1a;给菜单项设置快捷键 例子&#xff1a;添加子菜单 例子&#xff1a;添加分隔线 例子&#xff1a;添加图标 菜单栏 Qt中的菜单栏是通过QMenuBar这个类实现的&…

LeetCode --- 412周赛

题目列表 3264. K 次乘运算后的最终数组 I 3266. K 次乘运算后的最终数组 II 3265. 统计近似相等数对 I 3267. 统计近似相等数对 II 一、K次乘预算后的最终数组 I & II I 数据范围比较小&#xff0c;可以暴力模拟&#xff0c;代码如下 class Solution { public:vecto…

Day52 | dijkstra(堆优化版)Bellman_ford 算法

dijkstra&#xff08;堆优化版&#xff09; 题目 47. 参加科学大会 47. 参加科学大会&#xff08;第六期模拟笔试&#xff09; 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。 小明的起点是第一个车站&a…

vscode 未定义标识符 “uint16_t“C/C++(20) 但是可以顺利编译

这是没有指定编译器的原因 解决方法&#xff1a; 打开 或c_cpp_properties.json&#xff0c;添加编译器

★ 算法OJ题 ★ 力扣611 - 有效三角形的个数

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;椎名日和将和大家一起做一道双指针算法题--有效三角形的个数~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 二 算法解析 给三个数&#xff0c;判断是否能构成三角形的条件&#xff1a;两个较小的数相加大于…

机器学习数学公式推导之高斯分布

文章目录 1、介绍引入1.1 频率派的观点1.2 贝叶斯派的观点1.3 小结 2、数学基础2.1 二阶中心矩2.2 样本方差2.3 高斯分布2.3.1 一维情况 MLE2.3.2 多维情况 本文参考 B站UP: shuhuai008 跳转 &#x1f339;&#x1f339; 1、介绍引入 在统计学和概率论中&#xff0c; P ( x ∣ …

史上最全的MybatisPlus学习教程从入门到精通

一、MybatisPlus是什么 1.1 MyBatis-Plus简介 MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;它在MyBatis的基础上进行了增强&#xff0c;但并没有改变原有的MyBatis框架。MyBatis-Plus的主要目标是简化开发和提高开发效率。它提供了诸如分…

源码阅读-SpirngBoot Mybatis 自动配置

MybatisPlusAutoConfiguration ObjectProvider#getIfAvailable ObjectProvider为我们提供了拓展&#xff0c;我们可以自定义一些插件或者类型转换器&#xff0c;同时也可以定义一些Customizer用来配置SqlSessionFactoryBean,MybatisPlusProperties等。 通过源码我们可以看到最…

Redis从入门到入门(上)

1.Redis概述 文章目录 1.Redis概述1.1 什么是Redis1.2 Redis的应用场景 2.Linux下Redis的安装与使用2.1 Redis下载2.2 Redis的启动2.3 Redis配置2.4 连接Redis 1.1 什么是Redis Redis是用C语言开发的一个开源的高性能键值对&#xff08;key-value&#xff09;数据库&#xff0…

数学建模--K-Means聚类分析

目录 1.聚类分析步骤 1.1简单介绍 1.2两个概念 1.3几种距离 1.4更新质心 1.5终止条件 2.归一化处理 3.肘部法则 4.搭建K-Means分析模型 5.选择最佳K值 6.绘制3D图形 1.聚类分析步骤 1.1简单介绍 K-Means聚类分析是属于聚类分析的一种&#xff0c;这个数据机器学习的…

YOLOv8改进 | Neck篇 | YOLOv8引入Slim-Neck(超轻量)

1. Slim-Neck介绍 摘要:目标检测是计算机视觉中重要的下游任务。 对于车载边缘计算平台来说,巨大的模型很难达到实时检测的要求。 而且,由大量深度可分离卷积层构建的轻量级模型无法达到足够的精度。 我们引入了一种新的轻量级卷积技术 GSConv,以减轻模型重量但保持准确性。…

《软件工程导论》(第6版)第4章 形式化说明技术 复习笔记

第4章 形式化说明技术 一、概述 按照形式化的程度&#xff0c;可以把软件工程使用的方法划分成非形式化、半形式化和形式化3类。用自然语言描述需求规格说明&#xff0c;是典型的非形式化方法。用数据流图或实体联系图建立模型&#xff0c;是典型的半形式化方法。所谓形式化…

idea的springboot里面的resources是什么

在IDEA&#xff08;IntelliJ IDEA&#xff09;中的Spring Boot项目中&#xff0c;resources目录扮演着非常重要的角色。这个目录主要用于存放项目的非代码资源&#xff0c;包括但不限于配置文件、静态资源文件&#xff08;如图片、CSS、JavaScript等&#xff09;、模板文件&…

YOLO缺陷检测学习笔记(2)

YOLO缺陷检测学习笔记&#xff08;2&#xff09; 残差连接1. **YOLO 的残差连接结构**2. **YOLO 使用残差连接的目的**3. **YOLO 中的残差块**4. **YOLOv3 和 YOLOv4 的残差连接架构** YOLO网络架构概述1. 特征提取网络2. 预测头&#xff08;Detection Head&#xff09;3. 后处…

Android CCodec Codec2 (五)C2Param - Ⅲ

这一节我们来看看简单参数的定义方式 1、C2SimpleValueStruct Codec2框架提供了模板类C2SimpleValueStruct来帮助我们定义非灵活数组的简单参数。C2SimpleValueStruct的定义如下&#xff1a; template<typename T> struct C2SimpleValueStruct {T value; ///< simpl…

阿里 “通义灵码” 真的 “灵吗”,全保姆级实操

最近很多朋友&#xff0c;都在关注阿里公测的“通义灵码”&#xff0c;我索性也安装了&#xff0c;准备看看它真的有说的那么“灵吗”&#xff1f; 一、安装 官网&#xff1a;https://tongyi.aliyun.com/lingma/ 安装方式&#xff1a;https://tongyi.aliyun.com/lingma/downl…

Redis 集群:引领企业级 NoSQL 数据库新潮流

一 、关系型数据库和 NoSQL 数据库 在当今的数据库领域&#xff0c;关系型数据库和非关系型数据库都占据着重要的地位。 关系型数据库 关系型数据库是建立在关系模型基础上的数据库&#xff0c;它通过表与表之间的关系来存储和管理数据。 特点 数据结构清晰&#xff1a;以二…

“微服务革命”之后...

曾几何时&#xff0c;我记得我的手指疯狂地敲打键盘&#xff0c;与庞大而杂乱的代码库搏斗。那是巨石的时代&#xff0c;代码就像古老的城堡一样&#xff0c;由一块块石头砌成一个令人印象深刻的庞然大物。 几年过去了&#xff0c;时代变了。开发人员口中的流行语变成了“微服…

基于STM32校车安全监控系统的设计(论文+源码+实物)

1 方案设计 根据设计要求&#xff0c;本设计校车安全监控系统的设计以STM32F103单片机作为主控制器&#xff0c;通过MQ传感器实现异常气体的检测&#xff0c;当异常气体浓度异常时会通过继电器打开车窗进行通风&#xff0c;以保证舒适的环境&#xff0c;通过红外传感器用于监…

EXO:StandardNode _process_tensor

目录 EXO:StandardNode _process_tensor EXO:StandardNode _process_tensor 这段代码是在处理某种分片(sharding)逻辑时使用的,特别是在处理大型模型或数据处理任务时,这些任务被分割成多个较小的部分(即分片)来并行处理。这里,代码片段关注于根据特定的调试级别(DEBU…