ES 6 & Axios & Vue 基本语法

最新推荐文章于 2022-10-18 11:31:12 发布
最新推荐文章于 2022-10-18 11:31:12 发布
阅读量61 收藏
点赞数
文章标签： vue.js elasticsearch javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49031153/article/details/121023133
版权

1. ES 6 基本语法

1.1 对象简写

  • 对象简写
    • 规则1：变量名和key如果重名，变量名可省略，且key不能使用引号
    • 规则2：如果值是函数，“: function” 可省略
// 1 对象简写

// 1.1 回顾 js对象格式
// 1.1.1 定义：
var username = 'jack'
var password = '6666'
var obj = {
    "username": username,
    "password": password,
    getAge: function() {
        console.info('年龄18')
    }
}
// 1.1.2 调用
console.info(obj.username)
obj.getAge()

// 1.2 对象简写
// 规则1：变量名和key如果重名，变量名可省略，且key不能使用引号
// 规则2：如果值是函数，“: function” 可省略

var obj2 = {
    username,
    password,
    getAge() {
        console.info('年龄19')
    }
}
console.info(obj2.username)
obj2.getAge()

1.2 箭头函数

  • 箭头函数标准格式

    var e1 = (x) => {
    return x * x
}

  • 省略格式：

    • 省略1：参数列表只有一个，小括号可省略
    • 省略2：如果函数体只有一条语句，大括号可省略。如果此语句是return语句，return关键字必须省略。
    var e2 = x => x*x

// 箭头函数：简单理解，对匿名函数的省略写法。

//1.1 回顾 函数定义   function 函数名(参数列表) { ... }
function show() {

}

//1.2 回顾 匿名函数的定义   var 别名 = function() {}
var a = function () {
    console.info("a函数")
}
a()

// 箭头函数的标准语法
var b = () => {
    console.info("b函数")
}
b()


// 1.3 定义带参数的
var c = (s1,s2) => {
    console.info(`c函数: ${s1} , ${s2} `)
}
c('a','b')


// 1.4.1 省略1：参数列表只有一个，小括号可省略
var d1 = s1 => {
    console.info(`d1函数: ${s1} `)
}
d1('6呀')


// 1.4.2 省略2：如果函数体只有一条语句，大括号可省略。如果此语句是return语句，return关键字必须省略。
var d2 = () => console.info(`d2函数 `)
d2()

var d3 = () =>  "哈哈"

console.info( d3() )


// 1.4.3 省略的整合写法：一个参数、一个返回语句，且是return语句
// 标准写法
var e1 = (x) => {
    return x * x
}
console.info( e1(5) )

// 省略写法
var e2 = x => x*x
console.info( e2(6) )

1.3 循环遍历

// 循环遍历

var arr = ['暄桑','潘酱','O桑']

//1 普通循环
for(var i = 0 ; i < arr.length ; i ++) {
    console.info(arr[i])
}

//2 使用map()处理数据
// map() : 对已有数组数据的再加工，返回一个新数组。
var newArr = arr.map( (s) => { return s.toLowerCase() } ).reverse().join('-->')
console.info(newArr)

//3 数据遍历forEach() 函数
arr.forEach( s => console.info(s) )

2.Axios基本操作

2.1 搭建后端环境

2.1.2 步骤

  • 创建maven项目：day19_axios
  • 导入坐标
  • 编写启动类
  • 编写JavaBean
  • 编写Controller

2.1.3 实现

  • 创建maven项目：day19_axios

  • 导入坐标

        <!--确定spring boot版本-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!--web开发启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

  • 编写启动类

    package com.czxy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Day19Application {
    public static void main(String[] args) {
        SpringApplication.run(Day19Application.class, args);
    }
}

  • 编写JavaBean

    package com.czxy.domain;

public class User {
    private String uid;
    private String username;
    private String password;

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public User() {
    }

