1.函数路由跳转：this.$router.push('detail')

2. SEO 思路  处理 Vue 单页面 Meta SEO的另一种思路

3.生命周期： Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿 - SegmentFault 思否

4. axios配置： vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新） - CSDN博客

5.axios 视频详解：Axios专题视频 - 网易云课堂

6. 优化，及Vue 开发常见问题    原文链接：https://juejin.im/post/5b174de8f265da6e410e0b4e

---

高手博客：

    大漠：w3cplus_引领web前沿，打造前端精品教程

---

指令

v-model : 只要是表单元素 input ,select, cheked   必加，因为需要数据双向绑定

---

生命周期

生命周期 生命周期用法（请求放在 created 中，这时候还没有挂在DOM这个空白时间就可以用来请求数据）

---

axios

.then :请求成功执行    .catch : 请求失败执行

这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then( function (res) {

    console.log(this.data)

}.bind(this))

请求方式

params: 用于 ‘GET ’ 请求，data: 用于 'PUT', 'POST', 和 'PATCH'

axios.get('url', {params:data});

axios.post('url',data)

GET：

axios.get('/user',{

    params: {

        ID: 12345

     }

}) .then(function (response) {

    console.log(response);

}) .catch(function (error) {

    console.log(error);

});

POST：params 换成 data

---

vue 使用全局变量

场景： axios baseUrl   正式： https:// ****             测试：192.168.**.****

开发时使用的是测试环境地址，正式环境需要切换成正式地址，如果不使用全局变量，那么需要每个页面都去修改，很蠢，所以使用下面的方式 在 vue 中使用全局变量， 设置以及引用

1. static > config > global.js  : 创建公共配置文件

添加：

const BASE_URL = 'http://192.168.0.108:7878/zkview/'  

export default {   

    BASE_URL

}  

2. main.js 入口文件中引用

import global_ from './../static/config/global'

Vue.prototype.GLOBAL = global_; 

axios.defaults.baseURL = global_.BASE_URL;

3.使用变量

alert(this.GLOBAL.BASE_URL);  

Sass

     1.vue 中安装 sass

     2.sass教程  Less介绍及其与Sass的差异_less, Sass, stylus, Preprocessor 教程_w3cplus

配置 (移动端 px 自动转换 rem 插件，配置后可直接使用设计搞上的px) flexible.js

安装：    npm install lib-flexible --save    

                npm install px2rem-loader --save-dev

引入：

            mian.js: 引入lib-flexible

                        import 'lib-flexible'

配置：

       ① 配置px2rem-loader： 

            build/utils.js 文件下 exports.cssLoaders  中添加：

                // px 自动转换 rem 插件配置

                const px2remLoader = {

                    loader: 'px2rem-loader',

                    options: {

                        remUnit: 75 //默认设计稿宽 750px

                    }

                }

      ② generateLoaders 方法中

            const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

用法 ：

    直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个在px后面添加/px/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个

---

箭头函数：

    1.只有一个参数 可以省略 小括号

    2.不需要写 return 语句，自动return

    3.没有 this ，指向上级，可以 绑定 this 来拿到

    4.在事件中，如果要使用 event 事件源，如果没参数的情况，可以直接省略，默认会传入 事件源，如果有参数需要传递，需要在参数首位添加         $event ,否则 会被参数覆盖

---

Computed

    1.常用于计算

    2.必须 return

    3.不支持异步 (在setTimeout 中使用 return 实际是 return 的是 setTimeout  结果 return undifind)

Watch

    1.用于监控数据变化

    2.支持异步

例子

    1.双层循环

2.checkbox

3.radio

4.select