一、技术栈

image.png

二、参考文献

官网
https://cn.vuejs.org/v2/guide/
菜鸟教程
https://www.runoob.com/vue2/vue-tutorial.html

三、引入



    
        
        
        
        
        
        
        
        
    
    
        
            {{ msg }}
            状态码是：{{ code }}

四、常用指令

1、v-bind（简写为：）

动态地绑定一个或多个特性，或一个组件 prop 到表达式

2、v-on（简写为：@）

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

案例：跑马灯

3、v-model

在表单控件或者组件上创建双向绑定

案例：计算器

4、v-for

遍历




    
    
    
    


    
    
        {{user.id}}-----{{user.name}}

五、filter

过滤器




    
    
    
    


    
        {{ msg | change('--') | dada('**') }}
    
    
        {{msg | dada('xixi')}}

六、键盘事件

七、自定义指令

八、自定义有值指令




    
    
    
    


    
        要经常给妈妈点钱，让妈妈去挥霍吧！

九、自定义指令对象传参

十、局部定义

十一、vue-resource

网络请求




    
    
    
    
    


    
        
            
            
            {{user.login}}

十二、axios

基于promise用于浏览器和node.js的http客户端

特点

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

发送请求的两种方式

十三、动画

十四、使用动画类实现动画

十五、钩子函数实现动画效果

十六、列表过渡




    
    
    
    
    


    
        
        
        
        
            {{item.id}}. {{item.name}}

十七、生命周期函数

参考文献：https://segmentfault.com/a/1190000011381906

Vue生命周期中mounted和created的区别

beforeCreate

类型：Function
详细：

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
参考：生命周期图示

created

类型：Function
详细：

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
参考：生命周期图示

beforeMount

类型：Function
详细：

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

mounted

类型：Function
详细：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
```
mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
```
该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

beforeUpdate

类型：Function
详细：

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
参考：生命周期图示

updated

类型：Function
详细：

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
```
updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}
```
该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

activated

类型：Function
详细：

keep-alive 组件激活时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

deactivated

类型：Function
详细：

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

beforeDestroy

类型：Function
详细：

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。
参考：生命周期图示

destroyed

类型：Function
详细：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

errorCaptured

2.5.0+ 新增

类型：(err: Error, vm: Component, info: string) => ?boolean
详细：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false以阻止该错误继续向上传播。

你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。

十八、创建组建的方式

案例：组件计算器

十九、私有组件

二十、组件切换

//法一：v-if


    
        
        
    
    
        
        
            登录
            注册
            
            
        
        
        
        
        
    




//法二：components


    
        
        
        
    
    
        
            登录
            注册

二十一、组件传值

//父组件向子组件传值


    
        
        
    
    
        
            父组件向子组件传值，使用数据绑定的方式传递。：后面的值必须在组建中使用pros接收。否则在子组件中没有办法获取到父组件通过这种方式传过来的值
            
        
        
        
        
    





//父组件向子组件传递方法


    
        
        
    
    
        
            {{conso('不怕热')}}
            对于方法来说，传递到子组件要是用事件绑定的形式
            
        
        
        
        
    




//子组件向父组件传递方法


    
        
        
    
    
        
            {{conso('不怕热')}}
            对于方法来说，传递到子组件要是用事件绑定的形式

案例：列表评论



    
        
        
         
    
    
        
            
            
              
                {{item.name}}
                {{item.content}}

二十二、插槽




    
    
    
    



    
        
        here is the best place！---{{pm}}

二十三、路由

参考文献：https://router.vuejs.org/zh/

什么是路由？

我们认识的路由

进入到网站的根目录，然后根据文件夹的名称或者文件名去找到对应的文件，然后运行

后端的路由

指网络上的某一个资源URL

后端框架的出现，以及安全性的考虑，后端一般做单一的入口
例如：http://localhost/vue_api/index.php?m=api&a=getlist

单一的入口是指在这个入口文件中，通过路由参数的方式（m=api&a=getlist）将请求分发给不同的资源或者文件处理

前端路由

锚点实现的路由

前端的路由是不会发生页面的刷新或者页面的重启请求的

hash值的变化是不会造成页面重新请求的

二十四、vuex

参考文献：https://vuex.vuejs.org/zh/

概念：在多个组件中共享状态（需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，并且是响应式）

适用情况：用户登陆状态、用户名称、头像、地理位置，商品收藏、购物车中的物品等等