Vue3学习(后端开发)

目录

一、安装Node.js

二、创建Vue3工程

三、用VSCode打开

四、源代码目录src

五、入门案例——手写src

六、测试案例

七、ref和reactive的区别


一、安装Node.js

下载20.10.0 LTS版本 

https://nodejs.org/en

使用node命令检验安装是否成功

node

二、创建Vue3工程

在桌面右键打开终端,输入创建命令。

npm create vue@latest

输入项目名称,用小写字母和数字,用 _ - 分隔。

接下来就是一些选项配置,这里只选使用TypeScript语法。

到这里Vue3项目就创建好了,可以在桌面上找到。

三、用VSCode打开

使用VSCode打开刚才建好的项目

这里会推荐两个官方插件,点击安装即可。

 

打开env.d.ts文件,发现报错,原因是没有下载依赖。

打开终端,使用npm i命令下载依赖。

npm i

新增了一个node_modules目录

下载好后重新打开VSCode

项目中的index.html文件是入口文件,类似于SpringBoot项目中的启动类。

我们先将index.html文件里面的内容全部注释,然后自己简单的写一个html页面。

打开终端,使用npm run dev命令启动项目。

npm run dev

按住Ctrl键然后单击http://localhost:5173/打开

四、源代码目录src

和后端项目一样,src目录用于存放源代码。

在入口文件index.html中,引入了src目录下的main.ts文件。

main.ts文件内容

其中import的作用就是导入,类似于Java中的导包。

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

导入样式 

import './assets/main.css'

从vue中导入createApp,然后下面就能用createApp了。

import { createApp } from 'vue'

导入App组件,App组件是根组件,我们写的其他组件放到根组件中。

import App from './App.vue'

用根组件App创建应用,挂载到一个id为app的容器中。

createApp(App).mount('#app')

这个id为app的容器就在index.html中

components目录存放我们自己写的组件,这些组件要引入到App.vue根组件中,assets目录里面是一些样式。

srcmain.tsApp.vue是必不可少的

五、入门案例——手写src

创建src目录,新建main.ts和App.vue

main.ts

// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'createApp(App).mount('#app')

.vue文件中可以写什么呢?

<template><!-- html -->
</template><script lang="ts">// JS或TS
</script><style>/* 样式 */
</style>

Person.vue

我们在src中创建components目录,存放我们自己写的组件Person.vue,然后引入到App.vue根组件中。

<template><div class="app"><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

App.vue

App.vue中不写内容,而是引入其他组件。

<template><Person/>
</template><script lang="ts">import Person from './components/Person.vue'export default {name: 'App',components: { Person }}
</script><style></style>

Person.vue<script>标签里面的写法和Java相似

import导包,name、age、number是属性,changeName()、changeAge()、showNumber()是方法。

这里用到了ref,ref是vue里面的,我们要用的话就要先引入进来。ref()是一个方法,可以将基本类型的数据或者是对象类型的数据变成响应式数据

响应式数据:简单理解,如果代码里面的数据改变了,那么展示在页面中的相应数据也要做出改变。

<script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script>

六、测试案例

我们将项目运行起来,在浏览器中打开。

点击对应的按钮,页面成功地做出了响应。

七、ref和reactive的区别

先来看用ref定义的数据是什么样的

还是用上面的案例,在浏览器控制台中输出name。

