只用了三天就入门了Vue3？

"真的我学Vue3，只是为了完成JAVA课设"

环境配置

使用Vue3要去先下载Node.js。

就像用Python离不开pip包管理器一样。

Node.js — Run JavaScript Everywhere (nodejs.org)

下完Node.js去学习怎么使用npm包管理器，放心你只需要学一些基础的命令行就好了，不会很难，就像pip会个pip install就差不多了。npm教程如下，作者觉得讲的很不错，用最短的时间讲明白了。

【npm 包管理工具教程】 https://www.bilibili.com/video/BV1CQ4y167oc/?share_source=copy_web&vd_source=8080cb5e2e41cde7ff5bda650278c876

 Hello Vue3

我们打开VsCode选择一个文件夹作为工作文件夹，在左上角新建一个终端，在命令行里面输入npm install -g @vue/cli，安装Vue.js。

npm install -g @vue/cli

确定安装好Vue.js后，再在命令行里面输入npm create vue@latest。输入这行命令行后会出现如下图的表单全部都填否，因为一般新手也用不上好吧。

npm create vue@latest

然后我们跟着命令行里面的提示操作一步步来，在命令行里面先后输入 cd 你刚刚填表单项目的名字 然后 npm install 然后 npm run dev，最后访问网址即可完成Hello Vue3。

可以找到创建项目里面的App.vue文件，去修改里面的HelloWorld的msg改为你的话语。 

工程目录规范

以下是我个人开发课程设计时，Vue的目录规范命名。

往往一个好的规范命名与规范位置习惯，会省去开发中大部分的麻烦。

  • assets：用于放置静态资源，比如：图片，视频，logo等。
  • api：用于放置请求后端资源的ajax或axios接口函数。
  • router：用于放置Vue的路由配置。
  • components：用于放置自己写的Vue组件。
  • views：用于放置自己写的Vue页面。 

“学Vue3我更喜欢跟着做一些东西，而不是纯纯学语法。”

正如上面所说的那样，学东西主要是为了用起来，边学边用是最好的，很多时候，你可能都不用学那么懂，就能写出能用的代码。接下来我会带着大家做几个简单的页面，主要是入门，入门的话我们只需要关注红色画框的一部分文件夹就好了，其余文件夹都不用管。

饿了么组件element plus

element plus是一个前端的组件库，就很多东西别人都写好了，你直接拿过来用就好了。想在自己的Vue项目里面使用这个组件库也很简单，首先命令行npm install element-plus --save，下载element-plus。

npm install element-plus --save

 然后在main.js里面导入我们下载好的element plus组件库就好了。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)icon-default.png?t=N7T8https://element-plus.org/zh-CN/

登录界面

我们在views目录下新建一个Vue文件叫做login.vue，然后里面的内容如下。

<script setup>
import {ref} from 'vue'
const id = ref("")
const ps = ref("")
// id 与 ps为响应式变量
// 为什么是const
// id可以看作是一个C的指针
// id.value才是里面放的数据
</script><template><el-form><el-form-item label="用户名"><el-input v-model="id"></el-input><!-- 把id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="ps"></el-input><!-- 把ps绑定到这个输入框内 --></el-form-item></el-form><div class="my">{{ id }}</div><div class="my">{{ ps }}</div>
</template><style>.my{background-color: wheat;}
</style>

然后把App.vue的内容改成下面这个样子。

<script setup>
import LoginVue from '@/views/login.vue'
</script><template><LoginVue/>
</template>

运行后的效果如下：

数据模型/双向绑定

然后你会发现你在输入框输入的内容会在div里面动态展示出来，这就是响应式变量的作用，也就是Vue所谓的数据模型的双向绑定，意思是有一个响应式变量叫做id，它绑定了第一个输入框，然后这个输入框输入数据的同时，也会改变id.value的值。

Vue文件的结构

看完直观的前端，再说说Vue文件的结构吧，很好理解，一个Vue文件由三大结构组成script，template，style。你完全可以理解为是JS，HTML，CSS。

接着我们给我们的login.vue把按钮搞上去，尝试给按钮绑定一个点击事件好吧，然而按钮的template部分我们也不用自己写，直接去element plus的官网去复制粘贴。

 <el-button type="primary">Primary</el-button>

更改后的login.vue如下：

<script setup>
import {ref} from 'vue'const id = ref("")
const ps = ref("")
// id 与 ps为响应式变量const loginF = ()=>{alert("用户尝试登录")
}</script><template><el-form><el-form-item label="用户名"><el-input v-model="id"></el-input><!-- 把id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="ps"></el-input><!-- 把ps绑定到这个输入框内 --></el-form-item></el-form><el-button type="primary" @click="loginF">Primary</el-button><!-- 把loginF函数绑定在这个按钮上 通过@click --><div class="my">{{ id }}</div><div class="my">{{ ps }}</div>
</template><style>.my{background-color: wheat;}
</style>

