一、学习目标

  • 了解实例生命周期的过程
  • 理解钩子函数的作用
  • 掌握Vue.js过滤器的使用方法 (重点)
  • 能够使用网络请求进行前后端交互 (重点、难点)

二、交互的基本概念

2.1、前端和后端的概念

说明:任何一个应用程序都有前端和后端

  • 前端:客户端,就是浏览器
  • 后端:服务器

2.2、前后端交互原理

2.3、交互的应用场景

  • 从后端获取一些数据,将其进行展示或计算
  • 将用户在页面中提交的数据发送给后端

三、Vue.js交互

3.1、Vue.js交互

  • Vue.js交互需使用 vue-resource.js库,下载地址:https://cdnjs.com/libraries/vue-resource
  • Vue.js 交互借助于$http 完成
  • 语法:使用 promise 语法规范
  • 注意的是:导入vue-resource时,先引入 vue.js,在引入vue-resource.js,不然会报错。

3.2、常用交互类型

  • get     类型
  • post   类型
  • jsonp 类型

3.3、get 类型语法

语法:this.$http.get('url',{params:{key1:val1,key2:val2}}).then( function(res){处理请求成功的回调函数,res:请求成功时返回的数据},function(res){处理请求失败的回调函数,res:请求失败时返回的数据});

<body>
    <div id="box">
        <button @click="fn">按钮</button>
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/vue-resource.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {},
            methods: {
                fn: function(){
                    this.$http.get('/home',{params:{pk:20}}).then(function(res){
                        //res参数: 请求成功时返回的数据对象
                        console.log(res); //通过这个res可以查看
                        this.pk = res.data;
                    },function(res){
                        //res参数:请求失败返回的数据对象
                        console.log(res.data);
                    }
                    )
                }
            }
        });
    </script>
</body>

get类型

3.4、post 类型语法

语法:this.$http.post('url',{a:2,b:2},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况})

<body>
    <div id="box">
        <button @click="fn">按钮</button>
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/vue-resource.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {},
            methods: {
                fn: function(){
                    this.$http.post('home/',{a:2,b:2},{emulateJSON:true}).then(
                            // 参数传递:{参数1:值1,参数2:值2....}
                            //{emulateJSON:true} 模拟json数据格式,将参数传递过去
                            function(res){
                                console.log(res.data);
                            },function(res){
                                console.log(res.status);
                            }
                    )
                }
            }
        });
    </script>
</body>

post类型

3.5、jsonp类型语法

语法:this.$http.jsonp('url',{a:2,b:2},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况})

<body>
    <div id="box">
        <button @click="fn">按钮</button>
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/vue-resource.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {},
            methods: {
                fn: function(){
                    this.$http.jsonp('home/',{a:2,b:2},{emulateJSON:true}).then(
                            // 参数传递:{参数1:值1,参数2:值2....}
                            //{emulateJSON:true} 模拟json数据格式,将参数传递过去
                            function(res){
                                console.log(res.data);
                            },function(res){
                                console.log(res.status);
                            }
                    )
                }
            }
        });
    </script>
</body>

jsonp

小结:

  语法:使用promis语法规范

  常见交互类型:get、post、jsonp类型

四、过滤器

4.1、 过滤器作用和定义

作用:在不改变数据的情况下,输出前端需要的格式数据

过滤器的定义方法:

Vue.filter('过滤器名称',function(val){
       return val + 4;
})

4.2、过滤器的调用方法和注意事项

调用方法:

{{ msg | 过滤器名陈 }}

注意事项:

  • 定义过滤器,必须放在Vue实例化前面
  • 在没有冲突的前提下,过滤器可以串联
<body>
    <div id="box">
        <!--过滤器的串联:过滤器在没有冲突的前提下,是可以进行串联使用的 -->
        <h1>{{ name | hello | money }}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //定义过滤器
        //位置:创建实例之前
        /*
            Vue.filter('过滤器名陈',function(val){
                1.val: 需要处理的值;
                2.逻辑代码;
                3.return 处理后的数据;
            })
        */
        //过滤器的调用:
        // {{ 数据 | 过滤器名称 }}
        Vue.filter("hello",function(val){
            return "hello" + val;
        });
        Vue.filter("money",function(val){
            return "¥¥¥¥" + val;
        });
        var vm = new Vue({
            el: "#box",
            data: {
                name: "shuaigaogao"
            }
        });
    </script>
</body>

过滤器

小结:

  过滤器作用:在不改变数据的情况下,输出前端需要的格式数据

五、实例的生命周期

5.1、 实例的生命周期以及生命周期钩子?

生命周期:实例在被创建前经过一系列的初始化的过程,叫 生命周期

生命周期钩子: 在生命周期中被自动调用的函数 叫做 生命周期钩子,生命周期钩子的用途: 为我们提供执行自定义 逻辑的机会。

5.2、钩子函数有哪些

