1、watch监听路由变化用法
watch: {
$route: {
handler(route) {
if (this.$route.path == '/jwd-a/noticelistcontent') {
this.noticeTitle = this.$route.query.noticeList.title
this.noticeDate = this.$route.query.noticeList.createTime
this.noticeContent = this.$route.query.noticeList.content
}
}
}
},
这里搭配created一起使用~~
2、子页面监听父页面值的变化
3、关于vue.js的生命周期详解
4、添加监听事件点击空白处关闭手写弹窗
document.addEventListener("mouseup", e => {
let contain = document.getElementById("inviteWindowVisible");
if (contain) {
if (!contain.contains(e.target)) {
this.inviteWindowVisible = false;
}
}
});
5、input监听事件与校验
@input="handleInput"
handleInput() {
// 只能输入数字校验
this.idNum = this.idNum.replace(/[^\d]/g, '')
// 只能输入字母和数字
this.value = this.value.replace(/[\W]/g, '')
}
6、vuex入门
baijiahao.baidu.com/s?id=161879…
7、vue中模糊查询
let newListData = [] // 新建一个新数组存放数据
// this.stuList.stuInfo 用于搜索的原数组
let _search = values.name.toLowerCase() // 用于把字符串转为小写，让模糊查询更加清晰
if (_search) {
this.stuList.stuInfo.filter(item => {
if (item.name.toLowerCase().indexOf(_search) !== -1) {
newListData.push(item)
}
})
cosnole.log('新数组',newListData)
}
8、vue @scroll 监听滚动条事件
外层css添加！！！
`height: 100vh; overflow: scroll;`
`@scroll="handleScroll($event)"`
handleScroll(e) {
cosnole.log(e.srcElement.scrollTop)
}
9、监听vuex中state的值
computed: { dataChange() { return this.$store.state.headUpload; }, }, watch: { dataChange(val) { if (val) {
// 写想要执行的方法 } }, },
10、实现文件下载
downHomework(filename, url) { var type = url.substring(url.lastIndexOf(".")); return fetch(url).then((res) => res.blob().then((blob) => { let a = document.createElement('a') let url = window.URL.createObjectURL(blob) a.href = url a.download = filename+type a.click() window.URL.revokeObjectURL(url) }) ) },
11、ant中table的插槽的用法
<a-table :columns="columns" :data-source="data" :pagination="false"> <span slot="action" slot-scope="text, record"> <a @click="addCourseware(record)">添加</a> </span></a-table>
const columns = [
{ title: '文件名', dataIndex: 'name', },
{ title: '上传时间', dataIndex: 'age', },
{ title: '大小', dataIndex: 'address', },
{ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: 80, },
// 数据的转换
{ title: '价格', align: 'center', dataIndex: 'price', customRender: (text) => { if (text == 0) { return '免费' } else { return text } }, width: 100, },
]
12、获取富文本中纯文字内容
str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和 之类的特殊符合
