Vue3前端框架学习记录

最新推荐文章于 2024-11-14 16:23:37 发布
最新推荐文章于 2024-11-14 16:23:37 发布
阅读量877 收藏 6
点赞数 24
文章标签： 前端框架 学习 arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73638669/article/details/142108321
版权

VUE3

简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

发布日期：2020年9月18日

性能：

​ 打包时间： 提升了41%

​ 初次渲染速度 提升了55% 更新渲染速度133%

​ 内存减少了 54%

升级：

​ Proxy替代defineProperty实现响应式

​ 重写虚拟DOM实现Tree-Shaking

VUE3 更好的支持TypeScript

基于vue-cli创建

检查版本

vue --version

安装或者 升级vue /cli

npm i -g @vue/cli

执行创建命令

vue create 项目名

基于vite创建项目

vite的优势：

​ 轻量快速的热重载、通用的插件

​ 对TypeScript、JSX、CSS等的支持开箱即用。

​ 真正的按需编译，不需要等待应用程序的完成

安装环境： npm install -g vite

创建项目：npm create vue@latest

创建项目配置
√ 请输入项目名称： ... vue3_test
√ 是否使用 TypeScript 语法？ ...  是
√ 是否启用 JSX 支持？ ... 否 
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 
√ 是否引入 Pinia 用于状态管理？ ... 否
√ 是否引入 Vitest 用于单元测试？ ... 否 
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否


中端》》进入项目的根目录
cd 项目名
npm i  项目初始化 （下载依赖）
npm run dev 启动项目

setup

setup是Vue3中一个新的配置。值是一个函数，

是组合式API结构。组件中用到的方法 数据 计算属性 监视等 配置在setup中。

使用return返回 数据 方法 等 可以在模板中直接使用。

setip中不能使用 this关键字 this: undefined

setup 函数会在beforeCreate之前调用，它是领先所有的 “钩子执行的”

setup语法糖

setup有一个语法糖，可以让我们讲setup独立出来


<!--setup语法糖-->
<script setup lang="ts">
console.log("this:", this)
//数据 原来是写在data中的
//此时 数据不是响应式的
let uName = "张三";
let uAge = 20;
let uTel = "15339253326";

//方法 原来写在methods中
const changeName = () => {
  uName = "zhang-san"
  console.log(uName)
}
const changeAge = () => {
  uAge += 1;
  console.log(uAge)
}
const showTel = () => {
  console.log("联系方式：", uTel)
}
</script>

简化name属性

<script lang="ts">
export default {
  name: "Person"
}
</script>

使用插件简化

安装：npm i vite-plugin-vue-setup-extend -D

配置：vite.config.ts >>>

​ 1.引入：import vueSetupExtend from ‘vite-plugin-vue-setup-extend’

​ 2.配置

  plugins: [
    vue(),    vueSetupExtend()
  ],

​ 3.使用

<script setup lang="ts" name="Person">
App.vue
<template>
  <Person></Person>
</template>

<script lang="ts" setup name="App">
//引入Person组件 也模板直接使用
import Person from "@/components/Person.vue";
</script>

基本类型的响应式数据（ref）

作用：定义响应式变量

引入 ： import {ref} from “vue”;

语法： let xxx = refu(初始值)

返回值：是一个RefImpl实例对象， 实例对象的value属性是响应式

注意：在模板中不需要 xxx .value

对于：let name = ref(“张三”) （RefImpl实例） name 不是响应式

而name.value是响应式

<template>
  <h2>姓名：{{ uName }}</h2>
  <h2>年龄：{{ uAge }}</h2>
  <h2>电话：{{ uTel }}</h2>
  <button @click="changeName">更新姓名</button>
  <button @click="changeAge">更新年龄</button>
  <button @click="showTel">点击查看联系方式</button>
</template>

<!--setup语法糖-->
<script setup lang="ts" name="Person">

//数据 原来是写在data中的
import {ref} from "vue";

let uName = ref("张三");
//ref >> RefImpl >> value << 张三

let uAge = ref(20);
let uTel = "15339253326";

//方法 原来写在methods中
const changeName = () => {
  //编译错误
  uName.value += "~";
  console.log(uName.value)
}
const changeAge = () => {
  uAge.value += 1;
  console.log(uAge)
}
const showTel = () => {
  console.log("联系方式：", uTel)
}

</script>

<style scoped>

</style>

对象类型的响应式数据 reactive

作用 定义一个响应式对象reactive （基本类型不能使用 要用ref）

引入reactive

import {reactive} from “vue”;

//使用reactive 定义对象类型的数据

let 响应式对象 = reactive(源对象)。

返回值：reactive 返回一个 Proxy实例对象，响应式对象

注意：reactive定义的响应式数据是深层次

