首先想到如下方式，用数组下标做尾缀生成不同名字的 ref：

<swiper-item v-for="(item,index) in category" :key="index">
    <silverPage :ref="'silverPage' + index"></silverPage>
</swiper-item>

打印第3个引用对象的实例，你可能写成：

console.log(this.$refs['silverPage2']);
//或者
console.log(this.$refs.silverPage2);

含 0条评论

上周测试同事发现，刷新页面时，第三方图片偶尔出现403拒绝访问。 本人排查，出现此问题的图片 header 头都带了 referer 字段，触发了第三方的防盗链机制。然而，前端同事在动态生成 img 标签时，确认已经增加了 referrerpolicy=same-origin 属性（即同源才发送 referer 头）...

含 0条评论

Nuxt.js 启动时默认主机是 localhost，默认端口号是 3000。想自定义主机和端口号的话，需要在 next.config.js 中配置。如下示例：

export default {
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0' // default: localhost,
  }
}

完整配置参考：https://www.nuxtjs.cn/api/configuration-server

含 0条评论

vue 页面插入视频，使用如下代码：

<video width="320" height="240" controls>
    <source :src="video_url" type="video/mp4" />
</video>

本想使用 video_url 动态绑定视频地址，页面首次加载能正常播放视频，但 video_url 的值改变后，页面上的视频却没有改变，播的还是原来的视频。

将代码改成下面格式即可：

<video :src="video_url" width="320" height="240" controls></video>

也就是，要将视频地址绑定到 video 标签的 src 属性上。

同理，audio 标签也是如此处理。

含 0条评论

antd vue 的 a-modal 不可拖拽，定义一个 vue 指令 v-drag-modal，使用户可以通过头部拖拽弹窗，内容区不可拖拽。

含 0条评论

事情是这样的，在近期重构一个之前写的乱七八糟的项目的时候，准备二次封装一下Element-Ui的NavMenu导航菜单组件，方便日常使用。
由于目前暂时还不考虑el-menu-item-group的问题，所以将NavMenu拆分成下面的几个小组件

含 1条评论

1. 问题： 开发过程中，可能不同路由页面背景色不一样，可以通过js来设置。 2. 解决： 直接在当前的page内设置 mounted() { document.querySelector('body').setAttribute('style', 'background-color:#f7f7f7') }, beforeDestroy() { document.querySelector('body').r...

含 0条评论

问题描述

Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如

queryData: {
    name: '',
    creator: '',
    selectedStatus: '',
    time: [],
},

现在我需要监听这个queryData，我可以这样做：

watch: {
    queryData: {
        handler: function() {
            //do something
        },
        deep: true
    }
}

里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样

watch: {
    'queryData.name': {
        handler: function() {
           //do something
        },
    }
}

或者还可以这样巧用计算属性

computed: {
    getName: function() {
    	return this.queryData.name
    }
}
watch: {
    getName: {
        handler: function() {
            //do something
        },
    }
}

 

含 0条评论

1、VSCode安装插件：Debugger for Chrome，并确保你的电脑上安装了 Chrome 浏览器；

2、VSCode菜单“调试-->打开配置”（即 .vscode\launch.json 文件），把 webRoot 配置项改成 "${workspaceFolder}/src"。注，原来的值是 "${workspaceFolder}"，因为Vue项目源代码是在 src 目录，所以要改。我的配置内容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

3、编辑Vue的配置文件 vue.config.js （如果没有则自己新建一个），添加 configureWebpack 的配置项 devtool ，值为 "source-map" 。我的 vue.config.js 内容如下：

module.exports = {
    publicPath: "/",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: process.env.NODE_ENV === "development",
    productionSourceMap: false,
    devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: "http://127.0.0.1:90/admin",
                changeOrigin: true,
                pathRewrite: {
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                }
            }
        }
    },
    configureWebpack: {
        devtool: "source-map"
    }
};

4、启动vue项目：npm run serve 或 npm run dev 。如果之前已经启动过了，要关掉重新启动，因为我们改了配置文件；

5、关闭正在运行的Chrome浏览器（以防有干扰），VSCode菜单“启动-->启动调试”，这时候VSCode会以管理员身份打开一个Chrome窗口，并自动打开项目首页；

6、在VSCode中的代码设置断点，浏览器执行，遇到断点时，VSCode会高亮显示。同时，Chrome浏览器按F12，也可以看到相同的断点调试信息。

含 0条评论

vue项目开发阶段，使用npm run dev 或npm run serve 启动本地调试，请求后端的API接口时提示跨域。因为vue是Node.js运行（端口8080），后端是PHP开发（端口9090），地址都是127.0.0.1，但端口号不一样，所以造成了跨域请求。
vue-cli官方文档提示，我们可以在 vue.config.js 配置文件里设置代理，文档链接：https://cli.vuejs.org/zh/config/#devserver-proxy

含 0条评论