Vue ——03、Vue的生命周期，异步通信，计算属性，插槽，自定义事件，最后小结

最新推荐文章于 2023-03-30 22:48:44 发布

五月CG

最新推荐文章于 2023-03-30 22:48:44 发布

阅读量1.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42858422/article/details/122587353

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue的生命周期，异步通信，计算属性，插槽，自定义事件

一、Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。
在这里插入图片描述

二、Axios异步通信 ES6新特性，mounted，axios ，=>

2.1 什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

2.2为什么要使用Axios

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁!

2.3 第一个Axios应用程序

咱们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件

{
  "name": "狂神说Java",
  "url": "https://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.baidu.com"
    },
    {
      "name": "狂神说Java",
      "url": "https://www.baidu.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com"
    }
  ]
}

代码如下：

在这里插入图片描述
演示：

我们运行刷新的时候，我们发现数据还没渲染上去，出现括号参数，我们可以用这个方法去解决，没有渲染完，先空白

在这里插入图片描述

三、计算属性 computed

什么是计算属性？

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
          message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

注意：methods和computed里的东西不能重名

说明：

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”q in jiang"，改变下数据的值，再次测试观察效果!

结论：

调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

四、插槽 slot

在这里插入图片描述

五、自定义事件 this.$emit

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:ppp="title"></todo-title>
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="(i, index) in todoItems" :item="i" :xiabiao="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component('todo-title',{
        props:['ppp'],
        template:'<div>{{ppp}}</div>'
    });
    Vue.component('todo-items',{
        props:['item','xiabiao'],
        template:'<li>{{item}},{{xiabiao}} <button @click="remove_methods">删除</button> </li>',
        methods:{
            remove_methods:function (index) {
                this.$emit('remove',index);   //this.$emit 自定义事件分发
            }
        }
    });
    var vm = new Vue({
        el:"#vue",
        data:{
            title:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

讲解：

在这里插入图片描述
进一步讲解

在这里插入图片描述
演示一下：

在这里插入图片描述
图解：

在这里插入图片描述

六、最后小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

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（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：

https://element.eleme.cn/#/zh-CN
https://ice.work/

狂神说Vue视频笔记 + 自己的见解

————————

如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~

五月CG

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue ——03、Vue的生命周期，异步通信，计算属性，插槽，自定义事件，最后小结

Vue的生命周期，异步通信，计算属性，插槽，自定义事件一、Vue的生命周期二、Axios异步通信 ES6新特性，mounted，axios ，=>三、计算属性 computed四、插槽 slot五、自定义事件 this.$emit六、最后小结————————创作不易，如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~一、Vue的生命周期官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示 Vue实例有一个完整的生命周期，也就是从开
复制链接

扫一扫