vue3学习笔记

已于 2023-10-10 10:42:11 修改
阅读量229 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
于 2023-09-27 11:52:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Giraffe0615/article/details/133344444
版权

较vue2对比，初步学习笔记。

  • 定义数据类型

ref：定义基本数据类型

reactive：定义对象

const input = ref('')
const value1 = ref(true)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 方法
const handleClick = () => {
  form.name = '这是一个名字';
}
  • vue2 vue3定义全局变量区别

06便士
关注
Vue3 学习笔记
weixin_52253964的博客
10-29 956
Vue3 学习笔记
Vue3快速上手(Vue3学习笔记)
07-11
Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
Vue3基础
m0_65552590的博客
12-31 216
this.;},},};
vue3 使用UI框架reactive数据更新，视图不更新问题
长歌的博客
04-15 1万+
本篇主要记录两个问题，然而这两个问题又都可以对应同一种解法。废话少说，解决方法在最上面。使用reactive定义表单数据，推荐格式如下： const form = reactive({ formData: {//为了保证响应性，一定一定要多包这一层 key1: value, key2: value, }, }); 一定一定要再多包一层，不然就会遇到一些问题。(⊙﹏⊙)虽然这是一句废话。下面的内容过于基础且本篇只记录bug和解法，想要探求为什么的呢，还请自己去
elementplus中form表单的使用及讲解---快速上手
qq_56263094的博客
05-02 8557
这篇仅仅对于初学者，因为纯个人理解，后端er只需要会用就好啦 贴一个elementplus的官网Form 表单 | Element Plus (element-plus.org) 1.初识elementplus的form表单 <template> <el-form :model="form" label-width="120px"> <el-form-item label="Activity name"> <el-inpu....
VUE页面模块笔记
懒起来
07-10 1080
VUE页面模块笔记
vue3 父组件和子组件如何传值 详解
热门推荐
qq_56263094的博客
05-04 1万+
目录 1.父组件打开子组件的的dialog组件 model-value 单向数据绑定 2.父组件关闭子组件的的dialog组件 defineEmits 3.开始运用： 用户的增加修改操作 1.父组件的修改 2.子组件的修改 3.父组件给子组件赋值 4.子组件调用父组件方法 1.父组件打开子组件的的dialog组件 🕒新建一个vue文件命名为test 🕒然后咱们直接从官网CV一个带有表单的dialog组件如......
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
【笔记】vue3.x 清空reactive对象
咫尺天涯的专栏
08-19 1万+
有一个reactive对象，在清空这个对象时，直接给其赋{}不起作用。 为了解决这个问题，采取了一点粗糙的方法，代码如下： <template> <el-button @click="clear">清空</el-button> </template> setup() { const form = reactive({ name: 'Name', age: 18 }) const clear = () => { .
vue3踩坑记（1）ref、reactive
u013344993的博客
06-28 1714
踩坑用的是vite2 + vue3 + element-plus + ts + setup语法糖 在我理解，ref绑定普通数据类型（number，string，boolean），对象类的需要reactive。 这里写了个登录页，一度让我怀疑。在vue2.x里面最基本简单的表单组件，这里完全失败。代码如下。 <template> <el-form ref="loginForm" :model="loginForm" label-width="80px"> <e
vue3.x 之 reactive
不知道写的什么
10-14 1075
<template> <div> {{ count.value }} <button @click.prevent="Add">Add</button> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; export default defineComponent({ n
Vue3实战总结（二)
ningpeixi679的博客
01-31 1162
Vue3.0做项目过程中问题小总结 setup函数 root参数 相当于2.0中的this axios 请求倒计时和超时 超时：在create设置timeout，当超过指定时间，请求依然没有响应，为请求超时 引入接口调用 拦截器 import axios from 'axios' // 创建axios const service = axios.create({ // baseURL:'https://some-domain.com/api/', // timeout
Vue探索
黑胡子大叔的博客
03-18 417
Vue 生命周期 Setup() @date 2021/3/18 @note 今天再看一个开源的系统项目 https://gitee.com/asaasa/element_vue3.0?_from=gitee_search#/asaasa/element_vue3.0/blob/dev/src%5Cplugins%5Cpermission.js 在看到它的登录部分时候，发现该页面不存在onCreate()等生命周期的处理，只是在一个Setup()中有处理，搜罗了一下相关的资料，汇总一下 抛出问题 既然
【Vue3】使用element-plus进行基础的表单校验
随便写写
09-15 5984
<script setup> import { ref, reactive } from 'vue' // 表单元素 const dom = ref(null) // 校验规则 const rules = { name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }] } // 绑定数据 const form = reactive({ name: '' }) // 测试方法 const onSubmit = () =&
做一个能适配「手机」的网站需要注意什么
最新发布
illidri的博客
11-01 252
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端 常见开发工具使用
weixin_45534301的博客
10-31 461
【代码】前端 常见开发工具使用。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 681
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
尚硅谷Vue3学习笔记深度解析
资源摘要信息:"尚硅谷vue3的学习笔记详细介绍了Vue.js框架的最新版本Vue 3的关键特性和更新。作为前端开发领域非常受欢迎的JavaScript框架，Vue.js自发布以来就以其简洁的API和灵活的架构受到了广大开发者的青睐。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值