【javaWeb 第三篇】Vue快速入门

VUE

vue是一套前端框架，免除原生的js的DOM操作，简化书写

基于MVVM（model-view-viewmodel）思想，实现数据的双向绑定，将编程的关注放在数据上。

什么是框架：

框架相当于一个半成品，是一套高效的代码模板，基于框架开发更加的高效

VUE数据绑定模型：
双向数据绑定

model层中存在着对数据的处理，view说白了就是html界面，两者通过桥梁（viewmodel）进行双向绑定，数据发生变化，页面也会随之发生变化，相同，页面发生变化，数据同样会发生变化

数据绑定：

<html><script src=" ../js/vue.js"></script>
</html>
<body><div id="app"><input type="text" v-model="message">{{message}}</div><script>new Vue({el:"#app",data:{message:"hello "}})</script>
</body>

date中标定的是数据模型，而el相当于id选择器，div中id与#后的id相等，表名此处有vue接管，v-model后message相当于数据绑定，{{}}是差值表达式，是将数据可视化到html界面中

  • 差值表达式
    形式：{{表达式}}
    表达式内容可以是：变量，三元运算符，函数调用，算数运算

vue常用指令

常用指令

  • v-bind 绑定href：
<body><div id="app"><a v-bind:href="URL">连接 </a>v-bind可以简化为：herf</div><script>new Vue({el:"#app",data:{URL:"http://www.baidu.com"}})</script>

v-model用于表单元素的数据双向绑定
注意：
通过v-bind与v-model绑定的变量，必须在数据模型中声明

  • v-on
    v-on click可以简写为@click
    <div id="app"><input type="button" value="按钮" v-on:click="handle()">   </div><script>new Vue({el:"#app",data:{URL:"http://www.baidu.com"}methods:{handle:function(){alert("点击以下"); }},})</script>
  • v-if
    条件渲染，根据条件判断语句进行页面条件渲染
年龄{{age}},经判定为：
<span v-if="age<=35">年轻人</span>
<span v-else-if="age>35&&age<60">中年人</span>
<span v-else>老年人</span>
  • v-show
    同样通过判断进行条件渲染
年龄{{age}}，经判定为：
<span v-show="age<=35">年轻人</span>

v-if与v-show的区别：
v-if通过条件进行渲染，如果条件为false，则不进行渲染，而v-show是都进行渲染，如果条件为false时，属性中的display属性将会不显示该渲染内容

  • v-for
    列表渲染，遍历容器中的元素或者对象的属性
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>数据模型为：
data{
addrs:['北京','上海','广州','深圳'] 
}
  • vue生命周期

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（）
生命周期
生命周期图：
生命周期图

  • mounted 挂载完成：
    常用来向服务端请求数据
<script>
new vue(){
el: "#app",
data:{},
mounted(){
console.log("挂载完成，请求数据 ")
}
}
</script>

ajax

异步的js和xml

作用：
数据交换：通过ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术

  • 同步与异步的区别：
    同步
    同步需要等待服务端进行响应，在响应期间，前端处于等待状态
    异步
    异步操作，在服务器端进行处理的时候前端还能够执行其他操作
    原生的ajax请求：
Function loadDoc()function loadDoc() {
//创建对象var xhttp = new XMLHttpRequest();//获取服务器响应数据xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML = this.responseText;}};发送异步请求xhttp.open("GET", "ajax_info.txt", true);xhttp.send();
}

创建一个XMLHttpRequest对象用来交互数据，当对象中的状态发生变化的时候调用函数，进行判断，如果符合条件，将以字符串的形式返回到html当中

  • axios

对原生的ajax进行了封装，简化书写，快速开发

axios官方文档:
https://www.axios-http.cn/
当使用axios时需要引入axios文件

<script src="js/axios-0.18.0.js"></script>

使用axios发送请求，并获取响应数据

axios({
method:"get",
url:"..."
}).then((result)=>{
console.log(result.data);
});

为了方便还可以通过别名来进行操作：
在这里插入图片描述

