1.插槽功能

• 不具名插槽

子組件：    
    <div class="child">
        <slot></slot>
    </div>
父組件:
    <div class="main">
        <child>
            <p>我是父組件仍在子組件插槽的內(nèi)容</p>
        </child>
    </div>

• 具名插槽，就是為插槽提供一個名字

子組件：
        <slot name="slot1"></slot>
        <slot name="slot2"></slot>
父組件：
        <child>
            <p slot="slot1">我是父組件仍在子組件插槽的內(nèi)容</p>
            <p slot="slot2">我是父組件仍在子組件的第二個內(nèi)容</p>
        </child> 

• 如果父組件沒傳遞數(shù)據(jù)，就顯示slot里面默認(rèn)的數(shù)據(jù)

子組件：
        <slot name="slot1">如果沒有父組件沒有傳遞數(shù)據(jù)，就顯示我</slot>
        <slot name="slot2"></slot>
父組件：
        <child>
            <p slot="slot2">我是父組件仍在子組件的第二個內(nèi)容</p>
        </child> 

• 作用域slot：數(shù)據(jù)是子傳父

子組件：發(fā)送數(shù)據(jù)
        <slot name="slot3" text="我是子組件數(shù)據(jù)"></slot>
父組件：接受數(shù)據(jù)
        <child>
            <p slot="slot3" slot-scope="props">
                {{ props.text }}
            </p>
        </child> 

2.keep-alive 緩存動態(tài)組件

• 動態(tài)組件

子組件：small
父組件：
html:
<component :is="currentView"> 或者 {{ currentView }}

import small from './small'
components: {
    small
}
data() {
    return {
        currentView: 'small'
    }
}

• 組件視圖切換

父：
<component :is="currentView"> 或者 {{ currentView }}
<button @click="changeView">切換視圖</button>
import small from './small'
import small from './small2'

components: {
    small，
    small2
}
data() {
    return {
        currentView: 'small',
        flag: true
    }
}
methods: {
    changeView() {
        if(this.flag) {
            this.currentView = 'small
            this.falg = false
        }else{
            this.currentView = 'small2
            this.flag = true
        }
    }
}

3.axios攔截

• 全局的 axios 默認(rèn)值main.js

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 攔截器
  在請求或響應(yīng)被then 或 catch 處理前攔截他們
  先是請求，響應(yīng)，然后才拿到數(shù)據(jù)
  在拿數(shù)據(jù)前參數(shù)是否合理，請求是否有問題，
  返回的數(shù)據(jù)如果是錯的，就沒必要給了

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
    // 對響應(yīng)數(shù)據(jù)做點什么
    return response;
  }, function (error) {
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error);
  });

如果你想在稍后移除攔截器，可以這樣：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

post數(shù)據(jù)可以在發(fā)送請求之前加上qs.stringify

axios.interceptors.request.use(function (config) {
  // 在發(fā)送請求之前做些什么
  console.log(config)
  if(config.method === 'post') {
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

加qs.stringify之前的數(shù)據(jù)：

"{"user_id":"iwen@qq.com","password":"iwen123","vertification_code":"crfvw"}"

加qs.stringify后的數(shù)據(jù)

"user_id=iwen%40qq.com&password=iwen123&vertification_code=crfvw"

4.跨域解決方案

• 如果服務(wù)器不做跨域處理，即node中不加：

//設(shè)置跨域訪問
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

• 前端可以在config/index.js中進(jìn)行設(shè)置

把  proxyTable: {}, 替換 
dev: {
    proxyTable: {
      '/api': {
          target: 'http://api.douban.com/v2',//目標(biāo)地址,比如豆瓣
          changeOrigin: true,
          secure: false,
          pathRewrite: {
              '^/api': ''
          }
        }
    }
}
然后在main.js中加：
Vue.prototype.HOST = '/api'//讀HOST相當(dāng)于讀config/index.js中的地址

完了之后寫法是：

var url = this.HOST + '/login
this.$axios.post(url,{

})

這種跨域解決方案，只適用于測試階段，打包的時候，不會具備服務(wù)器，不能跨域了。后端去解決

5.自定義指令directive

• 全局指令

main.js:
Vue.directive('focus, {
    inserted: function(el) {//el表示綁定的元素，這里指的是input
        el.foucs()
    }
})

使用:

<input type="text" v-focus>

• 局部指令
  在組件中寫：

html:
<input type="text" v-focus>
<p v-mycss></p>

export default {
    directives: {
        focus: {
            inserted: function(el) {
                el.focus()
            }
        },
        mycss: {
            inserted: function(el) {
                el.style.collor = 'red'
            }
        }
    }
}

6. 過濾器filter

vue可自定義過濾器

html: 
{{ price | moneyChange }}
{{ info | contextData }}

js:

filters: {
    moneyChange(val) {
        if(typeof val === "number"){//判斷是不是數(shù)字
            return '$' + val
        }else{
            return val
        }
    },
    contenData(val) {
        return val + '-------來自外星人' + new Date()
    }
}