vue + JavaScript进阶

最新推荐文章于 2023-08-31 07:47:52 发布

巜巜

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量959

点赞数

分类专栏： vue实战入门与提高文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_49739911/article/details/123222574

版权

vue实战入门与提高专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript 进阶

案例一

图片跟随鼠标移动

鼠标不断的移动，使用鼠标移动事件：mousemove；
在页面中移动，给document注册事件；
图片要移动距离，而且不占位置，使用绝对定位即可（图片不设为绝对定位，无效果。）；
核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片。

// 获取文档中img元素
// HTML的DOMquerySelector（）方法可以不需要额外的query，获取dom元素。
// document.addEventListener（）方法用于向文档添加事件句柄。
var pic  = document.querySelector('img')
document.addEventListener（‘mousemove’，function（e）｛
    var x = e.pageX;
    var y = e.pageY;
    //想要鼠标放在图片的正中间就加减图片宽度/高度的一半。
    pic.style.top = y + 'px'    
    pic.style.left = x + 'px'
｝）

案例二

检测用户是否按下了回车键键，如果按下回车键，就把光标定位到搜索框里面

使用键盘事件对象里面的keyCode判断用户按下的是否是回车键
搜索框获得焦点，使用js里面的focus（）方法。

var text = document.querySelector('input')
document.addEventListener('keyup',function(e){
    if(e.keyCode === 13){
	   text.focus()
	   }
})

vue进阶

案例一

交互流程

大部分的交互流程都是ajax请求数据=》传入组件渲染，很多属性需要异步传入子组件然后进行相关的计算，如果绑定很多computed或者watch，性能开销会很大，而且有些场景并不需要使用computed和watch，我们只需要在最初创建的时候获取一次就够了。

<mapbox v-if = "mapData" :data="mapData">
点击搜索后执行
let This = this
this.mapData = []
//  调接口
this.$http.post('ap/show/mapcondition',{key:key,type:type}).then((res) => {
    this.mapData = res.data
})

DOM强制刷

出现DOM元素与数据不同步，可以使用其他方式让DOM强制刷

setTimeout（）数据获取有延迟时使用；
$forceUpdate（）运用 this.$forceUpdate()强制刷新，调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期；
$nextTick（）DOM加在有延迟时使用，在vue生命周期的created（）与mounted（）钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中；
$set（）因为vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty（）方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view，解决办法就是，需要我们主动通知vue。
1. 对象操作：
  this.$set("改变的对象","属性","值")
2. 数组操作：
  this.$set("数组","下标","值")

坑：若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变。

案例二

$refs调用

使用$refs调用子组件方法，有时候会涉及到父组件调用子组件方法的情况
例如iview的tree组件暴露出来的getCheckedAndIndeterminateNodes方法

//show-checkbox：是否显示多选框，
// multiple：是否支持多选，
<Tree v-if="menu" :data="menu" show-checkbox multiple ref="Tree"></Tree>

let rules = this.$refs.Tree.getCheckedAndIndeterminateNodes()

案例三

组件递归

组件递归：核心：组件自己调用自己。
思路：

就是先创建一个子组件，然后再创建一个父组件，循环引用。首先需要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现：“max stack size exceeded”的错误，也就是栈溢出，那么，我们可以使用v-if=“false”作为递归组件的结束条件，当遇到v-if为false时，组件将不会再进行渲染。
总结：

通过props从父组件拿到数据，递归组件每次进行递归的时候都会tree-menus组件传递下一级cList数据，整个过程结束之后，递归也就完成了，对于折叠树状菜单来说，我们一般只会去渲染一级数据，当点击一级菜单时，再去渲染一级菜单下的结构，那么v-if就可以实现我们的这个需求，当v-if设置为false时，递归组件将不会再进行渲染，设置为true时，继续渲染。

案例四

监听$router

使用watch监听路由参数重新获取数据：很多菜单项都只是入参不一样，是不会走业务逻辑的，就用watch监听$router，如果改变就重新请求新的数据。

export default {
    watch: {
        '$route':'isChange'
    },
    methods: {
        getData() {
            ...
        },
        isChange() {
            this.getData()
        }
    }
}