1.錯(cuò)誤：導(dǎo)航重復(fù):避免多余的導(dǎo)航到當(dāng)前位置
error:NavigationDuplicated: Avoided redundant navigation to current location
解決方案：
在 router.js 文件添加一下代碼
//解決方案
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this,location).catch(err => err);
}
Vue.use(VueRouter)
const routes = [
{...}
2.父子通信組件生命周期加載順序
image.png
3.實(shí)現(xiàn)跳轉(zhuǎn)當(dāng)前頁面每次跳到頂部
使用路由全局后置守衛(wèi)
route.js 文件
const router = new VueRouter({
routes,
// mode: 'history'
})
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
export default router
4.vue使用高德地圖api
高德地圖api官網(wǎng)：https://developer.amap.com/product/map#/
4.1配置
vue.config.js
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap',// 高德地圖配置
},
},
}
4.2引入
在 index.js 文件腳本引入
/*
*@key: 高德地圖api注冊(cè)的key
*/
<script src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
<div id="app"></div>
4.3 使用
<div id="container" class="map"></div>
<script>
import AMap from 'AMap';
methods: {
createMap() {
//創(chuàng)建地圖
var map = new AMap.Map('container', {
resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
zoom:11, //初始化地圖層級(jí)
center: [120.024039,35.818754] //初始化地圖中心點(diǎn)
});
//添加標(biāo)記
var marker = new AMap.Marker({
position: [120.024039,35.818754],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
},
},
created() {
this.createMap();
}
</script>
4.4 效果
image.png
5.動(dòng)態(tài)引入圖片
在data寫圖片路徑,需要在圖片路徑添加 require 進(jìn)行解析。
data() {
return: {
info: {
id: 1,
icon: require("@/assets/images/main/icon_phone.png"),
name: "電話",
desc: "400-0309-360",
},
}
}
//使用
<img :src="info.icon" />
2.在css寫圖片路徑荆姆，需要在圖片路徑添加 ~ 修飾符平挑。
background-image: url("~@/assets/images/main/us_bg.png");
6.box-shadow 陰影
box-shadow屬性接收一個(gè)由5個(gè)參數(shù)組成的值族奢，每個(gè)值的意思如下：
h-shadow: 水平陰影的位置 (x軸上陰影的位置睦裳，正數(shù)右邊瘤礁，負(fù)數(shù)左邊)
v-shadow:垂直陰影的位置 (y軸上陰影的位置寺酪，正數(shù)上面谓娃，負(fù)數(shù)下面)
blur：模糊距離 （這個(gè)值代表陰影的模糊半徑脚乡，如果是“0”意味著陰影是完全實(shí)心的，沒有任何模糊效果滨达。該值越大奶稠，實(shí)心度越小，陰影越朦朧和模糊捡遍，該值不支持負(fù)數(shù)锌订。）
spread：陰影的尺寸 （如果正值會(huì)在元素的四個(gè)方向延伸陰影。負(fù)值會(huì)使陰影變得比元素本身尺寸還要小画株。）
color：陰影的顏色 （指定陰影的顏色）
用法：
&:hover {
box-shadow: -2px 2px 8px 4px #c3c3c3;
}
效果圖：
image.png
7.使用vue時(shí)需要加載初始化數(shù)據(jù)
- 問題描述：
- 在created生命周期內(nèi)進(jìn)行異步數(shù)據(jù)的請(qǐng)求辆飘，且將獲取到的數(shù)據(jù)賦值給this.data。
- 此時(shí)如果在mounted生命周期里獲取this.data是獲取不到的谓传。
- 問題分析：
- 因?yàn)楫惒郊虞d需要時(shí)間蜈项，如果延遲時(shí)間是可以獲取到數(shù)據(jù)的，但是問題是不知道需要延遲多久续挟，況且這個(gè)方法也不是很好紧卒。
- 那么有沒有一個(gè)比較優(yōu)雅的辦法進(jìn)行獲取這個(gè)異步加載的數(shù)據(jù)呢
- 解決辦法：
- 在data里進(jìn)行數(shù)據(jù)的定義
data(){
dataList:''
}
- 使用watch方法的數(shù)據(jù)監(jiān)聽
watch:{
dataList(){
this.$nextTick(()=>{
//此時(shí)就可以獲取到在created賦值后的dataList了
})
}
}
至此，遇到的問題就以解決~~~
8.js隨機(jī)生成數(shù)
js 可以使用 Math（算數(shù)） 對(duì)象來實(shí)現(xiàn)隨機(jī)數(shù)的生成诗祸。
| ceil(x) | 對(duì)數(shù)進(jìn)行上舍入跑芳，即向上取整轴总。 |
| floor(x) | 對(duì) x 進(jìn)行下舍入，即向下取整博个。 |
| round(x) | 四舍五入怀樟。 |
| random() | 返回 0 ~ 1 之間的隨機(jī)數(shù)，包含 0 不包含 1坡倔。 |
Math.ceil(Math.random()*10); // 獲取從 1 到 10 的隨機(jī)整數(shù)漂佩，取 0 的概率極小脖含。
Math.round(Math.random()); // 可均衡獲取 0 到 1 的隨機(jī)整數(shù)罪塔。
Math.floor(Math.random()*10); // 可均衡獲取 0 到 9 的隨機(jī)整數(shù)。
Math.round(Math.random()*10); // 基本均衡獲取 0 到 10 的隨機(jī)整數(shù)养葵，其中獲取最小值 0 和最大值 10 的幾率少一半征堪。
9.md5加密數(shù)據(jù)
- npm安裝
npm install js-md5
- 全局引用掛載
import md5 from 'js-md5'
Vue.prototype.$md5 = md5
- 使用
mounted () {
console.log(this.$md5('1233445'))
}
- 局部引用和使用
import md5 from 'js-md5'
console.log(md5('1233445'))
10.echarts 圖表的使用
- NPM 安裝 ECharts
npm install echarts --save
- 引入ECharts
import * as echarts from 'echarts';
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
- 例子
<template>
<div id="App">
<!-- echarts -->
<div id="main"></div>
</div>
</template>
<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
name: "App",
components: {},
setup() {
// 基于準(zhǔn)備好的dom关拒，初始化echarts實(shí)例
const createEcharts = function () {
// 基于準(zhǔn)備好的dom佃蚜，初始化echarts實(shí)例
let myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
let ec = {
title: {
text: "ECharts 入門示例",
},
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
}
myChart.setOption(ec);
};
onMounted(() => {
createEcharts();
});
return {
createEcharts,
};
},
};
</script>
<style scoped>
#App {
height: 100vh;
width: 100vw;
margin: auto;
}
#main {
width: 50%;
height: 50%;
}
</style>
