5.Vue_Element

文章目录

  • 1 Ajax
    • 1.1 Ajax介绍
      • 1.1.1 Ajax概述
      • 1.1.2 Ajax作用
      • 1.1.3 同步异步
    • 1.2 Axios
      • 1.2.1 Axios的基本使用
      • 1.2.2 Axios请求方法的别名
  • 2 前端工程化
    • 2.1 前端工程化特点
    • 2.2 Vue项目开发流程
  • 3 Vue组件库Element
    • 3.1 Element介绍

1 Ajax

1.1 Ajax介绍

1.1.1 Ajax概述

Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:

  • 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。

1.1.2 Ajax作用

  • 与服务器进行数据交互
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

1.1.3 同步异步

  • 同步请求:浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
  • 异步请求:
  • 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。

1.2 Axios

  • Axios是对原生的AJAX进行封装,简化书写。
  • Axios官网是:https://www.axios-http.cn

1.2.1 Axios的基本使用

Axios的使用比较简单,主要分为2步:

  • 引入Axios文件

    <script src="js/axios-0.18.0.js"></script>
    
  • 使用Axios发送请求,并获取响应结果,官方提供的api很多,此处给出2种,如下

    • 发送 get 请求

      axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
      }).then(function (resp){alert(resp.data);
      })
      
    • 发送 post 请求

      axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
      }).then(function (resp){alert(resp.data);
      });
      

    axios()是用来发送异步请求的,小括号中使用 jsJSON对象传递请求相关的参数:

    • method属性:用来设置请求方式的。取值为get或者 post
    • url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2
    • data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为data属性的值。

    then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过resp.data可以获取到响应的数据。

1.2.2 Axios请求方法的别名

Axios还针对不同的请求,提供了别名方式的api,具体如下:

方法描述
axios.get(url [, config])发送get请求
axios.delete(url [, config])发送delete请求
axios.post(url [, data[, config]])发送post请求
axios.put(url [, data[, config]])发送put请求

2 前端工程化

2.1 前端工程化特点

前端工程化:在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。它具有以下四个特点:

  • 模块化:将js和css等,做成一个个可复用模块
  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  • 自动化:项目的构建,测试,部署全部都是自动完成

2.2 Vue项目开发流程

对于vue项目,index.html文件默认是引入了入口函数main.js文件,找到src/main.js文件,其代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

上述代码中,包括如下几个关键点:

  • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
  • router: 路由,详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

接下来说一下App.vue文件,他的代码大致是这样的

<template><div id="app">{{message}}</div>
</template><script>
export default {data(){return {"message":"hello world"}}
}
</script>
<style></style>

需要注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分:

  • template: 模板部分,主要是HTML代码,用来展示页面主体结构的
  • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分,主要通过css样式控制模板的页面效果得

3 Vue组件库Element

3.1 Element介绍

  • ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

  • Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。

  • Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。

  • ElementUI的学习方式和我们之前的学习方式不太一样,对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可

  • 官网地址:https://element.eleme.cn/#/zh-CN

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

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

相关文章

【Unity游戏开发】基于前缀树的红点系统构思与客户端方案

一、前言 前段时间负责了项目中红点系统的实现,和大家分享一下初期是设计思路 红点系统客户端业务的一般实现过程与方式: 数据管理:首先要在客户端建立一个数据管理系统,用于存储和管理各个业务模块的红点状态。可以是一个中央数据管理器或模块化的数据管理系统,具体根据游…

VUE中babel.config.js配置按需引入

VUE中babel.config.js配置 vue/cli-plugin-babel/preset是一款 babel 插件&#xff0c;它会在编译过程中将 import 引入自动转换为按需引入的方式。 module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[import, {libraryName: element-ui,libraryDirectory…

系统架构设计师---多媒体技术及其应用

概念 媒体:承载信息的载体。 多媒体:数字、文字、声音、图形、图像和动画等各种媒体的有机组合,并与先进的计 算机、通信和广播电视技术相结合,形成一个可组织、存储、操纵和控制多媒体信息的集成环境和 交互系统。 多媒体技术:以数字化为基础,能够对多…

召集令:CloudQuery 社区有奖征文活动来啦!

CloudQuery 社区第一期征文活动来袭&#xff01;&#xff01;&#xff01;只要你对 CloudQuery 产品感兴趣&#xff0c;或者是希望了解 CQ &#xff0c;都可以来参加&#xff0c;在本期活动中&#xff0c;我们也为大家准备了多种主题供你选择&#xff0c;CQ 使用案例、版本对比…

udp与can通信的选择与比较

UDP&#xff08;用户数据报协议&#xff09;和CAN&#xff08;控制器局域网&#xff09;是两种不同的通信协议&#xff0c;它们在实时传递性上有一些区别。 UDP是一种无连接的传输协议&#xff0c;它提供了简单的、不可靠的数据传输。UDP不提供可靠性保证、流控制或重传机制。…

EMO实战:使用EMO实现图像分类任务(一)

文章目录 摘要安装包安装timm安装 grad-cam安装einops 数据增强Cutout和MixupEMA项目结构计算mean和std生成数据集 摘要 论文翻译&#xff1a;https://blog.csdn.net/m0_47867638/article/details/132034098?spm1001.2014.3001.5501 官方源码&#xff1a;https://github.com/…

