只用了三天就入门了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.id

const 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那部分的逻辑,和绑定按钮事件,其实就没什么了。

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】数据结构大汇总 {数据结构的分类总结:定义和特性、实现方式、操作与复杂度、适用场景、相关算法、应用实例}

一、线性结构 1.1 顺序表 定义和特性&#xff1a;顺序表是一种线性表的存储结构&#xff0c;它采用一段地址连续的存储单元依次存储线性表中的元素。顺序表具有随机访问的特性&#xff0c;即可以通过元素的下标直接访问元素。 实现方式&#xff1a;顺序表可以通过数组来实现&…

React Native 之 原生组件和核心组件(二)

原生组件 在 Android 开发中是使用 Kotlin 或 Java 来编写视图&#xff1b;在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。在 React Native 中&#xff0c;则使用 React 组件通过 JavaScript 来调用这些视图。在运行时&#xff0c;React Native 为这些组件创建相应的 …

第1章 初始Spring Boot【仿牛客网社区论坛项目】

第1章 初始Spring Boot【仿牛客网社区论坛项目】 前言推荐项目总结第1章初识Spring Boot&#xff0c;开发社区首页1.课程介绍2.搭建开发环境3.Spring入门体验IOC容器体验Bean的生命周期体验配置类体验依赖注入体验三层架构 4.SpringMVC入门配置体验响应数据体验响应Get请求体验…

Java应用程序的本地内存跟踪分析

本文将讨论本机内存跟踪 (NMT)&#xff0c;我们可以使用它来隔离在 VM 级别增长的任何异常内存。 1.什么是本机内存&#xff1f; 本机内存是指计算机系统上运行的应用程序或程序可直接访问的内存空间。它是程序在执行期间存储和操作数据的内存区域。本机内存不同于托管内存&a…

实物仿真平台设计方案:927-8路GMSL视频注入回灌的自动驾驶半实物仿真平台

8路GMSL视频注入回灌的自动驾驶半实物仿真平台 一、平台介绍 产品基于8路GMSL视频注入回灌的自动驾驶半实物仿真平台旨在提高实验室及研究生院师生在基础软件层开发、计算机视觉和深度学习方面的专业知识学习和实践能力&#xff0c;为师生提供一个稳定软件开发和多精度框…

【C++】认识C++(上)

目录 从C到C命名空间同名冲突命名空间的定义命名空间的使用 C的输入和输出缺省参数&#xff08;默认参数&#xff09; 从C到C C语言的出现是计算机科学和工程史上的一个重要里程碑&#xff0c;许多现代计算机语言都受C语言的影响。C语言是面向过程的&#xff0c;结构化和模块化…

优选算法——双指针2

题目一——有效三角形的个数 思路 先审题 举个例子&#xff0c;下面一个序列可分成4个三元组 然后我们论证哪个可以组成三角形即可 判断三个数能不能组成三角形&#xff1a;任意两边之和大于第三边 注意第一个和第四个&#xff0c;有人说&#xff0c;这不是两个相同的吗&#…

【opencv】opencv透视变换和ocr识别实验

实验环境&#xff1a;anaconda、jupyter notebook 实验用到的包opencv、numpy、matplotlib、tesseract 一、opencv透视变换 原图 图片是我拍的耳机说明书&#xff0c;哈哈哈哈&#xff0c;你也可以使用自己拍的照片&#xff0c;最好是英文内容&#xff0c;tesseract默认识别英…

JVM运行时内存整体结构一览

文章目录 Java 虚拟机 (JVM) 运行时内存由程序计时器, 堆, 方法区, 本地方法栈, 虚拟机栈,构成 Java 虚拟机 (JVM) 运行时内存布局主要包括以下几个部分&#xff1a; 程序计数器 (Program Counter Register): 每个线程都有一个程序计数器&#xff0c;它是当前线程执行的字节码…

【js逆向】易车网JS逆向案例实战手把手教学(附完整代码)

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

删除表空间

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 当某个表空间中的数据不再需要时&#xff0c;或者新创建的表空间不符合要求时&#xff0c;可以考虑删除这个表空间。若要删除表空间&#xff0c;则需要用户具有 DROP TABLESP…

OpenNJet产品体验:探索无限可能

文章目录 前言一、OpenNJet是什么&#xff1f;二、OpenNJet特性和优点三、OpenNJet功能规划四、OpenNJet快速上手五、OpenNJet的使用总结 前言 现代社会网络高速发展&#xff0c;同时也迎来了互联网发展的高峰&#xff0c;OpenNJet作为一个基于NGINX的面向互联网和云原生应用提…

【C语言每日题解】三题:回文检查、刘备 关羽 张飞三人过年放鞭炮、犹太人死亡游戏(难度up,推荐⭐✨)

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f308;感谢大家的阅读、点赞、收藏和关注 &#x1f970;希望大家喜欢我本次的讲解 &#x1f31f;非常推荐最后一道题 &#x1f339; 犹太人死亡游戏&#xff0c;建议观看 &…

20240514,算法(算数生成,集合)

还有一个大案例&#xff0c;那个就不急了&#xff0c;完结撒花&#xff0c;起码C是打代码没什么大问题的完结&#xff0c;不像C&#xff0c;还要我返工/笑哭 常用算数生成算法 属于小算法&#xff0c;头文件 #include <numeric> accumulate //计算容器累计总和fill /…

考研数学|李林《880》PK李永乐《660》,你用对了吗?

建议先在强化之前做660&#xff0c;然后在强化的时候再做880。 660整体难度属于基础阶段到强化阶段。而且是选填部分的题目&#xff0c;所以还是要做一些其他题 然后说一下推荐的习题册&#xff1a;基础不好先做1800、强化之前660&#xff0c;强化可选880/1000题。但是传统习题…

FPGA - Xilinx系列高速收发器---GTX

1&#xff0c;GTX是什么&#xff1f; GT &#xff1a;Gigabit Transceiver千兆比特收发器&#xff1b; GTX &#xff1a;Xilinx 7系列FPGA的高速串行收发器&#xff0c;硬核 xilinx的7系列FPGA根据不同的器件类型&#xff0c;集成了GTP、GTX、GTH、GTZ四种串行高速收发器&am…

Ansible自动化运维中的User用户管理模块应用详解

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月14日14点12分 在Ansible中&#xff0c;user 模块主要用于管理系统用户账户。它可以创建、修改、删除用户&#xff0c;并管理用户的属性&#xff0c;比如密码、…

深⼊理解指针(5)

目录 1. 回调函数是什么&#xff1f;1.1 使用回调函数修改 2. qsort使⽤举例2.1 使⽤qsort函数排序整型数2.2 使⽤qsort排序结构数据按年龄排序2.3 使⽤qsort排序结构数据按名字排序2.4整体代码 3. qsort函数的模拟实现3.1 整型数组的实现3.2 结构体按名字排序实现3.3 结构体按…

Element Plus组件库使用组件自动导入后样式不生效的问题

首先按照官方文档上的介绍进行配置&#xff1a;快速开始 | Element Plus (element-plus.org) 配置完成后&#xff0c;去组件中去测试组件库中的button组件的样式是否生效 <template><el-button type"primary">Primary</el-button> </template&…

从源头到洞察:大数据时代的数据提取与分析实战指南

随着科技的飞速发展&#xff0c;大数据已经成为现代社会的核心驱动力之一。从商业决策到科学研究&#xff0c;从政策制定到个人生活&#xff0c;数据无处不在&#xff0c;影响着我们的每一个决策。然而&#xff0c;如何从海量的数据中提取有价值的信息&#xff0c;并转化为深刻…