精华内容
下载资源
问答
  • 最近玩一个类似拼图的东东,业务场景就是主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:mounted中调用计算主图的原始宽高时,提示元素为空(通过document...

    最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度

    问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素),因此导致所有的计算都返回0

    在mounted中,使用一个定时器就是好的,使用nextTick也是无效

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    setTimeout(() => {

    this.init()

    }, 1000)

    // 无效

    this.$nextTick(() => {

    this.init()

    })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    不知道有没有更优雅的方法,能解决这个问题

    // import Swiper from '@/components/common/swiper/swiper.vue'

    // import { Swiper } from 'vux'

    import myswiper from '@/components/common/myswiper/swiper.vue'

    import imgData from '@/datas/detailImg.json'

    import part1 from '@/datas/part_1.json'

    import part2 from '@/datas/part_2.json'

    import part3 from '@/datas/part_3.json'

    import part4 from '@/datas/part_4.json'

    export default {

    name: "detail",

    components: {

    // Swiper,

    myswiper

    },

    data() {

    return {

    flag: false, //控制部件选择是否出现

    containerImg: '', //当前滑到的图片容器

    // mainImgLeft: 0,

    // mainImgTop: 0,

    imgList: [], //图片list

    curIndex: 0, //当前选中的那个一个list的索引

    screenX: '', //浏览器屏幕的可视区域宽度,计算没张图片的tranform

    partList: [], //部件的list

    flagMask: false, //点击图片,查看大图效果的标识

    warpTop: 0 //计算大图的top值

    };

    },

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    // setTimeout(() => {

    this.init()

    // }, 500)

    // // 无效

    // this.$nextTick(() => {

    // this.init()

    // })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    methods: {

    // 获取图形数据

    getData() {

    this.imgList = imgData;

    },

    // 获取局部列表

    getPartData(id) {

    this.flag = true;

    switch (id) {

    case "0":

    this.partList = part1;

    break;

    case "1":

    this.partList = part2;

    break;

    case "2":

    this.partList = part3;

    break;

    case "3":

    this.partList = part4;

    break;

    }

    },

    init() {

    // 进来时通过索引找到当前的轮播项,判断是否已经加载过,如果已经加载过,则不加载,如果没有加载过,则设置为加载过,加载

    const curItem = this.imgList[this.curIndex];

    // if (curItem.loaded) {

    // return

    // } else {

    // curItem.loaded = true;

    this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

    // 获取大图元素的真实宽高

    this.bodyImg = this.getRealWH(this.containerImg);

    // 计算width的缩放比例 375

    this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

    // this.xRatio = this.bodyImg.x / 375;

    // 计算height的缩放比例 211

    this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;

    // this.yRatio = this.bodyImg.y / 211;

    // this.resetStyle('part_A', 'part_A');

    // this.resetStyle('part_B', 'part_B');

    var tempArr = curItem.mainPart || [];

    for (var i = 0; i < tempArr.length; i++) {

    this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);

    }

    // }

    },

    /**

    * 获取img的真实宽高

    * @Author shunzizhan

    * @Email [email protected]

    * @DateTime 2017-10-24T10:42:03+0800

    * @param {[type]} myimage [description]

    * @return {[type]} [description]

    */

    getRealWH(myimage) {

    var rw, rh;

    if (typeof myimage.naturalWidth == "undefined") {   // IE 6/7/8

    var i = new Image();

    i.src = myimage.src;

    rw = i.width;

    rh = i.height;

    } else {   // HTML5 browsers

    rw = myimage.naturalWidth;

    rh = myimage.naturalHeight;

    }

    return { x: rw, y: rh }

    },

    /**

    * 重新设置元素的样式

    * @Author shunzizhan

    * @Email [email protected]

    * @DateTime 2017-10-24T10:39:46+0800

    * @param {[type]} ele [当前点击的元素]

    * @param {[type]} eleTag [目标元素]

    * @param {[type]} xRatio [宽度缩放比例]

    * @param {[type]} yRatio [高度缩放比例]

    * @return {[type]} [description]

    */

    resetStyle(ele, eleTag) {

    if (event) {

    event.stopPropagation(); //阻止冒泡

    }

    var xRatio = this.xRatio;

    var yRatio = this.yRatio;

    var _dom = document.getElementById(ele);

    var partAImg = this.getRealWH(_dom);

    // 没个部位,坐标,尺寸均一致

    var x = _dom.getAttribute('data-x');

    var y = _dom.getAttribute('data-y');

    // var tempX = this.mainImgLeft / xRatio;

    var tempX = x / xRatio;

    var tempW = partAImg.x / xRatio;

    // var tempY = this.mainImgTop / yRatio;

    var tempY = y / yRatio;

    var tempH = partAImg.y / yRatio;

    var _tagDom = document.getElementById(eleTag);

    _tagDom.src = _dom.src;

    _tagDom.style.left = tempX + 'px';

    _tagDom.style.top = tempY + 'px';

    _tagDom.style.width = tempW + 'px';

    _tagDom.style.height = tempH + 'px';

    },

    // 子组件翻页时,更改索引,父级同步响应

    changeImg(index) {

    // console.log('计算属性-父组件', index)

    this.curIndex = index;

    this.init();

    this.flag = false;

    },

    // 点击大图,查看放大图

    resetTop() {

    this.flagMask = !this.flagMask;

    if (this.flagMask) {

    this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

    } else {

    this.warpTop = 0;

    }

    }

    }

    }

    回答

    ,然后确定元素是空,而不是宽高是0吗?因为undefined.offWidth会报错。

    如果是的话,给img绑定个onload事件,在这里获取宽高,感觉是dom标签有了,但是资源还没加载,所以没大小。

    dom 元素 .main-img 是你写死在组件的还是获取后台获取数据再循环渲染在组件上的?

    如果是后者,确保要在获取并渲染到组件上后再通过document.getElementsByClassName(‘main-img’)[this.curIndex]获取页面元素

    这个问题最后是怎么解决的?兄弟,我也遇到了类似的问题,nextTick不好用,我想在dom加载完成后再执行时事件,求解惑

    展开全文
  • 最近玩一个类似拼图的东东,业务场景就是主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:mounted中调用计算主图的原始宽高时,提示元素为空(通过document...

    最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度

    问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素),因此导致所有的计算都返回0

    在mounted中,使用一个定时器就是好的,使用nextTick也是无效

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    setTimeout(() => {

    this.init()

    }, 1000)

    // 无效

    this.$nextTick(() => {

    this.init()

    })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    不知道有没有更优雅的方法,能解决这个问题

    // import Swiper from '@/components/common/swiper/swiper.vue'

    // import { Swiper } from 'vux'

    import myswiper from '@/components/common/myswiper/swiper.vue'

    import imgData from '@/datas/detailImg.json'

    import part1 from '@/datas/part_1.json'

    import part2 from '@/datas/part_2.json'

    import part3 from '@/datas/part_3.json'

    import part4 from '@/datas/part_4.json'

    export default {

    name: "detail",

    components: {

    // Swiper,

    myswiper

    },

    data() {

    return {

    flag: false, //控制部件选择是否出现

    containerImg: '', //当前滑到的图片容器

    // mainImgLeft: 0,

    // mainImgTop: 0,

    imgList: [], //图片list

    curIndex: 0, //当前选中的那个一个list的索引

    screenX: '', //浏览器屏幕的可视区域宽度,计算没张图片的tranform

    partList: [], //部件的list

    flagMask: false, //点击图片,查看大图效果的标识

    warpTop: 0 //计算大图的top值

    };

    },

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    // setTimeout(() => {

    this.init()

    // }, 500)

    // // 无效

    // this.$nextTick(() => {

    // this.init()

    // })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    methods: {

    // 获取图形数据

    getData() {

    this.imgList = imgData;

    },

    // 获取局部列表

    getPartData(id) {

    this.flag = true;

    switch (id) {

    case "0":

    this.partList = part1;

    break;

    case "1":

    this.partList = part2;

    break;

    case "2":

    this.partList = part3;

    break;

    case "3":

    this.partList = part4;

    break;

    }

    },

    init() {

    // 进来时通过索引找到当前的轮播项,判断是否已经加载过,如果已经加载过,则不加载,如果没有加载过,则设置为加载过,加载

    const curItem = this.imgList[this.curIndex];

    // if (curItem.loaded) {

    // return

    // } else {

    // curItem.loaded = true;

    this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

    // 获取大图元素的真实宽高

    this.bodyImg = this.getRealWH(this.containerImg);

    // 计算width的缩放比例 375

    this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

    // this.xRatio = this.bodyImg.x / 375;

    // 计算height的缩放比例 211

    this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;

    // this.yRatio = this.bodyImg.y / 211;

    // this.resetStyle('part_A', 'part_A');

    // this.resetStyle('part_B', 'part_B');

    var tempArr = curItem.mainPart || [];

    for (var i = 0; i < tempArr.length; i++) {

    this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);

    }

    // }

    },

    /**

    * 获取img的真实宽高

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:42:03+0800

    * @param {[type]} myimage [description]

    * @return {[type]} [description]

    */

    getRealWH(myimage) {

    var rw, rh;

    if (typeof myimage.naturalWidth == "undefined") {   // IE 6/7/8

    var i = new Image();

    i.src = myimage.src;

    rw = i.width;

    rh = i.height;

    } else {   // HTML5 browsers

    rw = myimage.naturalWidth;

    rh = myimage.naturalHeight;

    }

    return { x: rw, y: rh }

    },

    /**

    * 重新设置元素的样式

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:39:46+0800

    * @param {[type]} ele [当前点击的元素]

    * @param {[type]} eleTag [目标元素]

    * @param {[type]} xRatio [宽度缩放比例]

    * @param {[type]} yRatio [高度缩放比例]

    * @return {[type]} [description]

    */

    resetStyle(ele, eleTag) {

    if (event) {

    event.stopPropagation(); //阻止冒泡

    }

    var xRatio = this.xRatio;

    var yRatio = this.yRatio;

    var _dom = document.getElementById(ele);

    var partAImg = this.getRealWH(_dom);

    // 没个部位,坐标,尺寸均一致

    var x = _dom.getAttribute('data-x');

    var y = _dom.getAttribute('data-y');

    // var tempX = this.mainImgLeft / xRatio;

    var tempX = x / xRatio;

    var tempW = partAImg.x / xRatio;

    // var tempY = this.mainImgTop / yRatio;

    var tempY = y / yRatio;

    var tempH = partAImg.y / yRatio;

    var _tagDom = document.getElementById(eleTag);

    _tagDom.src = _dom.src;

    _tagDom.style.left = tempX + 'px';

    _tagDom.style.top = tempY + 'px';

    _tagDom.style.width = tempW + 'px';

    _tagDom.style.height = tempH + 'px';

    },

    // 子组件翻页时,更改索引,父级同步响应

    changeImg(index) {

    // console.log('计算属性-父组件', index)

    this.curIndex = index;

    this.init();

    this.flag = false;

    },

    // 点击大图,查看放大图

    resetTop() {

    this.flagMask = !this.flagMask;

    if (this.flagMask) {

    this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

    } else {

    this.warpTop = 0;

    }

    }

    }

    }

    展开全文
  • 最近玩一个类似拼图的东东,业务场景就是主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:mounted中调用计算主图的原始宽高时,提示元素为空(通过document...

    最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度

    问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素),因此导致所有的计算都返回0

    在mounted中,使用一个定时器就是好的,使用nextTick也是无效

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    setTimeout(() => {

    this.init()

    }, 1000)

    // 无效

    this.$nextTick(() => {

    this.init()

    })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    不知道有没有更优雅的方法,能解决这个问题

    // import Swiper from '@/components/common/swiper/swiper.vue'

    // import { Swiper } from 'vux'

    import myswiper from '@/components/common/myswiper/swiper.vue'

    import imgData from '@/datas/detailImg.json'

    import part1 from '@/datas/part_1.json'

    import part2 from '@/datas/part_2.json'

    import part3 from '@/datas/part_3.json'

    import part4 from '@/datas/part_4.json'

    export default {

    name: "detail",

    components: {

    // Swiper,

    myswiper

    },

    data() {

    return {

    flag: false, //控制部件选择是否出现

    containerImg: '', //当前滑到的图片容器

    // mainImgLeft: 0,

    // mainImgTop: 0,

    imgList: [], //图片list

    curIndex: 0, //当前选中的那个一个list的索引

    screenX: '', //浏览器屏幕的可视区域宽度,计算没张图片的tranform

    partList: [], //部件的list

    flagMask: false, //点击图片,查看大图效果的标识

    warpTop: 0 //计算大图的top值

    };

    },

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    // setTimeout(() => {

    this.init()

    // }, 500)

    // // 无效

    // this.$nextTick(() => {

    // this.init()

    // })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    methods: {

    // 获取图形数据

    getData() {

    this.imgList = imgData;

    },

    // 获取局部列表

    getPartData(id) {

    this.flag = true;

    switch (id) {

    case "0":

    this.partList = part1;

    break;

    case "1":

    this.partList = part2;

    break;

    case "2":

    this.partList = part3;

    break;

    case "3":

    this.partList = part4;

    break;

    }

    },

    init() {

    // 进来时通过索引找到当前的轮播项,判断是否已经加载过,如果已经加载过,则不加载,如果没有加载过,则设置为加载过,加载

    const curItem = this.imgList[this.curIndex];

    // if (curItem.loaded) {

    // return

    // } else {

    // curItem.loaded = true;

    this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

    // 获取大图元素的真实宽高

    this.bodyImg = this.getRealWH(this.containerImg);

    // 计算width的缩放比例 375

    this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

    // this.xRatio = this.bodyImg.x / 375;

    // 计算height的缩放比例 211

    this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;

    // this.yRatio = this.bodyImg.y / 211;

    // this.resetStyle('part_A', 'part_A');

    // this.resetStyle('part_B', 'part_B');

    var tempArr = curItem.mainPart || [];

    for (var i = 0; i < tempArr.length; i++) {

    this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);

    }

    // }

    },

    /**

    * 获取img的真实宽高

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:42:03+0800

    * @param {[type]} myimage [description]

    * @return {[type]} [description]

    */

    getRealWH(myimage) {

    var rw, rh;

    if (typeof myimage.naturalWidth == "undefined") {   // IE 6/7/8

    var i = new Image();

    i.src = myimage.src;

    rw = i.width;

    rh = i.height;

    } else {   // HTML5 browsers

    rw = myimage.naturalWidth;

    rh = myimage.naturalHeight;

    }

    return { x: rw, y: rh }

    },

    /**

    * 重新设置元素的样式

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:39:46+0800

    * @param {[type]} ele [当前点击的元素]

    * @param {[type]} eleTag [目标元素]

    * @param {[type]} xRatio [宽度缩放比例]

    * @param {[type]} yRatio [高度缩放比例]

    * @return {[type]} [description]

    */

    resetStyle(ele, eleTag) {

    if (event) {

    event.stopPropagation(); //阻止冒泡

    }

    var xRatio = this.xRatio;

    var yRatio = this.yRatio;

    var _dom = document.getElementById(ele);

    var partAImg = this.getRealWH(_dom);

    // 没个部位,坐标,尺寸均一致

    var x = _dom.getAttribute('data-x');

    var y = _dom.getAttribute('data-y');

    // var tempX = this.mainImgLeft / xRatio;

    var tempX = x / xRatio;

    var tempW = partAImg.x / xRatio;

    // var tempY = this.mainImgTop / yRatio;

    var tempY = y / yRatio;

    var tempH = partAImg.y / yRatio;

    var _tagDom = document.getElementById(eleTag);

    _tagDom.src = _dom.src;

    _tagDom.style.left = tempX + 'px';

    _tagDom.style.top = tempY + 'px';

    _tagDom.style.width = tempW + 'px';

    _tagDom.style.height = tempH + 'px';

    },

    // 子组件翻页时,更改索引,父级同步响应

    changeImg(index) {

    // console.log('计算属性-父组件', index)

    this.curIndex = index;

    this.init();

    this.flag = false;

    },

    // 点击大图,查看放大图

    resetTop() {

    this.flagMask = !this.flagMask;

    if (this.flagMask) {

    this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

    } else {

    this.warpTop = 0;

    }

    }

    }

    }

    展开全文
  • 我想要跳转一个页面,并且想要跳转执行某方法;咱们也都知道要使用created方法的话,只有创建时好使,后面就不会执行created方法了 可能是我比较笨试了几种方法, 携手天下 的帮助下才解决 此问题解决方案: ...

    最近入职一家公司,比较忙;数据库(MySql)–>原型(墨刀)–>后台(springBoot)–>前台(ant desgin),全都有写

    今天碰到一个问题
    我想要跳转一个页面,并且想要在跳转后都执行某方法;咱们也都知道要使用created方法的话,只有创建时好使,后面就不会执行created方法了
    可能是我比较笨试了几种方法,在 携手天下 的帮助下才解决
    此问题解决方案
    方案一:
    父组件中
    在这里插入图片描述
    在这里插入图片描述
    子组件中:
    在这里插入图片描述

    方案二:
    父组件中:
    在这里插入图片描述在这里插入图片描述
    子组件中:
    在这里插入图片描述
    在这里插入图片描述
    目前只知道这两种方法,欢迎指教 QQ:2827778977

    展开全文
  • vue v-for循环渲染完毕后执行方法

    千次阅读 2019-11-14 10:16:42
    背景:把jq插件放vue用发现页面加载时执行方法获取到v-for的元素长度为0 所以无法执行操作 故寻找解决办法 原文: 项目时用到了一些插件,比如这次用了下拉菜单插件。 这个插件需要实例化,而下拉框的数据是...
  • 或者进入页面时对用户权限进行校验。这些通过vue-router 提供的导航钩子就可以实现。我们可以如下3 个地方使用钩子函数。一、全局的钩子函数1,路由改变前的钩子(1)通过路由对象的beforeEach()方法调用。before...
  • 使用vue.js开发时用到了ajax请求,于是乎整合进jquery,好在项目之前就引入过jquery,所以拿来直接用。 但是遇到一个问题: 背景如下:列表筛选选择列表,...解决办法:将ajax请求执行方法用setTimeout包裹起来,即可。
  • computed是HTML DOM加载马上执行的,如赋值; 而methods则必须要有一定的触发条件才能执行,如点击事件; watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是...
  • 大家知道Ajax出现就是为了实现异步请求服务器防止页面卡顿,然而并不是所有的业务都要基于异步执行,或者说有些逻辑必须要同步执行,即执行一个后台请求才能继续执行代码。忽视的问题,就是脚下的坑。。。 ...
  • vue中强制刷新组件重置dom

    千次阅读 2019-04-16 11:58:32
    适用场景 父组件触发点击事件更新数据 子组件dom不实时刷新,页面数据不从新渲染 解决办法 同过v-if控制字...$nextTick 是下次 DOM 更新循环结束之后执行延迟回调,修改数据之后使用 $nextTick,则可以...
  • computed是DOM执行完成立马执行(如:赋值) created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。 mounted钩子函数一般用来向后端发起请求,拿到...
  • for循环是有时就需要做些等待for循环渲染后在执行的事件,例如(项目中用到的滑动组件,图片加载完要重定向,或者是一些需要等待渲染完才触发的事件)解决方法一主要是用到vue中的 watch + vm.nextTickwatch是 ...
  • 问题:页面使用 setTimeout 定时循环某方法,或者两个页面之间跳转时间小于定时器的时间间隔时,定时器还运行。 原因:当我们刷新页面时,会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅...
  • 计算属性computed使用时,一定要注意,函数里面的变量都会被监听,只要里面的一个值变动,便会将整个函数执行一遍。 而 watch 只是监听一个值,若是监听的值里面也有很多变量,也会全部监听2. 计算的属性...
  • VUE笔记

    2018-10-11 14:58:28
    computed是HTML DOM加载马上执行的, 如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件; watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值...
  • vue v-for循环渲染完毕加载事件

    千次阅读 2019-02-26 09:10:00
    然而jv-for循环是有时就需要做些等待for循环渲染后在执行的事件,例如(项目中用到的滑动组件,图片加载完要重定向,或者是一些需要等待渲染完才触发的事件) 解决方法一 主要是用到vue中的 watch + vm....
  • Vue--Vue.nextTick()的使用

    2017-06-28 00:32:00
    修改数据之后立即使用这个方法,获取更新的 DOM。  首先要明白Vue的响应式原理(官网有详细的解释):data选项里所有属性都会被watch监控,当修改了data的一个值,并不会立即反应到视图中。vue将你对data...
  • 1.基本用法下面代码是watch的一种基本用法...也可以所监听的数据后面直接加字符串形式的方法名:watch: { firstName: 'nameChange'// 方法名 } } 2. immediate和handler使用watch基本用法时有一个特点,就是当值第...
  • vue $emit 同步调用

    千次阅读 2020-05-04 11:24:28
    标题换一种说法:vue $emit 调用父组件异步方法,执行完毕执行子组件的某方法 使用回调的形式 异步方法执行完成的时间只有父组件知道,如果子组件需要异步方式执行之后执行某些逻辑,那么只能将这些逻辑封装...
  • vue的生命周期

    2019-06-28 19:35:00
    所谓生命周期指的就是Vue实例在某一个时间点,会自动执行的函数 beforeCreate 在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前被调用。 也就是在页面部分初始化的时候执行。 created...
  • Vue初始化加载顺序

    千次阅读 2019-08-20 17:14:13
    1、computed是HTML DOM加载后执行的,如赋值; 2、methods方法必需一定条件的触发才会执行,如点击事件; 3、watch用于观察vue实例上的数据变动,对应一个对象,键是观察表达式,值是对应回掉,值也可以是方法名...
  • 定义:将回调延迟到下次 DOM 更新循环之后执行(dom挂载完成后执行) 需求:当需要获取数据更新过后DOM的最新状态,可使用该方法 用法:修改数据之后立即使用它(mounted/methods里面),然后等待 DOM 更新 ...
  • 可以 vue-router 的 beforeEach 钩子执行,具体代码请参考 async-routes。 除了主项目和子项目的交互方式不同,代理转发子项目资源、vuex store 注册等和上面的预加载路由完全一致。 优缺点 下面谈下...
  • 函数是执行了,但是0.5秒没有执行任何操作,后来找了资料, setTimeou() 方法用于指定毫秒数调用函数或计算表达式 setTimeout(code,millisec) 其中,code,必需,要调用的函数执行的JavaScrip
  • <p>Vue在两个地方用到了上述nextTick: * Vue.nextTick和Vue.prototype.$nextTick都是直接使用了这个nextTick * 在batcher中,也就是watcher观测到数据变化后执行的是<code>nextTick(flushBatcherQueue)...
  • computed是HTML DOM加载马上执行的,如赋值; 而methods则必须要有一定的触发条件才能执行,如点击事件; watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是...
  • vue生命周期函数:就是Vue实例在某一个时间点会自动执行的函数; 单独的放在vue实例中,不放在methods中; 在vue的语法中:v-text,v-html(会渲染标签)会把数据变量和js表达式显示在页面上,相当于插值...
  • computed、methods、watch

    2019-02-28 09:54:18
    computed是HTML DOM加载马上执行的 methods则必须要有一定的触发条件才能执行,如点击事件 watch用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,...
  • 1.computed是HTML DOM加载马上执行的,如赋值; 2.methods则必须要有一定的触发条件才能执行,如点击事件; 3.watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也...

空空如也

空空如也

1 2
收藏数 35
精华内容 14
关键字:

vue在某方法后执行

vue 订阅