    public User(String uid, String username, String password) {
        this.uid = uid;
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

  • 编写Controller

    package com.czxy.controller;

import com.czxy.domain.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@CrossOrigin        //解决跨域问题
@RequestMapping("/user")
public class UserController {

    /**
     * 查询所有
     * @return
     */
    @GetMapping
    public List<User> selectAll() {
        List<User> list = new ArrayList<>();
        list.add(new User("u001","jack","1234"));
        list.add(new User("u002","肉丝","6666"));
        return list;
    }

    /**
     * 添加用户
     * @param user
     * @return
     */
    @PostMapping
    public String save(@RequestBody User user) {
        System.out.println(user);
        return "添加成功";
    }

    /**
     * 修改用户
     * @param user
     * @return
     */
    @PutMapping
    public String update(@RequestBody User user) {
        System.out.println(user);
        return "修改成功";
    }

    /**
     * 通过id删除用户
     * @param uid
     * @return
     */
    @DeleteMapping("/{id}")
    public String delete(@PathVariable("id") Integer uid) {
        System.out.println(uid);
        return "删除成功";
    }

}

2.2 Axios 概述

  • axios底层使用Promise对象

  • Promise对象处理异常程序一种编程方式。

    //基本语法
new Promise(....异步代码).then(成功回调函数).catch(失败回调函数)

//
new Promise(....异步代码)
    .then((response响应)=>{成功回调代码})
    .catch((error错误) => {失败回调代码})

  • 什么是axios？

    • 用于发送ajax工具。另一种称号“HTTP 客户端”

2.3 发送各种请求

  • 前提：导入axios.js 类库
//请求方式：get、post、put、delete
axios.请求方式(请求路径,请求参数).then( 成功 ).catch( 失败 )

2.3.1 get请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        // 发送ajax请求
        // get请求格式：axios.get(url).then().catch()
        var url = 'http://localhost:8080/user'
        axios.get(url)
        .then(response => {
            // 响应数据
            console.log(response.data)
        })
        .catch(err => {
            console.error(err); 
        })
    </script>
</head>
<body>
    
</body>
</html>

2.3.2 post 请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var user = {
            username: 'jack',
            password: '1234'
        }
        // 发送post请求
        var url = 'http://localhost:8080/user'
        axios.post(url, user)
        .then( response => {
            console.info(response.data)
        })
        .catch( error => {})
    
    </script>
</head>
<body>
    
</body>
</html>

2.3.3 put请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var url = 'http://localhost:8080/user'
        var user = {
            "uid":"u001",
            "username":"杰克",
            "password":"1234"
        }
        axios.put(url, user)
        .then( response => {
            // 响应结果
            console.info(response.data)
        })
        .catch( error => {})
    </script>
</head>
<body>
    
</body>
</html>

2.3.4 delete请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var url = 'http://localhost:8080/user/u001'
        axios.delete(url)
        .then(response=> {
            // 响应结果
            console.info(response.data)
        })
        .catch(error => {})
    </script>
</head>
<body>
    
</body>
</html>

3.Vue基本语法

3.1 什么是vue

  • vue : js框架，构建用户界面
  • 将学习vue众多技术，称为vue全家桶：vue、spa、vue-router、vuex、element-ui 等

3.2 入门案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
</body>
</html>
<script>
    new Vue({
        el: "#app",
        data:{
            message: 'O哥真棒'
        }
    })
</script>
  • 注意：
    • 必须导入vue类库 vue.js
    • 内容显示区域：<div id="app">vue显示代码</div>
    • vue js 代码，必须放在html页面的最后

3.3 MVVM模式

  • MVVM 对mvc升级模式
    • Model 数据层，用于存放数据
    • View 视图层，用于显示或搜集数据
    • ViewModel：视图模型，业务逻辑层，用于完成MVVM核心功能
  • MVVM核心功能：数据的双向绑定。
    • 数据层 --> 视图层：数据层的数据发生改变时，视图层的数据自动更新。
    • 视图层 --> 数据层：视图层的数据发生改变时，数据层的数据自动更新。

在这里插入图片描述

3.4 基本语法

3.4.1 插值表达式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg1 + msg2}} <br/>
        {{1 + 2 + 3}}
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            msg1: 'Hello',
            msg2: 'world'
        }
    })
