vue入门第二天，后端程序员需要掌握的vue技术，五天带你玩转vue

曾经终败给现在 2022-03-09 13:26 375阅读 0赞

## 1.前言 ##

有了第一天对vue的一些基本认识，如果你有了以下的认识，说明你已经入门vue了

1.0Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，不要再有操作dom的思想了，忘掉以前jquery的思想

1.1.在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；

1.2 当我们意识到上面两点的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；

## 2.今日学习目标 ##

第一天我说，我们要成为一个全栈程序员，何为全栈，就是很多东西都要会，但是一定要有我们自己的主项，但是作为一个后端程序员，我们的主项就是写接口，处理业务逻辑，前端的代码不需要我们写，但是我们一定能看懂，知道代码到底写在哪里，个人觉得，作为一个后端程序员需要熟悉vue的指令，熟悉vue的异步调用，知道路由规则，知道一个增删改查的流程是什么样的就可以了，不用纠结vue的各种自定义指令，过滤器，组件，这些都是专业的人干的事，我们这种外行能看懂，了解就行，这一天基本都是需要让大家了解的东西，让大家知道有这个概念，以后和别人聊天不尴尬

## 3.vue的过滤器 ##

![201903131348155.png][]

## 4.vue的生命周期 ##

*  什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
 *  [生命周期钩子][Link 1]：就是生命周期事件的别名而已；
 *  生命周期钩子 = 生命周期函数 = 生命周期事件
 *  主要的生命周期函数分类：

*  创建期间的生命周期函数：
    
     *  beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
        
         *  **created**：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
         *  beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
         *  **mounted**：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
 *  运行期间的生命周期函数：
    
     *  beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
        
         *  updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
 *  销毁期间的生命周期函数：
    
     *  beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
        
         *  destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70][]

## 5.vue的异步调用方式（vue-resource和axios） ##

**5.1vue-resource特点**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 1][]

使用：

![20190313140935770.png][]

2.引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

![20190313141012468.png][]

3.在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。  
then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 2][]

4.调用的方式代码

get方式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 3][]

post方式，put，delete等方式也是一样的，就不过多的介绍了，主要介绍axios

## 6.axios介绍 ##

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 5][]

### post请求： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 6][]

### respon返回的数据，可以在then里面获取 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 7][]

[201903131348155.png]: /images/20220309/54b60c68da234c8c88e24423e855f376.png
[Link 1]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70]: /images/20220309/d22ca97c967b4aa6b7ab2935fa193eda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 1]: /images/20220309/d4eb20344ed3429588a9eaff0eb92de7.png
[20190313140935770.png]: /images/20220309/701ba84ede7e44d596e120dc4ac2cd19.png
[20190313141012468.png]: /images/20220309/ce5015c07d454a9c91768e7da3de707c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 2]: /images/20220309/548befa302654e318222d9f2fe5589dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 3]: /images/20220309/5d42032e007f45988b58e79206ae06ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 4]: /images/20220309/246964b2770f461296217fcc946e5251.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 5]: /images/20220309/581891d879c243a393148494478d0452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 6]: /images/20220309/8c5bfdc0183a4686937d9c2d7d4d2295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29sZHNoYXVp_size_16_color_FFFFFF_t_70 7]: /images/20220309/e067ae6a5be74893820a6afa040cd83d.png