1蜕便、vue選項(xiàng)卡碌更，點(diǎn)擊動(dòng)態(tài)設(shè)置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;
},
// 點(diǎn)擊傳選中的index稀拐，將選中的index賦值給tabindex
參考：https://segmentfault.com/q/1010000011172980
2赡鲜、v-for渲染嵌套對(duì)象（object）
- html
<li v-for="(value, key, index) in obj">
{{value.name}} // 值
{{key}} // 鍵
{{index}} // 下標(biāo)
</li>
- js
data(){
return{
obj:{
"0": {
"name": "1"
},
"2": {
"name": "2"
}
}
}
參考：https://segmentfault.com/q/1010000012786129
3吝镣、this.$router.push({}) 實(shí)現(xiàn)路由跳轉(zhuǎn)
push 后面可以是對(duì)象睬塌，也可以是字符串：
// 字符串
this.$router.push('/home/first')
// 對(duì)象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
例如:
// 點(diǎn)擊事件里面寫
this.$router.push({ name: 'distributesList', query: { ruleForm: this.ruleForm }})
參考：
http://www.cnblogs.com/wisewrong/p/6277262.html
vue 設(shè)置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監(jiān)聽(tīng)
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實(shí)現(xiàn)標(biāo)簽 href動(dòng)態(tài)拼接泉蝌，點(diǎn)擊后使用新窗口打開(kāi)網(wǎng)頁(yè)
https://blog.csdn.net/sunhaobo1996/article/details/81272942
vue 一個(gè)方法同時(shí)請(qǐng)求多個(gè)接口歇万，怎么控制順序？在下一個(gè)接口獲取前一個(gè)接口返回的值為空勋陪，怎么解決
https://blog.csdn.net/weixin_39818813/article/details/82464132
https://blog.csdn.net/qq_38627581/article/details/77353015
將v-for生成的input框數(shù)據(jù)用v-model綁定到一個(gè)數(shù)組
a{
cur:[],
}, //把這個(gè)數(shù)組cur外面包個(gè)對(duì)象
v-model="a.cur[index]"
https://blog.csdn.net/TateBrwonJava/article/details/80616074
vue為一個(gè)元素綁定多個(gè)事件（分號(hào)隔開(kāi)）
<el-select v-model="search.departmentId" placeholder="請(qǐng)選擇部門" @change="search.realName = '';getAccountList()">
<el-option label="請(qǐng)選擇部門" value=""></el-option>
<el-option
v-for="item in depNameList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
多個(gè)事件時(shí)贪磺，要加括號(hào)
如：@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}}放在標(biāo)簽之間會(huì)有一個(gè)問(wèn)題就是空格符號(hào)不會(huì)被識(shí)別,所以直接用的v-html指令進(jìn)行替換
<p class="cmm-wrapper" v-html="additionalRules" ></p>
.cmm-wrapper{
white-space: pre-wrap; //解決的關(guān)鍵就是這一句,
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 點(diǎn)擊子節(jié)點(diǎn)不會(huì)捕獲到父節(jié)點(diǎn)的事件
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項(xiàng)目如何修改node_mudule為公用文件？
https://blog.csdn.net/qq_35393869/article/details/81283870
Vue使用watch監(jiān)聽(tīng)路由的變化
watch:{
'$route.path':function(newVal,oldVal){
//console.log(newVal+"---"+oldVal);
if(newVal === '/login'){
console.log('歡迎進(jìn)入登錄頁(yè)面');
} else if(newVal === '/register'){
console.log('歡迎進(jìn)入注冊(cè)頁(yè)面');
}
}
}
https://blog.csdn.net/xukongjing1/article/details/82901054
粒子運(yùn)動(dòng) particles.js 在vue中的使用
https://blog.csdn.net/zhy18820612/article/details/92770301
- particles.js 屬性：
https://blog.csdn.net/lbPro0412/article/details/82417078
html2canvas 在Vue中的應(yīng)用
- 在Vue中诅愚，html2canvas生成頁(yè)面截圖并上傳
https://www.cnblogs.com/steamed-twisted-roll/p/10496054.html - html2canvas截圖只能截到可視區(qū)域（clone）
https://blog.csdn.net/zt_fucker/article/details/76583032 - html2canvas截圖清晰度問(wèn)題（scale）
https://blog.csdn.net/qq_36459098/article/details/79803280 - 截圖清晰度了解（沒(méi)用過(guò)）：
http://www.reibang.com/p/96ce8a0df559
https://blog.csdn.net/xdongll/article/details/55667071
canvas截圖：
- 通過(guò)css設(shè)置canvas背景圖片
方法：將圖片和canvas的尺寸設(shè)置相同寒锚，然后元素疊加
https://blog.csdn.net/meiqi0538/article/details/82057055 - canvas實(shí)現(xiàn)視頻截圖（html）
https://www.cnblogs.com/lillian0106/p/6925323.html
https://blog.csdn.net/ffffffff8/article/details/84637895 - canvas 獲取主色調(diào)
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);
// 獲取像素?cái)?shù)據(jù)
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項(xiàng)目中，將信息生成二維碼的方法
https://blog.csdn.net/weixin_37861326/article/details/80362591
- vue生成二維碼及注意事項(xiàng)
http://www.reibang.com/p/8f9b90e6fdd6 - qrcodejs如何設(shè)置寬度和高度為rem單位
給這個(gè)canvas一個(gè)class违孝，里面寫上寬度高度加上!important就可以了
https://blog.csdn.net/qq_41862017/article/details/97390272
Vue.set(object, key, value)
vue修改數(shù)組中某一條數(shù)據(jù)刹前，并且更新頁(yè)面中的數(shù)據(jù)
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點(diǎn)擊事件和拖拽事件沖突
http://www.reibang.com/p/1a85a3fb3d43
https://www.cnblogs.com/xiaoleilei123/p/10669835.html
vue實(shí)現(xiàn)pc端調(diào)取本地?cái)z像頭拍照功能
video+canvas
https://blog.csdn.net/RussW0/article/details/104694368/
問(wèn)題：視頻黑屏（打開(kāi)新建彈框，關(guān)閉后打開(kāi)編輯彈框）（兩個(gè)彈框均引用了拍照公共子組件）
原因：用 :visible.sync="isShow" 控制添加和編輯的彈框雌桑，導(dǎo)致有兩個(gè)一樣的子組件同時(shí)存在喇喉，視頻播放失敗
解決辦法：用v-if控制，使頁(yè)面只存在一個(gè)彈框
:visible.sync="isShow" v-if="isShow"
