百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

Java后端应该掌握的前端知识Vue入门(下)

toyiye 2024-06-21 12:05 10 浏览 0 评论

Vue进阶

声明

本文题材来自于狂神说https://www.bilibili.com/video/BV18E411a7mC

1、异步通信框架Axios

1.1、什么叫Axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，所以需要注意的是因为axios是基于现代化游览器设计，所以古老的游览器并不支持。

那么promise又是什么?

  • 主要用于异步计算。
  • 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。
  • 可以在对象之间传递和操作promise，帮助我们处理队列。

1.2、Axios有哪些特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

1.3、Axios和Ajax有什么区别

  • Axios是通过promise实现对ajax技术的一种封装，就像是jQuery实现ajax封装，所以axios是ajax而ajax不止axios。
  • ajax使用需要导入jQuery十分的笨重，而使用axios只需要引入简单的cdn。
  • ajax是针对MVC进行编码，不符合现在大前端MVVM的设计模型。

1.4、Axios初体验

1.4.1、模拟json数据

{
  "name": "axios",
  "url": "http://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太平街道",
    "city": "长沙市",
    "country": "中国"
  },
  "links": [
    {
      "name": "vue",
      "url": "https://cn.vuejs.org/v2/guide/instance.html"
    },
    {
      "name": "axios",
      "url": "http://www.axios-js.com/zh-cn/docs/"
    }
  ]
}

1.4.2、引入cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.4.3、编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios.get("./data.json").then(function (response) {
        console.log(response.data);
    })
</script>
</body>
</html>

1.5、Axios的实际运用

  • 使用axios框架发送get请求获取json数据。
  • 使用钩子函数在页面加载之前初始化参数。
  • 使用v-bind:href等指令绑定json数据中的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*v-cloak解决页面闪烁问题（慢加载不会出现{{message}}这样的信息）*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <span>地址：{{info.address.country}}===={{info.address.city}}===={{info.address.street}}</span>
    <hr>
        <!-- :href相当于v-bind:href 同时请看清楚这种取vue中参数不需要双重花括号-->
        <a :href="info.url">{{info.name}}</a>
    <hr>
    <div v-for="item in info.links">
        <a :href="item.url">{{item.name}}</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            info:{
                address:{
                    street:'',
                    city:'',
                    country:''
                },
                links:[
                    {
                        name:'',
                        url:''
                    }
                ]
            }
        },
        // 钩子函数初始化参数
        created: function () {
            // axios发送请求
            axios.get("./data.json").then(response=>{
                // this代表当前的vue实例
                this.info=response.data;
            });
        }
    })
</script>

</body>
</html>

2、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
?在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

3、计算属性

3.1、什么叫做计算属性

? 计算属性和组件应用的效果其实类似，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖属性的值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。类似于缓存的作用，能够提高页面响应的速度。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

3.2、代码解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>翻转前:{{message}}</div>
    <div>翻转后:{{reverseMessage}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:'hello'
        },
        computed:{
            reverseMessage:function () {
                return this.message.split('').reverse().join("");
            }
        }
    })
</script>
</body>
</html>

页面能够正常显示后，可以F12打开控制台，vue.message='zhangsan'，可以清晰的看到message，reverseMessage都在实时变化，reverseMessage的变化就能体现计算属性是基于响应式依赖的。

4、内容分发插槽

4.1、什么叫做插槽

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，称之为插槽，组件和插槽的关系其实就是电脑和内存条的区别，每一跟内存条可以插入到不同的电脑上，即插即用，十分的快捷方便。

4.2、代码解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <slot-component>
        <!--将组件和插槽关联 同时传递参数-->
        <slot-name slot="slot-name1" :bookname="name"></slot-name>

        <slot-book slot="slot-book2" v-for="item in books" :book="item"></slot-book>
    </slot-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    // 在组件中声明哪里需要用到插槽，注意slot标签的name不是组件名而是后续引用组件的slot属性名字
    Vue.component("slot-component",{
        template:'<div><h1>书籍详情 </h1>' +
                    '<slot name="slot-name1"></slot>\n' +
                  '<ul>' +
                 '   <slot name="slot-book2"></slot>' +
                  '</ul></div>'
    });

    Vue.component("slot-name",{
        props:{
            bookname:''
        },
        template: '<h2>{{bookname}}</h2>'
    });

    Vue.component("slot-book",{
        props:{
            book:''
        },
        template: '<li>{{book}}</li>'
    });

    var vue = new Vue({
        el:"#app",
        data:{
            name:"学习slot",
            books:["Java初级","Java中级","Java高级"]
        }
    });
</script>
</body>
</html>

4.3、注意坑

  • 在组件中申明哪里需要用到插槽时，请一定要用div标签包裹起来，不然页面不报错，但是插槽内容根本不是展示。
  • 在将组件和插槽关联起来时，需要特别注意的是属性为slot="slot-name1"并非name。

5、自定义事件

? 思考：数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题。

5.1、逻辑梳理

  • 需要定义一个点击按钮@click='remove1'，点击时触发自定义方法remove1。
  • 自定义方法remove里面实现就是this.$emit('remove2',index)，$emit用处就是传入事件名称来触发一个事件。
  • 在父级标签监听v-on:remove2="removeItems"。
  • 在vue实例中定义方法removeItems完成删除books数组内容操作。

5.2、流程图说明

5.3、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
     <slot-component>
         <slot-name slot="slot-name" :name="name"></slot-name>
         <!--v-on:remove="removeItems" 简写为@remove="removeItems"-->
         <slot-book slot="slot-book" v-for="(item,index) in books" :bookname="item" :index="index" v-on:remove2="removeItems"></slot-book>
     </slot-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("slot-component",{
        template:"<div>\n" +
            "        <h1>java开发: <slot name='slot-name'></slot></h1>\n" +
            "        <ul>\n" +
            "            <slot name='slot-book'></slot>\n" +
            "        </ul>\n" +
            "    </div>"
    });

    Vue.component("slot-name",{
        props:{
            name:""
        },
        template: "<h1>{{name}}</h1>"
    });

    Vue.component("slot-book",{
        props:{
            bookname:'',
            index:''
        },
        template: "<li>" +
            "{{bookname}}   =====> <button @click='remove1'>删除</button>" +
            "</li>",
        methods:{
            remove1(index){
                // $emit 方法 传入事件名称来触发一个事件
                this.$emit('remove2',index)
            }
        }
    });

    var vue = new Vue({
        el:"#app",
        data:{
            name:"java学习路线",
            books:["Java初级","Java中级","Java高级"]
        },
        methods: {
            removeItems(index){
                this.books.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

6、Vue入门小结

核心：双向绑定、组件化、计算属性。

优点：Vue集成了AngularJS的模块化开发和React的虚拟Dom。

常用的属性：

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on绑定事件，简写@
  • v-model数据双向绑定
  • v-bind给组件绑定参数，简写：

组件化：

  • 组合组件slot插槽
  • 组件内部绑定事件需要使用到this.$emit("事件名",参数);
  • 计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI

（饿了么https://element.eleme.cn/#/zh-CN），或者ICE（阿里巴巴https://ice.work/）来快速搭建前端项目

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表