<template>
  <h2>汽车信息：一台{{ car.brand }}汽车，价值：{{ car.price }}万</h2>
  <button @click="changeCarPrice">修改汽车价格</button>
  <hr/>
  <h2>游戏列表</h2>
  <ul v-for="(g,index) in games" :key="g.id">
    {{ g.name }}
  </ul>
  <button @click="changeFirstGame">修改第一个游戏</button>
  <hr/>
  <h2>d:{{ obj.a.b.c.d }}</h2>
  <button @click="changeD">修改d</button>

</template>

<script lang="ts" setup name="Person">

import {reactive} from "vue";
import {nanoid} from "nanoid";

console.log(nanoid())

let car = reactive({brand: '比亚迪', price: 100})

let games = reactive([
  {id: nanoid(), name: '测试数据A'},
  {id: nanoid(), name: '测试数据B'},
  {id: nanoid(), name: '测试数据C'}
])

let obj = reactive({a: {b: {c: {d: 888}}}});


//修改 汽车价格
const changeCarPrice = () => {
  car.price += +1;
  console.log(car)
}
const changeFirstGame = () => {
  games[0].name = "测试数据D";
  console.log(games)
}

const changeD = () => {
  obj.a.b.c.d = 666;
  console.log(obj)
}
</script>

<style scoped>

</style>

ref创建 对象类型的响应式数据

其实ref接收的数据可以是：基本类型 对象类型。

如果ref接收的是对象类型，内部实际是调用了 reactive

<template>
  <h2>汽车信息：一台{{ car.brand }}汽车，价值：{{ car.price }}万</h2>
  <button @click="changeCarPrice">修改汽车价格</button>
  <hr/>
  <h2>游戏列表</h2>
  <ul v-for="(g,index) in games" :key="g.id">
    {{ g.name }}
  </ul>
  <button @click="changeFirstGame">修改第一个游戏</button>
  <hr/>
  <h2>d:{{ obj.a.b.c.d }}</h2>
  <button @click="changeD">修改d</button>

</template>

<script lang="ts" setup name="Person">

import {ref} from "vue";
import {nanoid} from "nanoid";

let car = ref({brand: '比亚迪', price: 100})
// car >> ref >> RefImpl >> value <<  {brand: '比亚迪', price: 100} >> proxy

let games = ref([
  {id: nanoid(), name: '测试数据A'},
  {id: nanoid(), name: '测试数据B'},
  {id: nanoid(), name: '测试数据C'}
])

let obj = ref({a: {b: {c: {d: 888}}}});


//修改 汽车价格
const changeCarPrice = () => {
  car.value.price += +1;
  console.log(car)
}
const changeFirstGame = () => {
  games.value[0].name = "测试数据D";
  console.log(games)
}

const changeD = () => {
  obj.value.a.b.c.d = 666;
  console.log(obj)
}
</script>

<style scoped>

</style>

reactive, ref 整体替换

<template>
  <h2>汽车信息：一台{{ car.brand }}汽车，价值：{{ car.price }}万</h2>
  <button @click="changeCarPrice">修改汽车价格</button>
  <button @click="changeCar">替换汽车对象</button>

  <hr/>
  <h2>用户姓名：{{ person.name }}，年龄：{{ person.age }}</h2>
  <button @click="changePersonName">修改用户姓名</button>
  <button @click="changePerson">替换用户对象</button>

</template>

<script lang="ts" setup name="Person">

import {reactive, ref} from "vue";
import {nanoid} from "nanoid";

let car = ref({brand: '比亚迪', price: 100})
// car >> ref >> RefImpl >> value <<  {brand: '比亚迪', price: 100} >> proxy
let person = reactive({id: nanoid(), name: '张三', age: 20})
// person >> proxy  >>{id: nanoid(), name: '张三', age: 20}

const changeCarPrice = () => {
  car.value.price += +1;
  console.log(car)
}
const changePersonName = () => {
  person.name += "~";
  console.log(person.name)
}

const changeCar = () => {
  car.value = {brand: '奔驰', price: 200};
  /**
   * car  》》 ref >>> RefImpl >> value >> 对象 >> reactive >> proxy
   */
}

const changePerson = () => {
    // 使用  Object.assign(已有对象，新对象)；
  //如果新对象 与 已有对象的属性相同 则替换值
  Object.assign(person,{id: nanoid(), name: '李四', age: 25});
  // person = reactive({id: nanoid(), name: '李四', age: 25});

  // console.log("触发了changePerson", person)
  /**
   * person  >>> reactive >>> proxy
   *
   * person =  {id: nanoid(), name: '李四', age: 25}
   *
   * person = reactive({id: nanoid(), name: '李四', age: 25});
   */


}

</script>

<style scoped>

</style>

reactive对比 ref

宏观角度：

​ ref用于定义 基本数据类型 对象数据类型

​ reactive 用于定义 对象类型数据

区别

ref创建的变量 必须.value使用。