<template><div class="app"><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref } from 'vue'let name = ref('艾伦')let age = ref(20)let number = '12345678910'console.log(name)function changeName() {name.value += '~'}function changeAge() {age.value += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

可以看到是一个RefImpl对象,name的值变成了这个RefImpl对象中的属性value的值。所以在案例中我们用name的值是用name.value,但是在插值语法中是不用.value的。

插值语法:

 

下面就是插值语法,就是把值插进去。

 

<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>

再来看用reactive定义的数据是什么样的

下面代码是报错了的,原因是reactive定义的数据必须是对象类型。

let name = reactive('艾伦')

定义对象类型的数据

let person = reactive({"name":"艾伦", "age":20})

查看控制台输出,可以看到是一个Proxy(Object)对象。

这个时候案例代码可以修改成下面这样,结果依然是一样的。

<template><div class="app"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue'let person = reactive({"name":"艾伦", "age":20})let number = '12345678910'console.log(person)function changeName() {person.name += '~'}function changeAge() {person.age += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

那么ref是用来定义基本类型的数据的,reactive是用来定义对象类型的数据的?

其实ref也可以定义对象类型的数据

let person = ref({"name":"艾伦", "age":20})

查看控制台输出

依然是一个RefImpl对象,不过里面还有一个Proxy(Object)对象,所以用ref定义对象类型的数据本质上是用reactive

此时案例中的代码应该修改成下面这样的

使用ref就必须用到.value,在插值表达式中不需要。

<template><div class="app"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showNumber">查看联系方式</button></div>
</template><script lang="ts" setup>import { ref, reactive } from 'vue'let person = ref({"name":"艾伦", "age":20})let number = '12345678910'console.log(person)function changeName() {person.value.name += '~'}function changeAge() {person.value.age += 1}function showNumber() {alert(number)}
</script><style>.app {background-color: pink;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

总结

ref用来定义:基本类型的数据、对象类型的数据

reactive用来定义:对象类型的数据

使用原则

  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,ref、reactive都可以
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

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

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

相关文章

微软Ignite大会约起来

今年的微软Ignite技术大会今天开始了&#xff0c;要好好学习哦&#xff0c;提供直播地址&#xff0c;通过阅读原文链接可以直达直播地址 http://soft.zdnet.com.cn/special/microsoft_ignite_2016。 大会亮点 创新 IT 技术飞速发展促发了更多行业创新&#xff0c;因此您和您的企…

aria2c rpc php,aria2c 的基本配置,附带傻瓜式源码

经常需要配置&#xff0c;但是 每次都需要查找配置项的意义&#xff0c;所以索性写在这里&#xff0c;以便有个记录&#xff0c;下次无需查找。aria2c -d/Users/blueboz/Downloads \-c \-D \-laria.log \-j5 -k1M \-x16 -s16 \--file-allocationnone \--enable-rpc \--load-coo…

最全Windows下搭建go语言开发环境以及开发IDE

https://www.cnblogs.com/ynhmonster/p/8335797.html GO语言开发环境的搭建---Windows环境下 1、Golang下载 我是通过Golang中国下载的&#xff0c;因为去官网下载十分慢&#xff0c;甚至没有进度条。 下载地址&#xff1a; https://www.golangtc.com/download 我选择的是go1…

外媒:微信小程序顺应“APP中启动APP”的行业潮流

BI中文站 11月30日报道 上周&#xff0c;中国网络巨头腾讯的高级副总裁张小龙对外披露了一些照片&#xff0c;显示聊天工具微信开始整合“小程序”。这一功能可以让微信的用户在无需下载软件的基础上&#xff0c;使用各种互联网应用服务&#xff0c;极大扩展微信的功能。 据外媒…

SpringMVC(笔记)

MVC简介 普通的web项目每次都要进行手动的把jar包导进去&#xff0c;否则会报500&#xff0c;class not found [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VstjHhuz-1609824493673)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images…

php 去掉url中的index.php,php 去掉url中的index.php

php去掉url中的index.php的方法&#xff1a;首先打开相应的代码文件&#xff1b;然后将if代码块嵌套在server代码块中&#xff1b;最后重启nginx服务器即可。本文操作环境&#xff1a;nginx1.0.4系统、PHP7.1版&#xff0c;DELL G3电脑nginx服务器去掉url中的index.php将if代码…

在ASP.NET Core中使用百度在线编辑器UEditor

0x00 起因 最近需要一个在线编辑器&#xff0c;之前听人说过百度的UEditor不错&#xff0c;去官网下了一个。不过服务端只有ASP.NET版的&#xff0c;如果是为了能尽快使用&#xff0c;只要把ASP.NET版的服务端作为应用部署在IIS上就可以立即使用了。不过我的需求并不急&#xf…

如何用TypeScript开发微信小程序

微信小程序来了&#xff01;这个号称干掉传统app的玩意儿虽然目前处于内测阶段&#xff0c;不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了。 工具和文档可以参考官方文档&#xff1a;https://mp.weixin.qq.com/debug/wxadoc/dev/?t1477926804193 Type…

八幅漫画理解使用JSON Web Token设计单点登录系统

上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。我尝试用八幅漫画先让大家理解如何设计正常的用户认证系统&#xff0c;然后再延伸到单点登录系统。 如果还没有阅读《JSON Web Token - 在Web应用间安全地传递信息》&…

pg和oracle比较,Oracle与PostgreSQL使用差异对比与总结

JDBC连接&#xff1a;Oracle的jdbc连接字符串&#xff1a;db.urljdbc:oracle:thin:192.168.1.1:1521:ORCLPostgresql的连接字符串&#xff1a;db.urljdbc:postgresql:192.168.1.1:5432/database1、基本数据类型差异OraclePostgreSQLVarchar2varcharnumbernumericdatetimestamp/…

hibernate+struts2整合jar包冲突

前几天&#xff0c;在用HibernateStruts2做项目的时候遇到了一个很棘手的问题&#xff0c;jar包冲突&#xff01;&#xff01;&#xff01;先亮一下错误&#xff1a; 之前还不知道这是个啥错误&#xff0c;经过上网查找之后才知道这是jar包冲突的问题&#xff01;&#xff01;由…

在ASP.NET Core中实现一个Token base的身份认证

以前在web端的身份认证都是基于Cookie | Session的身份认证, 在没有更多的终端出现之前&#xff0c;这样做也没有什么问题&#xff0c;但在Web API时代&#xff0c;你所需要面对的就不止是浏览器了&#xff0c;还有各种客户端&#xff0c;这样就有了一个问题&#xff0c;这些客…

php 运算器,运算器的功能是什么

运算器的功能是加、减、乘、除四则运算&#xff0c;与、或、非、异或等逻辑操作&#xff0c;以及移位、比较和传送等操作&#xff0c;运算器的处理对象是数据&#xff0c;所以数据长度和计算机数据表明方法&#xff0c;对运算器的性能影响极大。本文操作环境&#xff1a;Window…

.NET Standard 2.0:整齐划一的目标

在两个月前公布.NET Standard 2.0时&#xff0c;微软认为新版标准的目标在于为现有的三个主要.NET平台&#xff1a;.NET Framework、.NET Core&#xff0c;以及Xamarin提供一个坚实的底层基础&#xff0c;并为未来满足树莓派或IoT等全新类型设备需求可能需要创建的分支提供支持…

两年来的core折腾之路几点总结,附上nginx启用http2拿来即用的配置

为什么要迁移&#xff0c;江湖上传说windows server的稳定性不如某某某&#xff0c;这类议题与八卦新闻没两样&#xff0c;不谈&#xff0c;如果windows的价钱能够和linux相同或者差异不至于那么大&#xff0c;我才懒得换&#xff0c;因为穷&#xff0c;这才是重点。 涉及IO路径…

Vue(笔记)

所有东西必须都在标签里面进行定义&#xff0c;都在div中 报错后不断npm和cnpm Vue简介 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架&#xff0c;发布于2014年2月。与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关…

java通过poi读取excel中的日期类型数据或自定义类型日期

java通过poi读取excel中的日期类型数据或自定义类型日期 Java 读取Excel表格日期类型数据的时候&#xff0c;读出来的是这样的 12-十月-2019&#xff0c;而Excel中输入的是 2019/10/12 或 2019-10-12 poi处理excel时&#xff0c;当excel没有明确指明是哪个类型的数据时&…

微软的FreeBSD社区推广活动 北京站,你没看错!微软现在是一家名副其实的开源公司

自2012年开始&#xff0c;微软云计算与企业事业部和Citrix思杰&#xff0c;NetApp达成合作&#xff0c;共同开发出第一版针对Hyper-V虚拟设备驱动以及相关的用户态程序&#xff0c;并将此称之为集成服务 (Integration Service) 。微软也紧密地和FreeBSD社区合作&#xff0c;所有…

别羡慕别人的舒服,静下心来坚持奋斗!!!

通常给家里打电话的时候是晚上23点之后&#xff0c;因为家里也知道我这边忙&#xff0c;我也知道家里23点之前也在忙&#xff0c;所以选择在23点之后和家里联系联系&#xff0c;聊聊家常。自从到济南3年之久&#xff0c;即使在忙也每隔3-5天就给家里通一次电话&#xff0c;每次…