1、vue选项卡，点击动态设置css
- html
<div v-for="(item,index) in list" :class="{selected:index == tabIndex}"
@click="tabNameClick(index)">{{item}}</div>
// selected是被选中的css样式
- js
tabNameClick: function(index){
this.tabIndex = index;
},
// 点击传选中的index，将选中的index赋值给tabindex
参考：https://segmentfault.com/q/1010000011172980
2、v-for渲染嵌套对象（object）
- html
<li v-for="(value, key, index) in obj">
{{value.name}} // 值
{{key}} // 键
{{index}} // 下标
</li>
- js
data(){
return{
obj:{
"0": {
"name": "1"
},
"2": {
"name": "2"
}
}
}
参考：https://segmentfault.com/q/1010000012786129
3、this.$router.push({}) 实现路由跳转
push 后面可以是对象，也可以是字符串：
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
例如:
// 点击事件里面写
this.$router.push({ name: 'distributesList', query: { ruleForm: this.ruleForm }})
参考：
http://www.cnblogs.com/wisewrong/p/6277262.html
vue 设置scrollTop不起作用
一定要加上this.$nextTick()方法
this.$nextTick(() => {
document.getElementById('scrollUl').scrollTop = (this.hours - 2) * 48 + 100
})
https://blog.csdn.net/Coding_Jia/article/details/80778108
vue watch监听
watch: {
isShow (new, oldval) {
if (new == true) {
this.id = 1
}
}
}
vue 的hover事件
<li @mouseover="selectStyle (item) "
:class="{'active':item.active}"
@mouseout="outStyle(item)">
具体参考：https://blog.csdn.net/sunshine_ping/article/details/80269707
vue + setTimeout
setTimeout(this.end(),4000);
https://blog.csdn.net/qq_27295403/article/details/83375574
vue 路由配置
https://www.cnblogs.com/padding1015/p/7884861.html
Vue实现标签 href动态拼接，点击后使用新窗口打开网页
https://blog.csdn.net/sunhaobo1996/article/details/81272942
vue 一个方法同时请求多个接口，怎么控制顺序？在下一个接口获取前一个接口返回的值为空，怎么解决
https://blog.csdn.net/weixin_39818813/article/details/82464132
https://blog.csdn.net/qq_38627581/article/details/77353015
将v-for生成的input框数据用v-model绑定到一个数组
a{
cur:[],
}, //把这个数组cur外面包个对象
v-model="a.cur[index]"
https://blog.csdn.net/TateBrwonJava/article/details/80616074
vue为一个元素绑定多个事件（分号隔开）
<el-select v-model="search.departmentId" placeholder="请选择部门" @change="search.realName = '';getAccountList()">
<el-option label="请选择部门" value=""></el-option>
<el-option
v-for="item in depNameList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
多个事件时，要加括号
如：@click="Click();click(2)"
https://blog.csdn.net/CWH0908/article/details/86687999
正确理解使用Vue里的nextTick方法
https://blog.csdn.net/qq_39517820/article/details/83684517
vue解析文本以后,换行丢失解决（v-html指令）
- {{additionalRules}}放在标签之间会有一个问题就是空格符号不会被识别,所以直接用的v-html指令进行替换
<p class="cmm-wrapper" v-html="additionalRules" ></p>
.cmm-wrapper{
white-space: pre-wrap; //解决的关键就是这一句,
line-height: 40px;
color: #000032;
font-size: 28px;
}
https://blog.csdn.net/qq_42833001/article/details/86551256
vue之登录和token处理
https://www.cnblogs.com/qdlhj/p/9844944.html
阻止事件冒泡用
@click.stop 点击子节点不会捕获到父节点的事件
https://blog.csdn.net/weixin_34315485/article/details/91387568
axios的delete写法
axios.delete({
url: '/api/commodityCategory/delete',
data: {
"id":"a"
}
})
.then(function(response) {
console.log(response);
})
.catch(function(response) {
console.log(response);
});
http://www.imooc.com/wenda/detail/512278
vuejs项目如何修改node_mudule为公用文件？
https://blog.csdn.net/qq_35393869/article/details/81283870
Vue使用watch监听路由的变化
watch:{
'$route.path':function(newVal,oldVal){
//console.log(newVal+"---"+oldVal);
if(newVal === '/login'){
console.log('欢迎进入登录页面');
} else if(newVal === '/register'){
console.log('欢迎进入注册页面');
}
}
}
https://blog.csdn.net/xukongjing1/article/details/82901054
粒子运动 particles.js 在vue中的使用
https://blog.csdn.net/zhy18820612/article/details/92770301
- particles.js 属性：
https://blog.csdn.net/lbPro0412/article/details/82417078
html2canvas 在Vue中的应用
- 在Vue中，html2canvas生成页面截图并上传
https://www.cnblogs.com/steamed-twisted-roll/p/10496054.html - html2canvas截图只能截到可视区域（clone）
https://blog.csdn.net/zt_fucker/article/details/76583032 - html2canvas截图清晰度问题（scale）
https://blog.csdn.net/qq_36459098/article/details/79803280 - 截图清晰度了解（没用过）：
https://www.jianshu.com/p/96ce8a0df559
https://blog.csdn.net/xdongll/article/details/55667071
canvas截图：
- 通过css设置canvas背景图片
方法：将图片和canvas的尺寸设置相同，然后元素叠加
https://blog.csdn.net/meiqi0538/article/details/82057055 - canvas实现视频截图（html）
https://www.cnblogs.com/lillian0106/p/6925323.html
https://blog.csdn.net/ffffffff8/article/details/84637895 - canvas 获取主色调
https://blog.csdn.net/mengshang529/article/details/86316264 - canvas改变图片灰度
var video = document.getElementById("video");
var canvas = document.createElement("canvas");
canvas.crossOrigin = "Anonymous"; // 跨域
var context = canvas.getContext('2d');
canvas.width = video.width;
canvas.height = video.height;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 获取像素数据
var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
var targetBitmap = context.createImageData(canvas.width, canvas.height);
for (var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
var c = (r + g + b) / 3;
targetBitmap.data[i] = c;
targetBitmap.data[i + 1] = c;
targetBitmap.data[i + 2] = c;
targetBitmap.data[i + 3] = 255;
}
context.putImageData(targetBitmap, 0, 0);
vue项目中，将信息生成二维码的方法
https://blog.csdn.net/weixin_37861326/article/details/80362591
- vue生成二维码及注意事项
https://www.jianshu.com/p/8f9b90e6fdd6 - qrcodejs如何设置宽度和高度为rem单位
给这个canvas一个class，里面写上宽度高度加上!important就可以了
https://blog.csdn.net/qq_41862017/article/details/97390272
Vue.set(object, key, value)
vue修改数组中某一条数据，并且更新页面中的数据
import Vue from "vue";
this.positionListData.forEach((item,index)=>{
if(item.id==val.id){
console.log("set");
Vue.set(this.positionListData[index],'post_status',1)
}
})
https://blog.csdn.net/bittingCat/article/details/105681138
vue点击事件和拖拽事件冲突
https://www.jianshu.com/p/1a85a3fb3d43
https://www.cnblogs.com/xiaoleilei123/p/10669835.html
vue实现pc端调取本地摄像头拍照功能
video+canvas
https://blog.csdn.net/RussW0/article/details/104694368/
问题：视频黑屏（打开新建弹框，关闭后打开编辑弹框）（两个弹框均引用了拍照公共子组件）
原因：用 :visible.sync="isShow" 控制添加和编辑的弹框，导致有两个一样的子组件同时存在，视频播放失败
解决办法：用v-if控制，使页面只存在一个弹框
:visible.sync="isShow" v-if="isShow"
