您现在的位置是:首页 >其他 >Vue2 前端笔记网站首页其他
Vue2 前端笔记
简介Vue2 前端笔记
1. this.$nextTick DOM修改后使用
使用方法:
this.$nextTick(()=>{})
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.
在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
如果使用nextTick 不生效可以考虑使用setTimeout()代替
2. this.$emit() 子页面调用父页面方法
使用方法:
this.$emit('parentFun', {param:value})
父页面的子页面标签添加:
<Chidren @parentFun="parentFun"></Chidren>
3. this.$refs 获取到dom元素. (可用于父页面调用子页面方法
使用方法:
this.$refs.company.chidrenFun(params)
父页面加子页面标签添加:
<Chidren ref="company"></Chidren>
获取input元素的值:
<input type="text" ref="a1" value="123">
console.log(this.$refs.a1.value) //123
4. a 标签不要和 click 事件一起使用
或者可以用 javascript:void(0) 禁用 href触发
<a href="javascript:void(0)" @click="previewFile(item)"></a>
5. 父页面传参到子页面
父页面:
<FileUpload v-model="ruleForm[field.field]" :from="ruleForm" :others="field.others">
子页面:
export default {
name: "CommonFileUpload",
props: ['from', 'others'],
components: {
},
data() {
return {}
},
created() {
console.log(this.from)
},
watch: {
from(){
}
},
methods: {
}
}
6. this.$forceUpdate()
页面传的数值动态改变,接口接受的参数也就动态更改,但接收的数据有时候不会及时不变,通过this.$forceUpdate()页面数据强制刷新来解决这个问题
7. watch()
通过 watch 监听 data 数据的变化:
export default {
name: "",
props: [],
components: {
},
data() {
return {
from:{
id: '111',
name:'chi'
}
}
},
created() {
},
watch: {
from(val, oldVal){
console.log('from',val)
},
"from.name"(val, oldVal){ //单独监听对象的属性变化
console.log('from.name',val)
}
},
methods: {
}
}
watch 监听 from 数据的变化。(深度监听 deep)
watch: {
{
from: {
handler(val,oldVal) {
console.log('from old',oldVal)
console.log('from new',val)
},
deep: true // 深度监听
}
}
通过 watch 监听 from 数据的变化,数据发生变化时,执行 fromChange 方法
watch: {
from: 'fromChange' // 值可以为methods的方法名
},
methods: {
fromChange(newVal,oldVal){
console.log('fromChange', oldVal,newVal)
}
}
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。