Vue入门项目——WebApi

Vue入门——WebApi

    • vue3项目搭建
    • 组合式API
      • 响应式API
        • reactive()
        • ref()
      • 生命周期钩子
      • computed计算属性函数
      • watch监听函数
      • 父子通信
      • 模板引用
      • 组合选项

vue3项目搭建

简单看下Vue3的优势吧
vue3优势
下载安装npm及node.js16.0以上版本（确保安装成功可用如下代码检查版本）

npm -v
node -v

确保版本安装正确
下一步创建vue3项目，输入项目名字后并进行选择插件（可以直接回车全部no）

npm init vue@latest

然后找到项目用vsCode打开，并进行初始化

npm install

初始化完成后，把项目跑起来，可点击链接进行查看，看到如下画面就完成咯

npm run dev

在这里插入图片描述

组合式API

响应式API

语法糖

reactive()

接收一个普通对象然后返回该普通对象的响应式代理（众所周知括号里的内容一般才是最重要的，没错，reactive只能封装对象类型的参数）
🍊个🌰：

<script setup>
//1、导入函数
import { reactive } from 'vue';
//2、执行函数，传入一个对象类型参数，用变量接收
const state = reactive({
  count: 0 //参数是常规对象，不会引起视图更新
})
//使用reactive函数包装后，会变成响应式对象
const addCount = () => {
  state.count++
}

const state2 = {
  count2: 0 //参数是常规对象，不会引起视图更新
}
const addCount2 = () => {
  state2.count2++
}
</script>
<template>
  <div>
    <button @click="addCount" id="btn1">{{ state.count }}</button> 
    <!--这个按钮中的参数被reactive包裹，会被视图响应-->
    <button @click="addCount2" id="btn2">{{state2.count2}}</button>
    <!--这个参数没有被包裹不会响应-->
    <!--但是会累积点击，在下一次点击第一个按钮时会被响应，一次性累计添加-->
  </div>
</template>

ref()

接受一个参数值并返回一个响应式且可改变的 ref 对象。(找不同咯，对没错，ref()支持任何类型的参数对其进行封装)

<script setup>
//1、导入函数
import { ref } from 'vue';
//2、执行函数，传入一个参数(简单类型与对象类型均可)，用变量接收
const count = ref(0)
const addCount = () => {
  //脚本区域修改ref产生的响应式对象，必须通过.value属性修改
  count.value++
}


const person = ref({
  name: '芋头'
})
const setPerson = () => {
  person.value.name = '一哑7'
}
</script>
<template>
  <div>
    <button @click="addCount">{{ count }}</button>
    <!--点击button数字添加-->
  </div>
  <div>
    <button @click="setPerson">{{ "这个人是" + person.name }}</button>
    <!--点击button修改人名-->
  </div>
</template>

冷知识：ref函数内部实现时依赖reactive函数，一般使用ref更多

生命周期钩子

先来看一张图熟悉一下api
在这里插入图片描述

详细的生命周期API使用请参考Vue3官网API介绍

生命周期函数：引入函数后执行并传入回调，会自动执行回调 多次执行生命周期函数时，回调会依次执行

<script setup>
//引入函数
import { onMounted } from 'vue'

//执行函数并传入回调
onMounted( () => {
  console.log('执行回调～')
  console.log('执行回调～')
}) 

//多次执行函数时依次执行
onMounted( () => {
  console.log('执行回调2～')
  console.log('执行回调2～')
})

</script>

computed计算属性函数

<script setup>
//1、导入函数
import { ref , computed } from 'vue';
let list = ref([1 , 2 , 3 , 4 , 5 , 6 , 7 , 8])
//2、执行函数；return经过计算的值；用变量接受这个值
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})
//计时器观察实时更新
setTimeout(() => {
  list.value.push(-1 , 10 , 12 , 0)
} , 3000)
</script>
<template>
  <div>
   {{`原始数组是：[${list}]`}}
  </div>
  <div>
    {{`新数组是：[${computedList}]`}}
  </div>
</template>

watch监听函数

  • 监听单个数据：
    watch需要两个参数，第一个参数是需要监听的数据，第二个参数是在所需要监听的数据发生变化时所需要执行的回调函数。
<script setup>
//1、导入函数
import { ref , watch } from 'vue';
//2、设置需要监听的数据和回调函数
const count = ref(0)
const setCount = () => {
  count.value++
}
//3、watch监听单个数据
watch(count , () => {
  alert('哦豁，变了哦')
})
</script>
<template>
  <div>
  <button @click="setCount">{{count}}</button>
  </div>
</template>
  • 监听多个数据：
    这时只需要用数组把需要监听的数据封装起来就好了
