- 通过设置padding-bottom固定宽高比，让含有资源文件的元素占位，放在在低网速下加载资源过程中出现“抖动”
width: 100%
height: 0
padding-bottom: 31.25%
scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
sass和less的样式穿透 使用/deep/
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}
stylus的样式穿透 使用>>>
.wrapper >>> .swiper-pagination-bullet-active{
background: #fff;
}
npm install axios --save
import axios from "axios";
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// always executed
});
把静态文件放入 public 文件下
// 静态数据存放的位置
public/mock/home.json
创建一个 vue.config.js 文件放在根目录下
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/mock'
}
}
}
}
}
axios
.get('/api/home.json')
.then(this.handler)
touch/click与fastclick
- 移动端浏览器触摸事件: touchstart、touchmove、touchend、touchcancel
- 触摸列表: touches、targetTouches、changedTouches
- 属性: clientX、clientY、identifier、pageX、pageY、screenX、screenY、target
preventDefault 方法的作用在于：阻止元素默认事件行为的发生，但有意思的是，当我们在目标元素同时绑定 touchstart 和 click 事件时，在 touchstart 事件回调函数中使用preventDefault方法，可以阻止后续 click 事件的发生
npm install fastclick --save
//main.js
import fastClick from 'fastclick'
fastClick.attach(document.body)
- 触摸事件 touchstart、touchmove、touchend
- 如何解决 touchstart 事件与 click 事件的冲突
- 也来说说touch事件与点击穿透问题
- 你真的了解FastClick吗？
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
include - 字符串或正则表达式。只有匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
因为使用keep-alive后，组件不会被销毁，所以组件切换时,mounted钩子不会被调用。依据这个特点，可以只让组件在第一次加载后在mounted钩子中发一次axios请求，而后在满足条件时才再次发送axios请求
<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
data() {
return {
lastCity: ""
};
},
methods: {
getHomeInfo() {
axios
.get("/api/index.json?city=" + this.city)
.then(this.getHomeInfoSucc);
},
getHomeInfoSucc(res) {
res = res.data;
if (res.ret && res.data) {
const data = res.data;
...
}
}
},
computed: {
...mapState(["city"])
},
mounted() {
this.lastCity = this.city;
this.getHomeInfo();
},
activated() {
if (this.lastCity !== this.city) {
this.lastCity = this.city;
this.getHomeInfo();
}
}
};
-
允许组件模板递归地调用自身
-
当在有 vue-devtools, 未命名组件将显示成 , 这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树
-
keep-alive exclude指定的名字
在开发模式下，请求数据的接口来自后端，实现这个功能，首先将json数据复制到php服务器根目录下的指定目录（本例为api目录）
然后将devServer的proxy代理端口指向后台服务器地址。以本地搭建的PHP服务器（PHP服务器默认地址为http://localhost:80）为例，配置如下
module.exports = {
devServer: {
proxy: {
'/api': {
+ target: 'http://localhost:80',
+ pathRewrite: {
+ '^/api': '/api' //这样每次发起请求，都会转发到'http://localhost:80/api'下，这个目录下存放着json数据（后端服务器根目录下的api目录）
+ }
- target: 'http://localhost:8080',
- pathRewrite: {
- '^/api': 'mock'
- }
}
},
...
}
npm run build
将dist文件夹下的文件全部复制到php服务器的根路径下，服务器会自动寻找html文件，然后打开服务器的地址即可访问
