目录
- 一、v-for循环中绑定不同点击事件
- 二、v-for循环中绑定不同class属性
- 三、event对象的offsetX, clientX, pageX, screenX
- 四、dom对象的clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth
- 五、el-table中加key值的作用
- 六、Vue事件绑定加括号和不加括号的区别
- 六、父组件接收事件参数方式
- 六、自定义组件（比如自定义父子组件或者elementui/iview组件）的$event
- 七、window.open打开路由
- 八、vue用原生引用js的包
- 九、export function和export 箭头函数的区别
- 十、js文件引入vuex
一、v-for循环中绑定不同点击事件
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<button @click="setUpClick(item)">click me</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['look', 'read', 'listen']
}
},
methods: {
setUpClick(value) {
this[value]()
},
look() {
console.log('look')
},
read() {
console.log('read')
},
listen() {
console.log('listen')
}
}
}
</script>
背景：SearchPage.vue中有个actions的属性，根据actionList中每个对象的key值不同通过
if语句判断调用不用的函数。searchBtns (payload) { // 根据key判断 if (payload.key === 1) { // 查询 this.searchHandle() } else if (payload.key === 2) { // 重置 this.resetHandle() } }优化：直接通过
this[payload.methodName]()一行代码解决searchBtns (payload) { this[payload.methodName]() },
二、v-for循环中绑定不同class属性
<template>
<div v-for="(item,index) in checkList" :key="index" :class="isMargin(item.id)">
动态绑定class：{
{item.reward}}
</div>
</template>
<script>
export default {
data() {
return {
checkList:[ {
id: 1, reward: 'hello'}, {
id: 2, reward:'world'} ]
}
},
computed: {
// 循环中使用计算属性，必须用封闭式返回
isMargin() {
return (index) => {
if (index === 1) {
return 'in_week_top'
} else if (index === 2) {
return 'in_week_left'
}
}
}
}
}
</script>
三、event对象的offsetX, clientX, pageX, screenX
参考链接：https://www.jianshu.com/p/9afff6038bf5
四、dom对象的clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth
参考链接：https://www.cnblogs.com/jiajialove/p/11758748.html
https://www.runoob.com/jsref/prop-element-offsetheight.html
五、el-table中加key值的作用
<template>
<div>
<el-table
height="400px"
border
:data="tableData2"
:key="randomKey"
ref="tableRef"
>
<el-table-column prop="tag1" label="第一列"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'EditCellTable2',
data () {
return {
// key属性是vue自带特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不更新这个key的话,显示隐藏列的时候,部分DOM不会重新渲染,导致table变化时候没有动画过度,显得很生硬.
randomKey: Math.random(),
tableData2: [
{
tag1: `可修改的标签${
Math.random()}`, tag2: `可修改的标签${
Math.random()}` }
]
}
},
methods: {
// 更新表格
refreshTable () {
// 直接刷新，滚动条位置无法保存
// this.randomKey = Math.random()
// 解决保存滚动条位置的问题
const beforeScrollTop = this.$refs.tableRef.$el.querySelector('div.el-table__body-wrapper').scrollTop
this.randomKey = Math.random()
setTimeout(() => {
this.$refs.tableRef.$el.querySelector('div.el-table__body-wrapper').scrollTop = beforeScrollTop
}, 0)
}
}
}
</script>
1、:key="randomKey"
key属性是vue自带特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不更新这个key的话,显示隐藏列的时候,部分DOM不会重新渲染,导致table变化时候没有动画过度,显得很生硬.
2、解决保存滚动条位置的问题
refreshTable()方法
六、Vue事件绑定加括号和不加括号的区别
@click=“fun”：不带括号、不写实参的fun默认传event (事件对象)
@click=“fun(value)”：只要加括号，无论是否传值，都属于传实参(value)给函数，event (事件对象)就接收不到。
@click=“fun($event, value)”：如果需要实参、又需要event (事件对象)，就需要手动传入 event (事件对象)
<template>
<button @click="fun">默认获取事件对象</button >
<button @click="fun1(value)">传递的是实参</button >
<button @click="fun2($event, value)">获取事件对象和实参</button >
</template>
<script>
export default {
data () {
return {
value:'实参数据'
}
},
methods:{
fun($event){
console.log($event,'--这是事件对象')
},
fun1(value){
console.log(value,'--实参数据')
},
fun2($event, value){
console.log($event, value,'--事件对象，实参数据')
}
}
}
</script>
六、父组件接收事件参数方式
- 可以写成：
@add="addOne"，或者@add="addOne($event)"。一般用@add="addOne"$event：传递单个参数arguments：传递多个参数时，采用arguments 以数组的形式传入- 子组件：
this.$emit('itemClick',param1,param2)- 父组件：
<div id="app"> <Child @itemClick="handleItemClick(arguments)"/> </div> methods:{ handleItemClick(params){ console.log(params) console.log(params[0]) console.log(params[1]) } }
- 不可写成：
@add="addOne()",或者@add="addOne(payload)"- payload只是一个实参，而不是emit传递的参数。
- 如果父组件既需要接收子组件emit的参数，还需要传递父组件的实参时
<template>
<ElSearchCpn
@searchHandle="searchHandle($event, testHandle)"
></ElSearchCpn>
</template>
<script>
import ElSearchCpn from '../01cpns/01elsearch/ElSearch'
export default {
methods:{
testHandle () {
console.log('------test')
},
// 搜索查询
searchHandle (payload, fn) {
console.log(payload, fn, '--payload是子组件传递参数，fn是接收父组件本身的参数')
},
}
}
</script>
六、自定义组件（比如自定义父子组件或者elementui/iview组件）的$event
七、window.open打开路由
let newUrl = this.$router.resolve({
// path: `/openofdfile?ofdUrl=${fileUrl}` // 跳转的路由地址，用path: 'path地址'也可以
name: 'openofdfile',
query: {
ofdFile: JSON.stringify(file.fileUrl)
}
})
console.log(newUrl)
window.open(newUrl.href, '_blank')
八、vue用原生引用js的包
背景：在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库
扫描二维码关注公众号，回复：
17275892 查看本文章
（1）放到mounted里面
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://cdnjs.cloudflare.com/2.3.1/jspdf.umd.min.js'; // 示例
document.body.appendChild(s);
（2）手动添加export
- 为js库中需要使用的方法放入
export default { /要导出的方法/}，然后通过import xxx from ‘’- 类似于目前项目中把方法抽出单独的hooks.js文件形式。
- 如果js文件中有多个变量和方法，可以把他们放到一个对象或者函数里面导出。最后在vue的mounted生命周期 里面调用。
- 另外：dom就写在template里就行了。
import Canvas2Image from 'canvas2image/canvas2image'
（3）vue项目中全局引入
public/index.html中引入script标签
注意：
script标签也是HTML标签的一部分，从上而下的顺序加载。
可以放在<head>或者<body>中【body需要放在最后】
九、export function和export 箭头函数的区别
function：可以使用this
箭头函数：不可以使用vue文件的this
十、js文件引入vuex
import store from '@/store/index.js'