vite的学习开篇-vue3.0以及ref,computed 的使用

—— vite的学习开篇-vue3.0以及ref,computed 的使用——

学习vite之前,我们先来简单的认识一下vue3.0

1.使用 vite 必须使用node 12及以上的版本

vue -v

检测一下版本是vue多少的版本
2.下面写个例子进行比较一下,vue2.0与vue3.0简化

在这里插入图片描述

2.上面使用的是vue2.0的编写代码方式:

可以看到,vue2.0,就是简单是双向绑定和事件的调用,这里就不一一讲解

3. 重点:vue3.0的编写代码方式composition-api

在这里插入图片描述
在这里插入图片描述

关于ref我特别的翻译了一下

接受一个内部值并返回一个反应性且可变的的ref对象,ref对象具有指向内部值的单个属性.value

理解:比如我可以定义一个msg的变量,就类似于我定义一个参数叫msg为啥用const 略过,也就是说这个ref通过给value属性设置setter和getter实现数据劫持,实现了双向绑定
ref:让数据变成响应式,即改变会引发视图层的变化也就是vue2.0中的数据双向绑定,可以简单理解成v-model双向绑定
ref()里的值为初始值,我们可以随便定义
ref通过给value属性设置setter和getter实现数据劫持
我这里使用了eslint,如果const msg = ref('我立志要报效祖国')这样的话,会报eslint 检测因为我们这里包套了没有解套,取不到咱们初始化的值,setup(){ return{ 返回你的参数,msg,会自动解套}}
4.setup的认识(vue3.0)
过去我们使用的是Options API
事件监听的使用

在这里插入图片描述
在这里插入图片描述

使用监听器应该还需要配置调用库暂时没有理解,以后再做处理
很抱歉,根据提供的引用内容,无法准确回答你关于vite-plugin-mock的版本号。引用提到了vite-plugin-mock是一个基于vite的模拟插件,使用Mockjs开发,并支持本地环境和生产环境。引用提到了查看vite-plugin-mock版本号的方法,需要在项目文件中的node_modules文件夹中找到vite-plugin-mock的package.json文件。引用提到了一个具体的文件路径和行数。但是没有提到具体的版本号信息。如果你想获取vite-plugin-mock的版本号,你可以按照引用提供的方法去查找package.json文件并查看其中的版本号信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-plugin-mock:vite.use模拟插件的模拟插件](https://download.csdn.net/download/weixin_42099815/18770992)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vite-plugin-mock 的 require is not defined 问题](https://blog.csdn.net/2301_76676960/article/details/130992407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vite-plugin-mock3.0.0版本运行报错](https://blog.csdn.net/qq_69892545/article/details/131880650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值