生命周期:

  • create(创建):beforeCreate(进行数据加载    data,数据  undefined)、created(data,数据  加载完成)  说明:页面刚生成的时候需要用到这个钩子函数
  • mount(挂载):beforeMount、mounted     说明: 页面需要在触发的情况下使用下。
  • update(更新):beforeUpdate、updated   说明: 页面更新的时候 使用
  • destroy(销毁):beforeDestroy、destroy    说明:页面销毁的时候使用

我们通过代码来看看:

<body>
    <div id="box">
        <!--
            实例的生命周期:实例在从创建到销毁的过程
            钩子函数:在实例的生命周期中会自动调用一些函数,这些函数就是钩子函数;
            作用:我们可以利用钩子函数,来定义自己需要的一些逻辑
           生命周期:
                create(创建):beforeCreate、created
                mount(挂载):beforeMount、mounted
                update(更新):beforeUpdate、updated
                destory(销毁):beforeDestory、destory
        -->
        <h1>{{ msg }}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                msg: "hello"
            },
            //钩子函数书写的位置,和data,methods等配置项同级
            beforeCreate: function(){
                console.group('beforeCreate------------------');
                console.log('el:'+ this.$el); //获取el对象,实例自带的一个属性
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
                // el、data、msg三者都没有创建
            },
            created: function(){
                console.group('created------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
                //el没有创建,data和msg创建了
            },
            beforeMount: function(){
                console.group('beforeMount------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
                //el并没有被真正的创建出来,而是进行一个占位,data和msg创建
            },
            mounted: function(){
                console.group('mounted------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
                //el已经替换成了真实的数据,而是进行一个占位,data和msg创建
            },
            //el 是设置挂载 el: "selector" 用来将容器和数据进行关联的,这个过程又叫挂载
            beforeUpdate: function(){
                console.group('beforeUpdate------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
            },
            updated: function(){
                console.group('updated------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
            },
            //数据更新后,这两个方法会执行,vm.msg="hello world"
            beforeDestroy: function(){
                console.group('beforeDestroy------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
            },
            destroyed: function(){
                console.group('destroyed------------------');
                console.log('el:'+ this.$el);
                console.log('data:'+ this.$data);
                console.log('msg:'+ this.msg);
            }
            //destroy 在实例销毁的时候执行
            // 实例销毁后,其身上所有的数据和方法都会销毁,不再生效
        });
    </script>
</body>

实例生命周期

如图:

小结:

  实例生命周期:实例在被创建前经过的一系列的初始化过程叫生命周期。

  生命周期钩子的用途:为我们提供执行自定义逻辑的机会。

第4章-Vue.js 交互及实例的生命周期的更多相关文章

  1. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  2. Vue学习1:实例及生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.JS快速上手(组件生命周期)

    一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...

  4. Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1 ...

  5. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  6. 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  8. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. Serverless 架构的优点和缺点

    Serverless 的优势 在我使用 Serverless Framework 开发 AWS Serverless 应用的过程中,最方便的莫过于,第一次部署和第二次.第三次部署没有什么区别.只需要执 ...

  2. daterangepicker时间段插件

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  3. AngularJS学习之数据绑定

    既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的,所有模型里面的数据,都必须经过控制器,才能展示到视图中. 什么是数据绑定 首先来回忆 ...

  4. 欢迎来怼—第二次Scrum会议

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华小组照片 二.开会信息 时间:2017/10/14 18:30~18:47,总计17min.地点:东北师范 ...

  5. PSP DAILY的NABCD分析

    1) N (Need 需求) PSP Daily 解决了用户(软件工程课上学生)记录例行报告.写每周PSP表格和统计的需求.潜在用户还有未来该课堂的学生和需要用PSP方法记录任务完成时间和统计的学习者 ...

  6. 处理了一个以前写的java小程序的异常

    之前用java做过0-99的数字和英文之间的翻译,输入数字就会翻译成英文,输入英文会翻译成数字,比如输入56  输出fiftysix   输入fiftysix  输出56, 发现这会有一个异常,当输入 ...

  7. 探究Android中通过继承ViewGroup自定义控件的原理

    原文地址:http://www.cnblogs.com/kross/p/3378395.html 今天断断续续的折腾了一下午到现在20:38,终于有点明白了.o(╯□╰)o 在Android开发中,我 ...

  8. PHP关于传众多参数还是传上下文对象的性能测试

    在开发微信公众平台平台的过程中,有这么几个参数总是需要传来传去,$userOpenId,$message,$time. 在整个程序的运行过程中,为了函数方便的处理,将这三个变量一直放在参数列表里.关于 ...

  9. 第155天:canvas(二)

    一.添加样式和颜色 ​ 在前面的绘制矩形章节中,只用到了默认的线条和颜色. ​ 如果想要给图形上色,有两个重要的属性可以做到. fillStyle = color 设置图形的填充颜色 strokeSt ...

  10. 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...