按钮的点击事件绑定

通过代码，我们不难发现，我们可以通过@click="函数名"进行按钮的事件绑定， 也就是说想点击按钮之后执行哪个函数，我们就只需要把函数名放在@click的里面就好了，是不是很简单。其实到这里，基本的登录已经问题不大了，剩下的无非是axios或ajax的事情了。

既然登录表单都有了，那么注册表单肯定也不能落下对吧。所有又对login.vue进行一个改进。

<script setup>
import {ref, reactive} from 'vue';const id = ref("")
const ps = ref("")
// id 与 ps为响应式变量const ShowEnrollForm = ref(false)
//是否展示注册表单？const enrollForm = reactive({id:null,ps:null,surePs:null
})
// reactive与ref都可以创造响应式变量
// 不同的是reactive多用于创造 对象式响应式变量 如表单
// ref多用于创造 一般变量 如 ShowEnrollForm
// 且ref创造的响应式变量 需要.value来访问里面的值 
//但是用reactive创造的不用 只需要 enrollForm.idconst loginF = ()=>{alert("用户尝试登录")alert(id.value)
}const enrollF = ()=>{alert("用户尝试注册")alert(enrollForm.id)
}</script><template><el-form v-model="enrollForm" v-if="ShowEnrollForm"><el-form-item label="注册用户名"><el-input v-model="enrollForm.id"></el-input><!-- 把enrollForm.id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="enrollForm.ps"></el-input><!-- 把enrollForm.ps绑定到这个输入框内 --></el-form-item><el-form-item label="确认密码"><el-input v-model="enrollForm.surePs"></el-input><!-- 把enrollForm.surePs绑定到这个输入框内 --></el-form-item><el-form-item><el-button type="primary" @click="ShowEnrollForm=false">返回</el-button><el-button type="primary" @click="enrollF">注册</el-button></el-form-item></el-form><el-form v-else><el-form-item label="登录用户名"><el-input v-model="id"></el-input><!-- 把id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="ps"></el-input><!-- 把ps绑定到这个输入框内 --></el-form-item><el-form-item><el-button type="primary" @click="loginF">登录</el-button><el-button type="primary" @click="ShowEnrollForm=true">注册</el-button></el-form-item></el-form>
</template>

v-if有啥用？

v-if="表达式"，如果表达式为真，那么就渲染这个组件，如果表达式为假，就不渲染这个组件。在这个示例里面，我们通过ShowEnrollForm这个响应式变量的真值来控制展示登录表单还是注册表单，并通过按钮的点击可以改变ShowEnrollForm的变量值。

reactive与ref都可以创造响应式变量
不同的是reactive多用于创造对象式响应式变量，如表单。ref多用于创造一般变量，如 ShowEnrollForm。且ref创造的响应式变量需要.value来访问里面的值 ，但是用reactive创造的不用 ，只需要 enrollForm.id。

用户界面

我们在views目录下新建一个Vue文件叫做index.vue，然后里面的内容如下。

<script setup>const tableData = [{date: '2016-05-03',name: '小猫',address: '听安',},{date: '2016-05-02',name: '老弟',address: '晚安',},{date: '2016-05-04',name: '肘击',address: '云隐',},{date: '2016-05-01',name: '虚化狗',address: '木叶',},
]</script><template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template>

然后把App.vue文件进行一定的修改。

<script setup>
import LoginVue from '@/views/login.vue'
import IndexVue from './views/index.vue';
</script><template><!-- <LoginVue/> 相当于不展示登录页面了--><IndexVue/>
</template>

:data是啥？

: data也是一种数据绑定，与v-model性质是一样的，就是说把tableData这个对象绑定到了表格的data属性上去了，然后prop="键"，就是说这一列要展示tableData对象的哪个键。

发现大问题

我们虽然成功展示了用户界面，但是登录界面却看不到了，这不妥妥就是捡了芝麻，丢了西瓜嘛，好比霸体后按通灵，用户界面把登录界面顶了。 这个时候我们就要用到路由了。于是我们又得先下载一个模块，npm i vue-router@4。

npm i vue-router@4

我们在router目录下新建一个JS文件叫做index.js，然后里面的内容如下。

import { createRouter, createWebHistory } from "vue-router";import LoginVue from '@/views/login.vue'
import IndexVue from '@/views/index.vue';//定义路由关系
const routes = [{ path: '/', component: LoginVue },{ path: '/index', component: IndexVue }
// 意思是在/这个路由下我要展示LoginVue这个Vue
// 在/index这个路由下我要展示IndexVue这个Vue
]//创建路由器
const router = createRouter({history: createWebHistory(),routes: routes
})export default router;

然后修改main.js和App.vue的内容。


import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