reactive重新分配一个新的对象，会失去响应式（可以使用Object.assign 整体替换）

原则

如果需要一个基本类型的数据 必须使用ref 如果需要一个响应式独享

层次不深 ref reactive 如果 对象的层次 深 使用 reactive

猿究院+
关注
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 5099
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
Vue前端框架学习笔记
04-21
我的前端框架学习笔记，vue的安装与使用，Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且...
官方的js路由router
weixin_40945354的博客
02-09 1108
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
前端框架Vue3
tainqiuer123的博客
04-09 2341
1、vue介绍 2、vue基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue3.js"></script> </head> <body> <div id="app"> <!-.
前端三大框架Vue框架详解
liuyingv8的博客
04-03 9732
Vue框架诞生于2014年，其作者为中国人——尤雨溪，也是新人最容易入手的框架之一，不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式（Model-&gt;View-&gt;View-Model）和一个可组合的组合型组件系统，具有简单的、灵活的API...
2018年九个很受欢迎的vue前端UI框架
热门推荐
祈澈菇凉
08-28 1万+
最近在逛各大网站，论坛，SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，小编自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的公司项目。 学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后，这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 V...
一、当前主流前端框架
pkyShare 的博客
11-25 275
当前主流前端框架 1 Vue.js 1.1 iView   iview 是一个强大的基于 Vue 的 UI 库，有很多实用的基础组件比 elementui 的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。 官网地址 Gith...
Vue前端框架
qq_63948347的博客
09-05 1350
Vue.js 是一款渐进式的 JavaScript 前端框架，由尤雨溪（Evan You）于 2014 年创建，主要用于构建用户界面。与其他前端框架（如 React 和 Angular）相比，Vue.js 具有学习曲线平缓、灵活性高、开发体验良好的特点。
【Vue前端】前端框架基础
qq_40419478的博客
06-28 527
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。框架就是在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率。JavaScript就属于前端的原生框架，而Vue.js也是一个js框架，并不是代替js的，只是对js的封装。
Vue.js前端框架技术学习总结
2301_78828457的博客
12-27 1654
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。在 Vue.js 中，你可以使用 Vue.component() 全局注册一个组件，也可以在组件内部局部注册组件。以下是全局注册一个组件的例子：',data() {
Vue前端框架选型论证
2401_84434086的博客
04-29 715
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端框架Vue2 Vue3学习笔记
07-24
前端框架Vue2 Vue3学习笔记
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
本课程"前端框架及项目面试－聚焦Vue3/React/Webpack"是针对这一领域的最新升级版，旨在帮助开发者掌握并理解三大主流前端框架Vue3、React以及Webpack的核心概念和实际应用。 Vue3作为Vue.js框架的最新版本，引入了...
前端主流框架vue学习笔记第二篇
08-29
前端主流框架Vue学习笔记第二篇 本篇文章主要讲解了使用Vue框架来实现一个简单的TODO List程序，涵盖了基本的增删改查操作，并且使用了Bootstrap来美化页面结构。下面是本篇文章的知识点： 1. Vue框架的基本使用：...
c++实现B树(下)
henjdx的博客
11-13 1058
（如果有小可爱对B树还不是很了解的话，可以先看完上一篇blog，再来看小吉的这篇blog）。那这一篇主要讲的是B树中删除操作的实现。在看小吉的数据结构与算法（c++实现）系列博客中，各位小可爱们应该能发现，其实在实现一个数据结构时，删除操作普遍比新增操作要难。小吉浅浅预告一下B树的删除操作可以说是天花板级别的难。但是各位小可爱们不要怕，跟着小吉的博客看下去B树删除易如反掌（哈哈，夸张了🤣）
【学习】【HTML】localStorage、sessionStorage、cookie
m0_61097007的博客
11-13 815
是 Web 存储的一种形式，它允许在浏览器中存储键值对。是网站通过 Web 浏览器留在访问者电脑上的一小段信息。）API 的一部分，用于在客户端浏览器中存储数据。
蓝队技术学习
weixin_65861348的博客
11-12 982
该手册详细规定了在不同安全事件发生时应执行的标准操作程序，按安全事件类别进行了分类阐述。
EEG+EMG学习系列 (1) :一个基于小波的自动睡眠评分模型
最新发布
走在深度学习前沿的小宋
11-14 912
由于手动睡眠阶段评分方法的限制，创建自动睡眠阶段分类的需求已经上升。在这项研究中，使用`双通道单极脑电图 （EEG）`、`下巴肌电图 （EMG）` 和`双通道眼电图 （EOG）` 信号开发了一种新的机器学习模型。使用`最佳正交滤波器组`，通过分解 30 s 信号纪元来获得子带。然后根据这些子带的系数计算 `Tsallis 熵`。然后，这些特征被馈送到一个`集成袋装树 （EBT） 分类器`，用于自动睡眠分类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值