</script>

3.4.2 v-text和v-html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--  v-text 以文本的方式显示内容到标签体中 -->
        <div v-text="msg1"></div>
        <div v-text="msg2"></div>

        <!--  v-html 以html的方式，显示内容到标签体中 -->
        <div v-html="msg1"></div>
        <div v-html="msg2"></div>

        <!-- 插值表达式与 v-text一致 -->
        <div>{{msg2}}</div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            msg1: "哈哈",
            msg2: "<a href=''>哈哈</a>"
        }
    })
</script>

3.4.3 v-for 循环

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(s,i) in arr">
            {{i}} -- {{s}}
        </div>

        <div v-for="(user,index) in userList">
            {{index}} --{{user.username}},{{user.password}},{{user.age}}
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            arr: ['徐酱','达咩','杨桑酱'],
            userList: [
                {
                    "username":"jack",
                    "password":"1234",
                    "age":"18"
                },
                {
                    "username":"rose",
                    "password":"5678",
                    "age":"21"
                }
            ]
        }
    })
</script>

3.4.4 v-bind 和 :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">访问官网</a> <br/>
        <a :href="url">访问官网</a> <br/>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            url : 'http://www.czxy.com'
        }
    })
</script>

3.4.5 v-show和v-if

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-show="flag1">show flag1 </div>
        <div v-show="flag2">show flag2 </div>  <!--样式隐藏-->

        <div v-if="flag1">show flag1 </div>
        <div v-if="flag2">show flag2 </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            flag1 : true,
            flag2 : false,
        }
    })
</script>

3.4.6 v-model

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        显示数据： {{username}} <br/>
        <input type="text" v-model="username">
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{
            username: 'jack'
        }
    })