<script setup></script><template><router-view></router-view>
</template>

“好像没啥问题了？感觉已经能用Vue进行简单的页面开发了。” 

那么用户界面怎么知道登录界面是哪个用户登录的呢？

因为login.vue与index.vue是两个vue文件，它们创建的响应式变量都只能在自己的Vue文件中使用并不可以跨Vue使用，所以index.vue是不能获取到login.vue的id.value的。

这个时候就需要下载一个模块pinia，用于存储我们想要跨Vue使用的数据。

 npm i pinia

 pinia-persistedstate-plugin是让pinia存储的数据持久化，不至于说是刷新一下页面，存储的数据就清空了，这一点的话，读者可以自证试一试。

npm i pinia-persistedstate-plugin

首先我们要导入刚刚下载的模块，修改main.js文件。


import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'const app = createApp(App)
const pinia = createPinia()
const persist = createPersistedState()
pinia.use(persist)
app.use(pinia)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

 然后，我们在api目录下新建一个JS文件叫做save.js，然后里面的内容如下。

import { defineStore } from 'pinia';
import { ref } from 'vue';export const idC = defineStore('idC', () => {const innerId = ref("");const setId = (newId) => {innerId.value = newId;}const delId = () => {innerId.value = "";}return {innerId, setId, delId}
},{persist: true// 是否持久化 });

最后，就是更新login与index的代码。

<script setup>
import { idC } from '@/api/save';
const Id = idC()
// 获取Id容器const tableData = [{date: '2016-05-03',name: '小猫',address: '听安',},{date: '2016-05-02',name: '老弟',address: '晚安',},{date: '2016-05-04',name: '肘击',address: '云隐',},{date: '2016-05-01',name: '虚化狗',address: '木叶',},
]</script><template><div>登录页面的Id是{{ Id.innerId }}</div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template>
<script setup>
import {ref, reactive} from 'vue';
import { idC } from '@/api/save';
//引入存储id的容器
const Id = idC()import {useRouter} from 'vue-router';
//引入路由 实现页面跳转
const router = useRouter()const id = ref("")
const ps = ref("")
// id 与 ps为响应式变量const ShowEnrollForm = ref(false)
//是否展示注册表单？const enrollForm = reactive({id:null,ps:null,surePs:null
})const loginF = ()=>{alert("用户尝试登录")alert(id.value)Id.setId(id.value)//把登录界面的id.value放到Id容器中router.push("/index")//实现页面跳转到路由/index
}const enrollF = ()=>{alert("用户尝试注册")alert(enrollForm.id)
}</script><template><el-form v-model="enrollForm" v-if="ShowEnrollForm"><el-form-item label="注册用户名"><el-input v-model="enrollForm.id"></el-input><!-- 把enrollForm.id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="enrollForm.ps"></el-input><!-- 把enrollForm.ps绑定到这个输入框内 --></el-form-item><el-form-item label="确认密码"><el-input v-model="enrollForm.surePs"></el-input><!-- 把enrollForm.surePs绑定到这个输入框内 --></el-form-item><el-form-item><el-button type="primary" @click="ShowEnrollForm=false">返回</el-button><el-button type="primary" @click="enrollF">注册</el-button></el-form-item></el-form><el-form v-else><el-form-item label="登录用户名"><el-input v-model="id"></el-input><!-- 把id绑定到这个输入框内 --></el-form-item><el-form-item label="密码"><el-input v-model="ps"></el-input><!-- 把ps绑定到这个输入框内 --></el-form-item><el-form-item><el-button type="primary" @click="loginF">登录</el-button><el-button type="primary" @click="ShowEnrollForm=true">注册</el-button></el-form-item></el-form></template><style>.my{background-color: wheat;}
</style>

 

Vue开发心得

学完Vue3，也是完成了JAVA课程设计的Vue项目好吧。说说开发心得吧。其实开发Vue无非就是先想好自己页面上需要有什么东西，比如：登录界面需要一个表单，用户界面需要表格。然后我们就去element plus找对应的代码，改一改就能用了。最后完善JS那部分的逻辑，和绑定按钮事件，其实就没什么了。

 

 

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

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

相关文章

React: memo

React: memo

React.memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 const MemoizedComponent memo(SomeComponent, arePropsEqual?)React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件&#xff0c;当它的父组件重新渲染时&#xff0c;只要它的新…
阅读更多...
「ETL实战」搭建数仓，解决多源业务系统关联分析难题（定制化业务）

「ETL实战」搭建数仓，解决多源业务系统关联分析难题（定制化业务）

在大数据分析盛行的今天&#xff0c;关联分析作为数据挖掘和业务洞察的重要手段&#xff0c;受到了极大关注。然而&#xff0c;随着数据量的激增和源业务系统的复杂性增加&#xff0c;关联分析的性能问题逐渐成为了一个不可忽视的挑战。 本文将介绍借助ETL工具&#xff0c;如何…
阅读更多...
Ardupilot Rpanion 4GLTE 网络性能测试 - 国内中转