<script setup>
//1、导入函数
import { ref , watch } from 'vue';
//2、设置需要监听的数据和回调函数
const count = ref(0)
const setCount = () => {
  count.value++
}

const name = ref('芋头')
const setName = () => {
  name.value = '一哑7'
}
//3、watch监听多个数据，用数组把需要监听的数据封装起来就好了
watch([count , name] , ([newCount , newName] , [odlCount , oldName]) => {
  alert('哦豁，变了哦' +  [odlCount , oldName] + '变成了' + [newCount , newName] )
})
</script>
<template>
  <div>
  <button @click="setCount">{{count}}</button>
  <button @click="setName">{{name}}</button>
  </div>
</template>

不要忘了关于watch还有两个参数哦，immediate：立即执行；deep：深度监听

  • immediate ： 在第一次刚刚监听到的时候就先执行一次
<script setup>
watch(count , () => {
  alert('变了哦') 
  } , {
    immediate: true}
)
</script>
  • deep ：通过watch监听的ref对象默认浅层监听，直接修改嵌套对象都不会出发回调函数，此时便需要开启deep
    没理解？把下面代码复制下来删掉deep对比一下就知道咯
<script setup>
watch(name , () => {
  alert('变了哦') 
  } , {
    deep: true
  }
)
</script>
  • 精确监听：监听多个属性中的一个属性（deep会有性能损耗建议不开启deep而是使用精确监听）
    只需要把watch函数的参数变成两个回调函数，第一个是需要监听的东西，第二个是监听到之后需要执行的回调函数

🍊个🌰：

<script setup>
import { ref, watch } from 'vue'
const state = ref({
  name: '芋头',
  age: 22,
  sex: '男'

})
const chanheName = () => {
  //修改姓名
  state.value.name = '一哑7' 
}
const changeAge = () => {
  //修改年龄~
  state.value.age = 23
}
const changeSex = () => {
  //去一趟泰国
  state.value.sex = '女'
}
//精确侦听具体属性
watch(
  () => state.value.age,
  () => {
    console.log('长大一岁了哦')
  }
)
watch(
  () => state.value.name,
  () => {
    console.log('还顺路改了个名字')
  }
)
</script>
<template>
  <div>
    <div>这个人现在的名字：{{state.name}}</div>
    <div>这个人现在的年龄：{{state.age}}</div>
  </div>
  <div>
    <button @click="chanheName">修改姓名</button>
    <button @click="changeAge">修改年领</button>
  </div>
</template>

父子通信

父传子：在子组件中用defineProps接收父组件中绑定的数据就好了

//父亲页
<template>
  <div>
    I am dadTest
  </div>
  <div>
    <sonTest />
  </div>
  <div>
    父传子
    <!-- 父亲上绑定属性 -->
    <sonTest message="father Data" />
  </div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
</script>


//儿子页
<template>
    <div>
        I am sonTest {{message}}
    </div>
</template>
<script setup>
    //用defineProps接收数据就好了
    defineProps({
        message: String
    })
</script>

子传父：父组件通过@绑定事件，子组件内部通过defindEmits函数生成emit方法触发事件
defindEmits 传递参数是数组哦~，因为可传递所有绑定事件

//儿子页
<template>
   <div>
     <button @click="sendMsg">点击按钮查看来自子组件的信息</button>
   </div>
</template>
<script setup>
   //利用defindEmits函数生成emit方法
   const emit = defineEmits(['giveMeMessqge'])
   const sendMsg = () => {
    //出发绑定事件
    emit('giveMeMessqge' , '儿子消息')
   }
</script>

//父亲页
<template>
  <div>
    <sonTest @giveMeMessqge="getMessage"/>
  </div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
const getMessage = (msg) => {
  alert(msg)
}
</script>

模板引用

默认情况下<script setup>语法糖下组件内部的属性与方法不对父组件开放，可以通过defineExpose编译宏指定哪些属性和方法允许访问

//子组件
<template>
   <div>
     Test 组件
   </div>
</template>
<script setup>
   import { ref } from 'vue';
    const name = ref('nameTest')
    const setName = () => {
        name.value = 'newNameTest'
    }

    // defineExpose({
    //     name,
    //     setName
    // })
</script>

//父组件
<template>
  <div>
    <!-- 用ref标识绑定ref对象 -->
    <h1 ref="h1Ref">dom标签h1</h1>
    <sonTest ref="sonRef"/>
  </div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
import { ref , onMounted } from 'vue'

//调用ref函数生成ref对象当然组件也是可以的
const h1Ref = ref(null)
const sonRef = ref(null)

//不过要注意在获取对象时要等组件挂在完毕哦，可以使用
onMounted(() => {
  alert(h1Ref.value)
  alert(sonRef.value)
})
</script>

