最近学到的vue小知识点集合

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

npm

npm修改源：

• npm config set registry <源地址> ： npm修改源
• npm config get registry ： 查看当前使用的源

nrm的使用：

如果有多个源，就可以使用nrm来管理npm所有的源

• nrm ls : 查看所有源和当前所有的源
• nrm add <源名字> 源地址
• nrm del <源名字>删除一个源
• nrm use <源名字>切换使用的源

vue中路由的知识点

如何监听监听路由变化？

watch: {
    $route(to,from){
        console.log(to.path)
    }
}

如何跳转到某个路由？ 通过一个对象

    let obj = {
        name: 'clientInfo', 
        query: { 
            userId: userId
        } 
   } 
   this.$router.push(obj);

如何在vue中实现点击新窗口打开？

this.$router.resolve({})

const _url = this.$router.resolve({
    name: "buyListingPromotion", 
    query: { 
        listingId: item.id, 
        step: 1 
    } 
}); 
window.open(_url.href, "_blank");

vue子父组件中传递function：

子父组件中props除了可以传递变量，还可以传递function，可以直接调用，也可以再当作自定义事件传递给子组件的子组件。

eg：

props: { 
    infinityLoad: { 
        type: Function, 
        default: () => () => {}
    }
}

常用媒体查询：

范围媒体查询：表示为”最大条件“约束，只有小与、等于12450px才应用下面的样式。 小与、等于12450px才应用下面的css样式 :

@media (max-width: 12450px) {
    ...
} 

最小条件约束：大于等于12450px应用下面的css样式:

@media (min-width: 12450px) {
    ...
} 

选择器：

比如父元素类名是list，子元素类名是list_content

可以使用&代替父元素类名。

.list { 
    &_content {
    ...
    } 
}

Object.entries()：

该方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。

sleep函数:

如果需要设置一个几秒的延迟函数，怎么实现呢？通过下面的函数就可以：

function sleep() { 
    return new Promise(resolve => {
        setTimeout(() => { 
            console.log('finish') resolve("sleep"); 
        }, 2000); }); 
    } 
async function test() { 
    let value = await sleep(); 
    console.log("object");
} 
test()

如果想让一个元素滚动到视野内，你有什么方法可以实现吗？

Element.scrollIntoView() 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

如果浏览器里面出现连续的一串字母或者数字，中间没有空格，这个时候浏览器是不会换行的，你知道怎么通过css属性换行嘛？

word-break: break-all;