Ardupilot Rpanion 4GLTE 网络性能测试 - 国内中转

Ardupilot Rpanion 4GLTE 网络性能测试 - 国内中转 1. 源由2. 视频效果2.1 整体刷新率不高2.2 网络延迟可接受2.3 带宽增加丢包明显2.4 实测效果流畅 3. 总结 1. 源由 上一次&#xff0c;由于ZeroTier使用了国外服务器&#xff0c;延迟~ 569 ms&#xff0c;花屏、卡顿。 本着…
阅读更多...
谷歌Gemini时代来了！加固搜索护城河、赋能全家桶，Gemini 1.5 Pro升级至200万token

谷歌Gemini时代来了！加固搜索护城河、赋能全家桶，Gemini 1.5 Pro升级至200万token

3 月中旬&#xff0c;谷歌宣布 Google I/O 定档北京时间 5 月 15 日凌晨 1 点。而当大会开幕时间临近&#xff0c;本应是讨论度最高的时候&#xff0c;「宿敌」OpenAI 却半路杀出&#xff0c;抢先一天&#xff0c;仅耗时 27 分钟就发布了颠覆性巨作 GPT-4o&#xff0c;将新一轮…
阅读更多...
数据结构与算法-排序算法3-插入排序

数据结构与算法-排序算法3-插入排序

目录 1.插入排序&#xff1a; 1.介绍&#xff1a; 2.动态图解 3.举例 4.小结插入排序规则 5.插入排序代码 6.运行时间 代码&#xff1a; 运行结果&#xff1a; 1.插入排序&#xff1a; 1.介绍&#xff1a; 数组中n个元素&#xff0c;把这n个待排序元素看成一个有序序…
阅读更多...
虚拟化技术 在vCenter Server创建数中心、添加主机

虚拟化技术 在vCenter Server创建数中心、添加主机

一、实验内容 1.安装Flash 2.在vCenter Server创建数中心、添加主机 二、实验主要仪器设备及器材 1.安装有64位Windows操作系统的台式电脑或笔记本电脑&#xff0c;建议4C8G或以上配置 2.在Windows Server 2008 R2已安装vCenter Server 3.Adobe Flash Player 12.0.0.70.e…
阅读更多...
Tomcat Server无法连通的调试方法1

Tomcat Server无法连通的调试方法1

作者&#xff1a;私语茶馆 1.局域网Tomcat服务不通 组网如下&#xff1a; 问题&#xff1a; Tomcat Server 服务方式启动后&#xff0c;无法访问&#xff0c;但命令行方式启动可以。IP地址都在同网段或不同网段现象都一样。 调试手段&#xff1a; &#xff08;1&#xff09;…
阅读更多...
基于Django实现的（bert）深度学习文本相似度检测系统设计

基于Django实现的（bert）深度学习文本相似度检测系统设计

基于Django实现的&#xff08;bert&#xff09;深度学习文本相似度检测系统设计 开发语言:Python 数据库&#xff1a;MySQL所用到的知识&#xff1a;Django框架工具&#xff1a;pycharm、Navicat、Maven 系统功能实现 登录页面 注册页面&#xff1a;用户账号&#xff0c;密码…
阅读更多...
HyperLogLog的使用做UV统计

HyperLogLog的使用做UV统计

使用Jedis连接Redis并操作HyperLogLog import redis.clients.jedis.Jedis;public class RedisHyperLogLogExample {public static void main(String[] args) {// 连接到本地的Redis服务Jedis jedis new Jedis("localhost", 6379);String hyperLogLogKey "hll…
阅读更多...
智慧安防监控EasyCVR视频汇聚管理平台视频播放花屏的原因分析及处理

智慧安防监控EasyCVR视频汇聚管理平台视频播放花屏的原因分析及处理

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…
阅读更多...
机器学习实战宝典：用scikit-learn打造智能应用

机器学习实战宝典：用scikit-learn打造智能应用

书接上文——《数据探险家的终极指南&#xff1a;用Python挖掘机器学习的奥秘》 前文我们在这段精彩的机器学习探险之旅中&#xff0c;从基础概念出发&#xff0c;深入探索了使用Python和scikit-learn库进行数据分析和模型构建的全过程。 我们首先了解了机器学习的基本原理&am…
阅读更多...
47 tcp网络程序

47 tcp网络程序

网路聊天 API详解 下面用到的API&#xff0c;都在sys/socket.h中 socket (): socket() 打开一个网络通讯端口&#xff0c;如果成功的话&#xff0c;就像open() 一样返回一个文件描述符应用程序可以像读文件一样用read/write在网络上收发数据如果调用出错返回-1对于IPv4&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023