组合选项

顶层组件向任意底层组件传递参数和方法，实现跨层组件通信顶层组件通过provide函数提供数据，底层组件通过inject函数获取数据

效果

跨层组件通信

跨层传递普通数据：

普通数据

跨层传递响应式数据：

响应式数据

跨层传递方法：顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

跨层传递方法
解决方案

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Docker-compose】基于Docker-compose创建LNMP环境并运行Wordpress网站平台

【Docker-compose】基于Docker-compose创建LNMP环境并运行Wordpress网站平台

基于Docker compose创建LNMP环境并运行Wordpress网站平台 1.Docker-Compose概述2. YAML文件格式及编写注意事项3. Docker-Compose配置常用字段4.Docker Compose常用命令5.使用Docker-compose创建LNMP环境&#xff0c;并运行Wordpress网站平台5.1 Docker Compose环境安装5.2 使用…
阅读更多...
使用spark进行hbase的bulkload

使用spark进行hbase的bulkload

使用spark进行hbase的bulkload 一、 背景 HBase 是一个面向列&#xff0c;schemaless&#xff0c;高吞吐&#xff0c;高可靠可水平扩展的 NoSQL 数据库&#xff0c;用户可以通过 HBase client 提供的 put get 等 api 实现在数据的实时读写。在过去的几年里&#xff0c;HBase …
阅读更多...
主机漏洞利用演示MS17-010（永恒之蓝）

主机漏洞利用演示MS17-010（永恒之蓝）

ms17-010危害&#xff1a;对被攻击方的电脑造成蓝屏&#xff01; 申明&#xff1a;本篇文章的用意仅做学习使用 网络搭建环境&#xff1a; 软件&#xff1a;Vmware Workstation 17 攻击机&#xff1a;Kali 靶机环境&#xff1a;Windows 7 Nmap软件的基本功能&#xff1a; …
阅读更多...
ONNX Runtime 加速深度学习(C++ 、python)详细介绍

ONNX Runtime 加速深度学习(C++ 、python)详细介绍

ONNX Runtime 加速深度学习(C 、python)详细介绍 本文在 https://blog.csdn.net/u013250861/article/details/127829944 基础上进行了更改&#xff0c;感谢原作&#xff01; ONNXRuntime(Open Neural Network Exchange)是微软推出的一款针对ONNX模型格式的推理框架&#xff0c…
阅读更多...
3DVR全景旅游，最新数字化智慧文旅

3DVR全景旅游，最新数字化智慧文旅

导语&#xff1a; 随着科技的飞速发展&#xff0c;3DVR全景旅游正以其独特的特点和无限的优势&#xff0c;成为当今智慧文旅的领航者。穿戴上VR设备&#xff0c;只需一个轻轻的点击&#xff0c;你将被带入一个全新的数字世界&#xff0c;领略美景、探索奇迹。让我们一起深入了…
阅读更多...
第119天：免杀对抗-二开CSShellcode函数修改生成模版修改反编译重打包(下)

第119天：免杀对抗-二开CSShellcode函数修改生成模版修改反编译重打包(下)

知识点 #知识点&#xff1a; 1、CS-表面特征消除 2、CS-HTTP流量特征消除 3、CS-Shellcode特征消除#章节点&#xff1a; 编译代码面-ShellCode-混淆 编译代码面-编辑执行器-编写 编译代码面-分离加载器-编写 程序文件面-特征码定位-修改 程序文件面-加壳花指令-资源 代码加载面…
阅读更多...
SSM企业固定资产智能管理系统的设计与实现【纯干货分享,M免费领取源码06298】

SSM企业固定资产智能管理系统的设计与实现【纯干货分享,M免费领取源码06298】

摘要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对企业固定资产智能管理系统等问题&#xff0c…
阅读更多...
springboot 项目启动不打印spring 启动日志

springboot 项目启动不打印spring 启动日志

今天项目遇到一个很奇怪的问题&#xff0c;服务在启动时&#xff0c;不打印spring 的启动日志。经过排查发现是因为其他的依赖引入了 log4j 的依赖&#xff0c;因为我们的项目用的是logback&#xff0c;所以项目中没有log4j 的相关配置&#xff0c;所以干扰到了日志的打印 原因…
阅读更多...
删除主表 子表外键没有索引的性能优化

删除主表 子表外键没有索引的性能优化

整个表147M&#xff0c;执行时一个CPU耗尽&#xff0c; buffer gets 超过1个G&#xff0c; 启用并行也没有用 今天开发的同事问有个表上的数据为什么删不掉&#xff1f;我看了一下&#xff0c;也就不到100000条数据&#xff0c;表上有外键&#xff0c;等了5分钟hang在那里&…
阅读更多...
python：基于GeoPandas和GeoViews库将GEDI激光高程数据映射到交互式地图