shell的两种属性: 交互(interactive)与登录(login)

1. 背景 在看shell变量的时候引起了兴趣: 局部变量&#xff0c;全局变量&#xff0c;环境变量&#xff0c;shell的配置文件&#xff0c;参考博客: http://c.biancheng.net/view/773.html 2. 交互式与非交互式 参考博客: shell的两个属性:是否交互式(interactive), 是否登录…

生产环境下的终极指南:使用 Docker 部署 Nacos 集群和 MySQL

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

01-集群安装JDK(普通用户)

机器部署 集群规划 我们准备三台服务器kk01、kk02、kk03&#xff0c;内存4G、硬盘50G、处理器4核心2内核&#xff08;总8&#xff09; kk01使用 192.168.188.128 kk02使用 192.168.188.129 kk03使用 192.168.188.130 模板机准备 我们先创建一台作为模板机&#xff0c;后…

C++ 11 新特性 学习笔记

1、字符串原始字面量 R“()”用于取消转义&#xff0c;可用于路径表示 运行成功 这两个RawValue起到描述作用&#xff08;可以不写&#xff09;&#xff0c;并不参与输出 注意&#xff0c;这里输出中文乱码 2、nullptr NULL在C中表示0&#xff0c;在非C中表示万能指针 nullpt…

Vue3 使用json编辑器

安装 npm install json-editor-vue3 main中引入 main.js 中加入下面代码 import "jsoneditor";不然会有报错&#xff0c;如jsoneditor does not provide an export named ‘default’。 图片信息来源-github 代码示例 <template><json-editor-vue class…

SQL | 分组数据

10-分组数据 两个新的select子句&#xff1a;group by子句和having子句。 10.1-数据分组 上面我们学到了&#xff0c;使用SQL中的聚集函数可以汇总数据&#xff0c;这样&#xff0c;我们就能够对行进行计数&#xff0c;计算和&#xff0c;计算平均数。 目前为止&#xff0c…

ESP-C3入门21. I2C接口点亮1306驱动的OLED屏

ESP-C3入门21. 点亮1306驱动的OLED屏 一、Espressif/ssd1306 驱动简介1. 驱动介绍2. OLED充电泵概念 二、I2C 通讯步骤1. 初始化 I2C 总线 (i2c_master_init()函数)&#xff1a;2. 创建 I2C 命令句柄 (i2c_cmd_handle_t cmd i2c_cmd_link_create())&#xff1a;3. 发送启动信号…

【C#】获取电脑CPU、内存、屏幕、磁盘等信息

通过WMI类来获取电脑各种信息&#xff0c;参考文章&#xff1a;WMI_04_常见的WMI类的属性_wmi scsilogicalunit_fantongl的博客-CSDN博客 自己整理了获取电脑CPU、内存、屏幕、磁盘等信息的代码 #region 系统信息/// <summary>/// 电脑信息/// </summary>public p…

flinksql报错 Cannot determine simple type name “org“

flink版本 1.15 报错内容 2023-08-17 15:46:02 java.lang.RuntimeException: Could not instantiate generated class WatermarkGenerator$0at org.apache.flink.table.runtime.generated.GeneratedClass.newInstance(GeneratedClass.java:74)at org.apache.flink.table.runt…

低功耗、5Mbps、RS-422 接口电路MS2583/MS2583M

MS2583/MS2583M 是一款低功耗、 5Mbps 、高 ESD 能力的 RS422 通讯接口电路。 在接收状态下&#xff0c;其功耗仅为 0.3mA 左右。 A/B 端 ESD 耐压可达 15kV &#xff0c;且无自激现象。当输出短路发生大电 流导致电路温度过高时&#xff0c;开启内部过温保护电路&…

go 使用 make 初始化 slice 切片使用注意

go 使用 make 初始化 slice 切片 时指定长度和不指定长度的情况 指定长度 package mainimport "fmt"func main() {s1 : make([]int, 5)data : []int{1, 2, 3}for _, v : range data {s1 append(s1, v)}fmt.Println(s1) }// 以上代码会输出 // [0 0 0 0 0 1 2 3] //…

vue中的路由缓存和解决方案

路由缓存的原因 解决方法 推荐方案二&#xff0c;使用钩子函数beforeRouteUpdate&#xff0c;每次路由更新前执行

手写spring笔记

手写spring笔记 《Spring 手撸专栏》笔记 IoC部分 Bean初始化和属性注入 Bean的信息封装在BeanDefinition中 /*** 用于记录Bean的相关信息*/ public class BeanDefinition {/*** Bean对象的类型*/private Class beanClass;/*** Bean对象中的属性信息*/private PropertyVal…

MFC第三十天 通过CToolBar类开发文字工具栏和工具箱、GDI+边框填充以及基本图形的绘制方法、图形绘制过程的反色线模型和实色模型

文章目录 CControlBar通过CToolBar类开发文字工具栏和工具箱CMainFrame.hCAppCMainFrm.cppCMainView.hCMainView.cppCEllipse.hCEllipse.cppCLine.hCLine.cppCRRect .hCRRect .cpp CControlBar class AFX_NOVTABLE CControlBar : public CWnd{DECLARE_DYNAMIC(CControlBar)pro…