记录一下在项目中开发vue的使用技巧
1.class和style部分
在样式部分主要就是样式的动态绑定，和table切换的样式变化
- class动态绑定：
：class="['class1',{judge:'class2'?'class3'}]"
//意思是class1一直都在，如果judge为真就用class2 否则用class3
:class="{judge:'class2'?'class3'}"
:class="{ 'active': isActive }"
- style动态绑定，用法和classa差不多，不过如果你想把样式写在data里面可以这样做
：style="class1"
在data里面写样式
class1:{
backgroundColor:"pink",
height:"30%"
}
这样就可以根据需要改变class1的样式了
- 3.一些常用的css属性
渐变分为线性渐变和中心渐变
//1.中心渐变
background-image: radial-gradient(rgb(9, 76, 105, 0.7), rgb(9, 76, 105));
//2.线性渐变
background-image: linear-gradient(to right, red , yellow);
2 .图片的使用
在vue中我们使用图片可以
<img src="./tu.png" />
也可以
<img :src="imgUrl" />
imgUrl:"require("./tu.png")"
做图片的切换可以这样
<img :src="isTrue : imgUrl ? imgU2" />
在data里定义imgUrl imgU2
imgUrl:"require("./tu.png")"，
imgU2:"require("./tu2.png")"
3. table切换样式变化
先写一个table栏
<div id="container" >
<div
v-for="(item, index) in listTitle"
id="index"
:key="index"
@click="choose(item)"
>
<img :src="item.url" />
<p>{{ $t(item.name) }}</p>
</div>
</div>
当点击table时绑定choose(item),在methods中定义choose
choose(item) {
var spanArr = document
.getElementById("container")
.getElementsByTagName("div");
for (var i = 0; i <= 8; i++) {
if (id === i) {
spanArr[id].style.border = "2px solid rgb(255,230,127)";
spanArr[id].style.color = "rgb(255,230,127)";
} else {
spanArr[i].style.border = "0";
spanArr[i].style.color = "#fff";
}
},
这样就是实现了切换的样式变化
4. 轮训http请求
需求是这样的，点击一个页面，轮训一个http请求，切换路由，销毁前一个页面的请求 实现步骤：
- 1.点击页面发起请求 在methods定义方法
getData(){
trye{
//在这里发起异步请求，做数据处理
}catch{
在这里做错误处理
}
}
在data里定义一个定时器
timer: null,
在methods 定一个定时器方法方法
start() {
let _this = this;
//如果请求成功就接着执行 getData() 这里用到了闭包
this.ct = setTimeout(() => {
_this.getList();
}, 1000);
},
再定一个清除定时器的方法
clear() {
clearTimeout(this.timer); // 清除
}
改造之前请求的方法
getData(){
trye{
//在这里发起异步请求，做数据处理
//如果请求成功就接着执行 getData() 这里用到了闭包
this.start()
}catch{
//在这里做错误处理
//清除定时器
this.clear()
}
}
//在页面加载前调用
created() {
this.getList();
},
到这里轮训请求就完成了，至于为什么用setTimeout不用setInterval，这里就不多说了
- 判断在本页面请求数据，不在本页面不请求
我是在vuex定义一个值，在切换路由时改变这个值，在页面加载时，判断这个值，如果是要访问的页面，就请求，不是就请求
在vuex state定义一个变量 page
page: 0,
在mutations中定义一个改变page的方法
// 修改page 参数
pageChange(state, page) {
state.page = page;
},
在切换路由时改变page
这个id就是页面判断是否请求的值
this.$store.commit("pageChange", id);
修改我们之前在定义的轮训方法
getData(){
trye{
//如果访问的是当前页面就发起请求
if(his.$store.state.page === 0){
//如果请求成功就接着执行 getData() 这里用到了闭包
this.start()
}else{
//如果不是当前页面清除定时器
this.clear()
}
}catch{
//在这里做错误处理
//清除定时器
this.clear()
// 判断是否在当前页面 接着发起请求
if(his.$store.state.page === 0){
this.start()
}
}
}
到这里轮训就完了，不过要注意的是这样不能使用keepAlive,因为使用keepAlive不会触发 created()，我真心感觉自己这个轮训做的有问题，希望大佬们提出好的方案
5.一些方法
- 1.十进制转二进制位操作
/**
* @param {number} 十进制数据
* @package 取第几位
* @returns 第几位数据
*/
export function weiInt(arr = 100, i) {
return arr
.toString(2)
.split("")
.reverse()[i];
}
- 2 时间转时间戳
//获取当前时间戳 精确到秒
Date.parse(new Date());
//获取当前时间戳精确到毫秒
new Date().getTime()
//获取当前时间
new Date()//2020-06-21T06:33:21.621Z
时间戳转时间 yyyy-MM-dd h ：f：m
export function formatDate(inputTime) {
var date = new Date(inputTime);//如果是10位的时间戳*1000
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
}
小时分钟转化位时间戳
timeData(a = "00:00") {
const hour2 = a.split(":")[0];
const min2 = a.split(":")[1];
return Number(hour2 * 3600) + Number(min2 * 60);
}
6.路由跳转
vue 路由跳转有四种方法
1. router-link
- router-link 不带参数 跳转
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
- router-link 带参数跳转
<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
-
获取参数