python：基于GeoPandas和GeoViews库将GEDI激光高程数据映射到交互式地图

作者：CSDN @ _养乐多_ 本文将介绍 GEDI（Global Ecosystem Dynamics Investigation）激光雷达数据某数据点波形数据提取，并绘制图表，添加其他图表元素并使图表具有交互性。 在本文中，我们将探索如何打开、读取和处理GEDI数据，并利用地理信息处理库GeoPandas和地理空间数…
阅读更多...
DevOps自动化平台开发之 Shell脚本执行的封装

DevOps自动化平台开发之 Shell脚本执行的封装

基础知识 基于如下技术栈开发DevOps平台 Spring Boot Shell Ansible Git Gitlab Docker K8S Vue 1、spring boot starter的封装使用 2、Shell脚本的编写 3、Ansible 脚本的编写 4、Docker 的使用与封装设计 本篇介绍如何使用Java封装Linux命令和Shell脚本的使用 将其设计成…
阅读更多...
云计算——ACA学习 数据中心概述

云计算——ACA学习 数据中心概述

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 写在前面 课程目标 学前了解 一.数据中心定义 二.数据中心涉及的主要标准与规范 …
阅读更多...
和chatgpt学架构04-路由开发

和chatgpt学架构04-路由开发

目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转&#xff0c;其中路由配置是必不可少的&#xff0c;我们在做开发的时候&#xff0c;先需要了解知识点&…
阅读更多...
十、数据结构——链式队列

十、数据结构——链式队列

数据结构中的链式队列 目录 一、链式队列的定义 二、链式队列的实现 三、链式队列的基本操作 ①初始化 ②判空 ③入队 ④出队 ⑤获取长度 ⑥打印 四、循环队列的应用 五、总结 六、全部代码 七、结果 在数据结构中&#xff0c;队列&#xff08;Queue&#xff09;是一种常见…
阅读更多...
【数据分享】1999—2021年地级市地方一般公共预算收支状况（科学技术支出/教育支出等）

【数据分享】1999—2021年地级市地方一般公共预算收支状况（科学技术支出/教育支出等）

在之前的文章中&#xff0c;我们分享过基于2000-2022年《中国城市统计年鉴》整理的1999-2021年地级市的人口相关数据、各类用地面积数据、污染物排放和环境治理相关数据、房地产投资情况和商品房销售面积、社会消费品零售总额和年末金融机构存贷款余额&#xff08;可查看之前的…
阅读更多...
STM32CubeIDE（串口）

STM32CubeIDE（串口）

目录 一、轮询模式 1.1 配置USART2为异步模式 1.2 500ms发送一次消息 1.3 通信结果 1.4 串口控制LED 二、中断收发 2.1 开启中断 2.2 中断发送接收 2.2.1 中断发送只需要调用接口 2.2.2 中断接收 2.3 实验结果 三、DMA模式与收发不定长数据 3.1 DMA通道配置 3.2 DMA…
阅读更多...
【MATLAB绘图】

【MATLAB绘图】

MATLAB绘图函数&#xff1a;Plot函数详解 介绍 MATLAB是一种常用的科学计算和数据可视化工具&#xff0c;它提供了强大的绘图函数&#xff0c;使用户能够创建各种类型的图表和图形。 基本语法 plot函数的基本语法如下&#xff1a; plot(x, y)其中&#xff0c;x和y是长度相…
阅读更多...
Vue 本地应用 图片切换 v-show v-bind实践

Vue 本地应用 图片切换 v-show v-bind实践

点击切换图片的本质&#xff0c;其实修改的是img标签的src属性。 图片的地址有很多个&#xff0c;在js当中通过数组来保存多个数据&#xff0c;数组的取值结合索引&#xff0c;根据索引可以来判断是否是第一张还是最后一张。 图片的变化本质是src属性被修改了&#xff0c;属性…
阅读更多...
Shell输出帮助手册

Shell输出帮助手册

代码&#xff1a; 帮助手册雏形 function help(){echo -e "Help manual":echo -e " -h. -- help View the help manual"echo -e " install Installation"echo -e " uninstall Uninstall" }case "$1&qu…
阅读更多...
设计模式——单例模式

设计模式——单例模式

1 概述 单例模式就是保证一个类只有一个对象实例。 为了保证无法创建多余的对象实例&#xff0c;单例类中需要自己创建对象实例&#xff0c;并把自己的构造方法私有化以防止其他地方调用创建对象&#xff0c;且需要提供一个公共的方法给其他类来获取该单例类的实例。 同时单例…
阅读更多...
最新文章

Copyright @ 2022~2023