1.插槽功能
- 不具名插槽
子组件：
<div class="child">
<slot></slot>
</div>
父组件:
<div class="main">
<child>
<p>我是父组件仍在子组件插槽的内容</p>
</child>
</div>
- 具名插槽，就是为插槽提供一个名字
子组件：
<slot name="slot1"></slot>
<slot name="slot2"></slot>
父组件：
<child>
<p slot="slot1">我是父组件仍在子组件插槽的内容</p>
<p slot="slot2">我是父组件仍在子组件的第二个内容</p>
</child>
- 如果父组件没传递数据，就显示slot里面默认的数据
子组件：
<slot name="slot1">如果没有父组件没有传递数据，就显示我</slot>
<slot name="slot2"></slot>
父组件：
<child>
<p slot="slot2">我是父组件仍在子组件的第二个内容</p>
</child>
- 作用域slot：数据是子传父
子组件：发送数据
<slot name="slot3" text="我是子组件数据"></slot>
父组件：接受数据
<child>
<p slot="slot3" slot-scope="props">
{{ props.text }}
</p>
</child>
2.keep-alive 缓存动态组件
- 动态组件
子组件：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 默认值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';
- 拦截器
在请求或响应被then 或 catch 处理前拦截他们
先是请求，响应，然后才拿到数据
在拿数据前参数是否合理，请求是否有问题，
返回的数据如果是错的，就没必要给了
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器，可以这样：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
post数据可以在发送请求之前加上qs.stringify
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log(config)
if(config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
加qs.stringify之前的数据：
"{"user_id":"iwen@qq.com","password":"iwen123","vertification_code":"crfvw"}"
加qs.stringify后的数据
"user_id=iwen%40qq.com&password=iwen123&vertification_code=crfvw"
4.跨域解决方案
- 如果服务器不做跨域处理，即node中不加：
//设置跨域访问
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中进行设置
把 proxyTable: {}, 替换
dev: {
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2',//目标地址,比如豆瓣
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': ''
}
}
}
}
然后在main.js中加：
Vue.prototype.HOST = '/api'//读HOST相当于读config/index.js中的地址
完了之后写法是：
var url = this.HOST + '/login
this.$axios.post(url,{
})
这种跨域解决方案，只适用于测试阶段，打包的时候，不会具备服务器，不能跨域了。后端去解决
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"){//判断是不是数字
return '$' + val
}else{
return val
}
},
contenData(val) {
return val + '-------来自外星人' + new Date()
}
}