axios.get("...url...").then((result)=>{
console.log(result.data);
});

基于vue的ajax动态加载展示：
数据的准备：http://yapi.smart-xwork.cn/mock/169327/emp/list
在页面加载后，自动发送异步请求，加载数据，渲染展示界面

<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后的操作</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index+}}</td><td>{{emp.name}}</td><td><img v-bind:src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender==1">男</span><span v-if="emp.gender==2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div><script>new Vue({el:"#app",data:{emps:[]},mounted() { //发送异步请求，加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{this.emps=result.data.data;})},});</script>
</body>
  • 前后端分离开发

前后端由两个团队进行分别开发，前端向后端发送请求，后端响应前端数据，为了便于统一需要制定统一的开发规范，开发贵伐统一写在文档之中

文档称为接口文档，这里的接口指的是业务功能

前后端分离
前端开发人员与后端开发人员共同查阅接口文档，前端开发人员通过接口文档将参数传递给后端，后端开发人员将接收参数并将数据传回给前端开发人员

  • 接口文档的维护
    接口文档分为线上维护和线下维护，在线方式通过一些在线的接口文档管理平台进行维护，离线的方式是线下通过办公软件进行维护
    接口文档通过项目经理通过需求分析以及页面文档进行提供

  • 一段功能的开发流程：
    首先通过需求分析，然后定义接口（API接口文档），然后通过前后端并行开发，通过前后端测试，最后通过前后端的联调测试

+Yapi

高效，易用的api管理平台，旨在为开发，产品，测试人员提供更优雅的接口管理服务

地址：https://yapi.pro/login
功能：API接口管理，mock服务（模拟测试数据，用于前端功能测试）
如何使用这个平台：
第一步：添加项目
添加项目

第二步：添加接口分类
添加接口分类
添加分类有助于不同的功能模块的管理

第三步：添加接口
在添加的分类上创建接口

  • 前端工程化
    指在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化
    而在使用vue进行开发的过程中如何完成前端工程化，采用vue脚手架vue-cli

vue-cli

是官方提供的一个脚手架，用于快速生成一个vue项目模板

cli脚手架功能：

  1. 统一的目录结构
  2. 本地调试
  3. 热部署（应用程序变动，不需要再次运行就能加载程序）
  4. 单元测试
  5. 集成打包上线
    依赖环境：Modejs
    脚手架的使用首先需要先下载Node.js再下载脚手架
  • 通过脚手架创建vue项目
    两种方式：
    命令行：vue create vue-project01;
    图形化界面 vue ui
    在这里插入图片描述
    输入图形化界面进行创建，点击创建项目
    在这里插入图片描述
    输入项目名，包管理器作者使用的是npm
    在这里插入图片描述
    进行手动设置，选择手动
    在这里插入图片描述
    勾选Router，是项目路由
    在这里插入图片描述

选择版本作者这里使用的是vue2，vue3版本将会在后续作品中推出
检测方式选择默认第一项，进行创建
通过VSCode来打开项目

  • vue项目-目录结构
    通过脚手架创建的项目有标准的目录结构
    在这里插入图片描述
    node.models：用来存放整个项目的依赖包
    public:存放项目的静态文件
    src：存放项目的源代码
    package.json:存放项目的基本信息，以及所需要的资源，以及资源的版本信息
    vue.config.js：保存vue的配置的文件，如：代理，端口的配置

在src目录下：
在这里插入图片描述

  • vue项目启动方式
    第一种：直接在VSCode中进行操作
    在这里插入图片描述
    第二种：在当前项目目录下终端中输入：npm run serve 进行启动

  • vue配置端口号
    在vue.config.js文件当中添加devserver对象

devserver:{
port:7000,
}

完成配置

如何停掉当前正在执行的处理，按键ctrl+c进行停掉处理

Vue项目的开发流程

如果没有进行开发初始启动项目，看到的页面时默认页面index.html,在index文件当中默认引入了入口文件main.js
在main入口文件当中存在关键字import意思为引入模块
举例：

import App from './App.vue'

意思是将根组件App.vue导入到main文件中并起名为App相似的还有export，将本文件导出为模块化，便于其他组件导入
在这里插入图片描述
在main.js文件中vue创建确定一个路由，此处(在es6中属性名与属性值相同可以忽略不写)，确定一个函数remder将根组件App中的视图赋予给一个DOM对象，并挂在到#app上

Vue的组件以.vue结尾，每个组件由三个部分组成：<template>,<script>,<style>
<template>：模板部分，用来生成html代码
<script>：js代码部分
<style>： css代码部分

Vue组件库Element

组件库是饿了么团队研发的，为开发者准备的基于Vue 2.0 的桌面端组件库

组件：组成网页的各个部分，例如超链接，按钮，图片，表格，表单，分页条等
地址：https://element.eleme.cn/#/zh-CNListener

  • 入门
    安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
npm install element-ui@2.15.3

下载之后会存放在node_ modules文件当中
在vue项目中引入ElementUI组件库
在main.js入口文件中输入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

在views包下创建一个新的.vue文件，在Element官网上进行代码复制
vue项目启动后界面显示的是默认的根组件文件
如果要显示其他需要在根组件的div中引入

<element-view><element-view>
系统自动会在下方引入
import ElementView from './views/element/ElementView.vue'
在default中输入components:{ElementView},引入文件

  • Element常见组件
    表格组件
    分页组件：当表格数据量过大时配合分页组件使用
    对话框组件

  • 案例：
    根据页面原型完成员工管理的开发，并通过axios完成数据异步加载
    服务端数据获取地址: 数据地址
    步骤：
    创建页面，完成页面的整体布局规划
    布局中各个部分的组件实现
    列表数据的异步加载，并渲染展示

在Vue项目中使用Axios：
在项目中安装axios：npm install axios;
需要使用axios时，导入axios：import axios from ‘axios’;

在向表格中展示数据的时候因为数据与实际展现数据不相符使用插槽：
插槽

Vue路由

URL中的hash（#号）与组件之间的对应关系

  • Vue Router是Vue的官方路由
    组成：
    路由组成

VueRouter： 路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>(对路由中的路由表进行访问)
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
安装路由：

npm install vue-router@3.5.1

定义路由：
在router目录结构下的index.js文件中定义路由


const routes = [{path: '/emp',name: 'emp',component:() => import('../views/tits/EmpView.vue')},{path: '/element',name: 'element',component: () => import('../views/ElementView.vue')}
]
在其中配置路由信息

将路由与对应的导航栏的组件绑定

 <el-menu-item index="1-1"><router-link to="/emp">员工管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/element">部门管理</router-link></el-menu-item>

Vue打包部署

将前端打包部署到前端服务器上
首先进行打包：
点击VSCode左下角npm脚本的第二个build进行项目打包，会打包成一个dist文件
打包文件

打包生成的dist文件

打包之后再将文件部署到Nginx文件当中

Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的应用

官网：Nginx官网
下好的压缩包需要解压在一个没有中文以及空格的目录下：
nginx目录
conf：表示配置文件目录
html：表示静态资源文件目录
logs：表示日志文件目录
temp：表示临时文件目录
部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下
然后双击启动nginx：默认占用80端口号
如果出现错误：可能80端口号被占用
查询占用信息：
在这里插入图片描述
查询到占用80端口的进程id为4176可以在资源管理器中进行id进程的查询
可以更改nginx使用的端口：
在conf文件中进入nginx.conf更改端口

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

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

相关文章

修复PSINS一个不常用的函数（getgnssvp）的小bug

修复PSINS一个不常用的函数（getgnssvp）的小bug

PSINS工具箱的函数&#xff1a; vp getgnssvp(ephs, obss, tp, isfig)如上图&#xff0c;最后是绘图的标记“isfig”&#xff0c;但是实际这个标记没有用到&#xff0c;原函数内容&#xff1a; function vp getgnssvp(ephs, obss, tp, isfig) % see also findgpsobs. glob…
阅读更多...
宜搭低代码高级认证实操题2 faas连接器加密解密

宜搭低代码高级认证实操题2 faas连接器加密解密

密钥维护页-保证有一条数据 敏感信息提交页 存档页&#xff0c;只是用来存数据的审批的时候不用这个表提交数据不然会出两条 授权查看页 FaaS连接器先下载好他的示例代码然后按照要求配置好参数直接拷贝进去就行 然后需要在云开发环境里面先new一个terminal然后跑一下./builde…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual图像拼接）

上位机图像处理和嵌入式模块部署（qmacvisual图像拼接）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 qmacvisual本身提供了图像拼接的功能。功能本身比较有意思的。大家如果拍过毕业照&#xff0c;特别是那种几百人、上千人的合照&#xff0c;应该就…
阅读更多...
C++取经之路(其一)——namespace(命名空间),cout,cin(输入输出流)，缺省参数。

C++取经之路(其一)——namespace(命名空间),cout,cin(输入输出流)，缺省参数。

前言&#xff1a; 最近开始学习C了&#xff0c;所以新开一个板块来记录&#xff0c;因为知道革命一路上荆棘丛生&#xff0c;所以取名为取经之路。 namespace(命名空间): 首先我们要知道::是域作用符号默认访问全局变量。 所谓命名空间&#xff0c;我称之为保护自己的财产&am…
阅读更多...
yolov8 pose keypoint解读

yolov8 pose keypoint解读

yolov8进行关键点检测的代码如下&#xff1a; from ultralytics import YOLO# Load a model model YOLO(yolov8n.pt) # pretrained YOLOv8n model# Run batched inference on a list of images results model([im1.jpg, im2.jpg]) # return a list of Results objects# Pr…
阅读更多...
PHP全自动采集在线高清壁纸网站源码

PHP全自动采集在线高清壁纸网站源码

源码简介 集合360壁纸&#xff0c;百度壁纸&#xff0c;必应壁纸&#xff0c;简单方便。非常高清,支持全屏支持2K. 每天自动采集&#xff0c;自动更新&#xff0c;非常不错。 搭建环境 php5.6 Nginx 安装教程 上传源码压缩包到网站目录并解压即可 首页截图 源码下载 P…
阅读更多...
day5-QT

day5-QT

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QFontDialog> //字体对话框类 #include<QFont> //字体类 #include<QMessageBox> //消息对话框类 #include<QColorDialog> //颜色对话框类 #include<QColor> //颜…
阅读更多...
【爬虫基础】第1讲 网络爬虫基本知识

【爬虫基础】第1讲 网络爬虫基本知识

什么是网络爬虫 网络爬虫&#xff08;Web crawler&#xff09;是一种自动化程序&#xff0c;用于在互联网上收集信息。它可以通过扫描和解析网页的超链接&#xff0c;自动访问网页并抓取所需的数据。网络爬虫常用于搜索引擎和数据采集工具中。 作用 通过有效的爬虫手段批量采…
阅读更多...
【C语言】C语言基础习题详解（牛客网）二分查找逻辑

【C语言】C语言基础习题详解（牛客网）二分查找逻辑

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;C语言_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.三目运算符的使用 三目运算符&#xff0c;即a>b?a:b类型的&#xff0c;很多时候适当的使用三目运算符可以使得代码更简洁有序&…
阅读更多...
vs2010打包QT程序

vs2010打包QT程序

一、环境 win10 、 VS2010 、 qt5.7.1 将代码在release模式下运行 运行完后会在相应的文件夹下生成exe文件&#xff0c;也会将部分dll文件拷贝到release文件夹中 二、生成可执行文件 2.1 选择“文件”->“新建”->”项目“ 2.2 在打开的对框中选择”其他类型项目…
阅读更多...
蓝桥杯学习笔记 单词分析

蓝桥杯学习笔记 单词分析

试题 G: 单词分析 时间限制: 1.0s 内存限制: 512.0MB 本题总分:20 分 [问题描述] 小蓝正在学习一门神奇的语言&#xff0c;这门语言中的单词都是由小写英文字母组成&#xff0c;有些单词很长&#xff0c;远远超过正常英文单词的长度。小蓝学了很长时间也记不住一些单词&#xf…
阅读更多...
完全二叉树的层序遍历[天梯赛]

完全二叉树的层序遍历[天梯赛]

文章目录 题目描述思路 题目描述 输入样例 8 91 71 2 34 10 15 55 18 输出样例 18 34 55 71 2 10 15 91思路 完全二叉树最后一层可以不满&#xff0c;但上面的每一层的节点数都是满的 后序遍历的顺序为"左右根"&#xff0c;我们可以用数组模拟完全二叉树&#xff0c;…
阅读更多...
AQS源码分析

AQS源码分析

前言 AbstractQueuedSynchronizer是抽象同步队列&#xff0c;其是实现同步机器的基础组件&#xff0c;并发包中的锁的底层就是使用AQS实现的。AQS中 维护了一个volatile int state&#xff08;代表共享资源&#xff09;和一个FIFO线程等待队列&#xff08;多线程争用资源被阻塞…
阅读更多...
探索国内ip切换App：打破网络限制

探索国内ip切换App：打破网络限制

在国内网络环境中&#xff0c;有时我们会遇到一些限制或者屏蔽&#xff0c;使得我们无法自由访问一些网站或服务。而国内IP切换App的出现&#xff0c;为解决这些问题提供了非常便捷的方式。这些App可以帮助用户切换IP地址&#xff0c;让用户可以轻松地访问被限制或屏蔽的网站&a…
阅读更多...
ForkJoinPool在生产环境中使用遇到的一个问题

ForkJoinPool在生产环境中使用遇到的一个问题

1、背景 在我们的项目中有这么一个场景&#xff0c;需要消费kafka中的消息&#xff0c;并生成对应的工单数据。早些时候程序运行的好好的&#xff0c;但是有一天&#xff0c;我们升级了容器的配置&#xff0c;结果导致部分消息无法消费。而消费者的代码是使用CompletableFutur…
阅读更多...
STM32学习笔记（7_2）- ADC模数转换器代码

STM32学习笔记（7_2）- ADC模数转换器代码

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期开…
阅读更多...
稀碎从零算法笔记Day28-LeetCode：零钱兑换

稀碎从零算法笔记Day28-LeetCode：零钱兑换

前言&#xff1a;鸽了好多天了哈哈哈&#xff0c;虽然C站没更但是LC还是坚持刷的&#xff0c;任重道远啊&#xff01;(可恶的寝室熄灯) 题型&#xff1a;动态规划 链接&#xff1a;322. 零钱兑换 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述…
阅读更多...
五五复制模式：电商营销新策略，轻松打造百万用户平台

五五复制模式：电商营销新策略，轻松打造百万用户平台

你是否曾感受到平台发展的瓶颈&#xff0c;渴望找到一种有效的方式&#xff0c;快速吸引用户&#xff0c;推动平台裂变&#xff0c;进而实现百万用户的规模&#xff1f;今天&#xff0c;我要向你介绍一种创新的商业模式——五五复制模式&#xff0c;它或许能为你带来全新的启示…
阅读更多...
Chrome 插件各模块之间的消息传递

Chrome 插件各模块之间的消息传递

Chrome 插件各模块之间的消息传递 一、消息传递 1. 消息传递分类 Chrome 插件的 Action、Background 和 content_script 三个模块之间的信息传输插件和插件之间的信息传输网页向插件进行信息传输与原生应用进行消息传递 2. 消息传递 API runtime API runtime.sendMessage(…
阅读更多...
Swift知识点（二）

Swift知识点（二）

6. 闭包表达式与闭包 闭包表达式&#xff08;Closure Expression&#xff09; 闭包表达式是一种在简短行内就能写完闭包的语法 也就是&#xff0c;闭包表达式&#xff0c;只是一种简洁、快速实现闭包的语法 Swift 的闭包表达式拥有简洁的风格&#xff0c;鼓励在常见场景中实现…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023