</script>
Lzh_1122
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6中的（=＞）箭头函数
qq_51562393的博客
03-09 751
（Arrow Function）箭头函数是ES6中新增的定义函数方式 通常我们用的函数定义的方法： var num = function (a,b) { return a + b } 而在ES6中新增了一种箭头函数 ()=>{} //()括号中的内容代表函数， //=>箭头指向某一个代码块， //{}大括号中则装着函数体 //举例 //ES6之前定义函数的方法 var num = function (a,b) { retu.
ES 6 基本语法
Harden_zsc的博客
10-21 795
ES 6 基本语法 1 对象简写 对象简写 规则1：变量名和key如果重名，变量名可省略，且key不能使用引号 规则2：如果值是函数，“: function” 可省略 // 1 对象简写 // 1.1 回顾 js对象格式 // 1.1.1 定义： var username = 'jack' var password = '6666' var obj = { "username": username, "password": password, getAge: functi
ES6的8种基本属性
热门推荐
manongshy的博客
11-03 1万+
目录 1.ES6介绍 2.变量 3.类和对象的改进 4.函数相关 5.数组相关 6.字符串相关 7.新的数据类型 8.proxy 代理 9.Generator 10.promise 11.async 12.Iterator和for-of循环 课程内容 1.ES6介绍 q.什么是ES6 ES6是ECMA Script 6.0的简称, 就是语言最新的标准, 发布与15年左右 ...
es6基本语法
08-17 131
1.变量声明const和let let：表示变量，都是块级作用域，在一个函数内部，let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部 const：表示常量，都是块级作用域，在一个代码块内部，const声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就...
es6 ...
蚁族的奋斗的博客
12-26 1789
... 叫做延展操作符或者是剩余操作符https://segmentfault.com/a/1190000011342516
vue+vuex+vueRouter+axios+element.zip
08-12
在“vue+vuex+vueRouter+axios+element.zip”这个项目中，开发者结合了Vue的核心特性与其他重要的库和工具，构建了一个功能完备的前端应用。 Vue Router 是Vue.js的官方路由管理器，它允许我们通过URL来控制应用的...
基于vue+node.js制作猫眼电影基本网页
06-16
我们将涵盖Vue.js的基本概念、Node.js后端开发以及如何整合这两个技术来创建一个交互式的电影信息展示平台。 首先，Vue.js是一个轻量级的前端JavaScript框架，它提供了组件化开发模式，使得构建用户界面更加简洁...
VUE-ES2015
11-12
**Vue-ES2015** 是一个关于 Vue.js 框架与 ES2015（也称为 ECMAScript 6）特性的讨论。Vue.js 是一款流行的前端JavaScript框架，它利用了ES2015的新特性来提高开发效率和代码质量。这篇文章将深入探讨如何在Vue项目...
前端工程师--vue练习小项目
09-25
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"前端工程师--vue练习小项目"旨在帮助初学者巩固Vue的基础知识，包括组件化开发、数据绑定、指令、生命周期等核心概念。在这个项目中，你可以...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
最新发布
01-03
1. **Vue3**：Vue.js 的最新版本，带来了性能提升、更简洁的模板语法和更好的类型支持。Vue3 引入了Composition API，允许开发者更灵活地组织和复用代码，提升了组件的可读性和可维护性。另外，Suspense 组件用于...
es6:=＞(箭头函数)基本用法
光明小学王小雨的博客
06-04 556
es6:=>(箭头函数)基本用法
JavaScript——ES 6语法简介
绝尘
12-19 730
ES 6语法简介 let、const let和const是ES6中新增的两个关键词，用来声明变量，let和const都是块级作用域，let声明的变量只有在let命令所在代码块中有效，const声明是一个只读的常量，一旦声明，就不能改变了。 { var a = 1; let b = 2; } console.log(a); //1 console.log(b); // refere...
ES 6总结
weixin_40442639的博客
08-05 494
1. let、const 和 block 作用域 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: function a(){ var test //变量提升 if(bool){ test = 'hello world' }else{ consloe.log(test); } } // 这里不用关心bool是否为true 或false 实际上 无论如何test都会被创
一篇文章带你了解整个 ES 6
与墨的编程成长历程
05-12 451
前端开发想要拿高薪，ES 6 是必不可少的，很多前端的开发者基于ES 6方便，开发效率高而对 ES 6爱不释手。那么接下来，就让我用一篇文章带你了解 ES 6所有的内容吧！
ES6新特性
liu_xiaoru的博客
03-12 216
1.class类 基本用法 class Point { constructor(name) { this.name = name; } showName() { console.log(this.name) } } 类的内部所有定义的方法，都是不可枚举的，除了在constructor内部的属性，其他定义的都在原型上 ...
ES6学习笔记（七）-- ES6对象
weixin_45928836的博客
11-09 598
前言： ES6对JS对象也升级了很多便利的操作以及新增的方法，这里只介绍一部分。更多详情请参考官网。 一、ES6对象内的一些简洁操作 1.在构建对象时，如果键值和值一样，则可以用属性简写；当然方法也可以简写 let name = 'mikasa' let age = 16 let obj = { name, age, method() { // 省略 function return "Hello!"; } } 2.属性名表达式 (常用于构建key值（键名）) Java
ES基本“命令”
Kevin1906的博客
10-18 794
ES 索引、文档的简单CURD
ES 监控平台（极限数据平台）的感受
bohu83的博客
07-07 1107
一 背景ES挂过一次，想增加一些参数监控，比如线程池的监控。比起es自带的kibana监控，的确强大了很多。各种参数都有，切换不同es集群很方便，也可以打开控制台执行query。其他参见官网。 我使用的版本是稳定版：console-0.3.0-458-linux-386.tar.gz对应es是7.10.2二 使用一周发现的问题 1 系统会莫名挂掉，页面打不开。错误日志：”07-07 14:32:04] [INF] [app.go:175] using config: /root/console/cons
vue3+vite+axios
07-22
Vite 是一个用于快速构建现代化前端应用的构建工具，它基于 ESModules 和原生 ES2015+ 语法实现了一种新的开发模式。Axios 是一个流行的基于 Promise 的 HTTP 客户端，它被广泛用于前端和后端的数据请求和交互。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值