我希望使用 VueJS 中的按钮实现水平滚动。我有一个容器,它有几个水平堆叠的 div,我想使用按钮滚动它们。
这是关于 JQuery 的 SO 上的相同线程。这个demo是JQuery中的解决方案。它应该说明我所追求的效果。
如何使用 VueJS 实现这种效果?
我已经看过的一些库包括vue-scroll-to和jump。
Vue-scroll-to 要求用户指定要滚动到的元素,而我想在特定元素内水平滚动一定数量的像素。
Jump 允许在定义数量的像素上滚动,但只能垂直工作并且只能在窗口上滚动。
编辑:我在 VanillaJS 中找到了一个小库:https : //github.com/tarun-dugar/easy-scroll
每当我切换路线时,我注意到我的应用程序中的Vue组件永远不会被破坏,只会被创建(当我在路线之间切换时,#Deleted列始终为0)。更明确地说,创建的新组件数始终等于该路线上显示的组件数,即,当重新访问路线时,不会销毁任何Vue组件,并且会重新创建该路线上的每个组件。
我一直在研究调试问题,并且我知道以下通常是VueJS中内存泄漏的元凶。
我遇到的另一个潜在问题是我不太了解。在这个github线程中,OP关于VueJS中内存泄漏的潜在原因说了以下几点:
所以我确保我不会做任何愚蠢的事情,例如在Vuex商店中存储对此的引用...
有人可以解释一下OP对Vuex和内存泄漏的含义吗?
此外,还有哪些其他潜在问题导致我遗漏的VueJS中的内存泄漏可能会影响我的应用程序?
除了使用Chrome devtools中的“内存”标签以外,我还应该如何调试内存泄漏?
以下是我的 node.js 应用程序中的 server.js 文件。我希望我的服务器上的其他文件可以访问我的 socket.io 实例,以便从我的 API 发出事件(listingRoutesApi, userRoutesApi etc.) (refer to code)。
我的问题是我的路由是在创建服务器之前声明的;但是,socket.io 实例是在创建服务器之后创建的。
我使用的解决方案是声明一个全局io变量,它允许我从我的网络应用程序中的任何地方发出事件,如下所示:
global.io.of('/analytics').to(listing._id).emit('message', "There was a post.");
Run Code Online (Sandbox Code Playgroud)
我的问题是:这样做是否有任何陷阱/危险,从长远来看我会遇到任何可扩展性问题吗?此外,是否有更好的方法来实现我的目标?
我的 server.js 文件中的代码:
const app = express();
app.use('/api', listingRoutesApi);
app.use('/api', userRoutesApi);
app.use('/api', imageRoutesApi);
// ...plenty more endpoints here...
app.use(serveStatic(path.join(__dirname, "/dist")));
app.use(history());
app.use(serveStatic(path.join(__dirname, "/dist")));
const server = app.listen(port, () => { console.log('server started ' + port); });
/* Start socket. */
global.io = socketio(server);
const analytics = global.io.of("/analytics");
analytics.on('connection', (socket) => {
socket.on('join', (data) …Run Code Online (Sandbox Code Playgroud) 我有一个 Vue 组件,它使用 Vue 的元素保持活动状态以进行缓存。但是,我现在遇到的问题是,一旦我注销一个帐户并在我的 Vue 应用程序上创建一个新帐户,我“保持活动”的组件就会反映给新用户(这显然不是与新用户相关)。
因此,我想在用户退出后销毁该组件。解决这个问题的最佳方法是什么?
在发布此问题之前,我咨询了有关此主题的以下主题:
如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib,而不是在 html 文件中 如何在 Webpack 中包含 jQuery CDN?
基于以上所有内容,似乎为了通过 CDN 加载第三方库,标准方法是使用 webpack externals,它会在 index.html 文件(每个 Webpack 文档)中生成以下脚本标记。
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
Run Code Online (Sandbox Code Playgroud)
如果您有一个或两个库,则此解决方案有效,但您应该如何使用 Webpack 中的外部组件通过 CDN 异步加载 10 个库(为了参数)(以最大化页面加载性能)?
我目前解决这个问题的方法是在我的 index.html 文件中手动包含以下脚本标签,并带有相关的“async”和“defer”标签;但是,每次我包含一个新库时,我都需要更新我的 dist 文件夹中的 index.html 文件,这让我相信我这样做完全错误。下面是我的 index.html 文件当前的样子,它也复制到了 dist 文件夹中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js" async defer></script> …Run Code Online (Sandbox Code Playgroud) 以下函数由async / await函数调用,因此我需要一个真正的Promise从Mongoose返回,因此每个文档和该SO线程都使用“ .exec()” 。
// where data is an array of documents
function insertNewResults(data) {
return Model.insertMany(data).exec();
}
Run Code Online (Sandbox Code Playgroud)
这样做给我以下错误:
TypeError:Model.insertMany(...)。exec不是insertNewResults的函数
如果删除exec(),我将能够插入Many,而不会出现任何问题。我使用exec()的其他查询似乎没有引发任何错误,这使它更加令人困惑。
有人可以解释为什么会这样吗?
编辑1:下面是我的模式代码
const mongoose = require('mongoose');
const schema = new mongoose.Schema({
date: { type: Date, required: true },
price: { type: Number, required: true },
result: { type: String, required: true }
}, { usePushEach: true });
schema.index(
{ date: -1 }
);
mongoose.model('Model', schema);
Run Code Online (Sandbox Code Playgroud) 正如这篇SO post所解释的,polyfills 应该在依赖文件夹中。
但是,Array.find() polyfill具有以下安装说明。
npm install --save-dev jspolyfill-array.prototype.find
我不应该将这个 polyfill 作为正常依赖项安装吗?
我有一个与这篇文章非常相似的问题;但是,在实施建议的修复后 - 我仍然收到以下错误。
我正在尝试编译由 Cython 生成的 C 文件。
cython ConnectFour.pyx --embed
Run Code Online (Sandbox Code Playgroud)
我尝试像这样编译我的 c 文件:
gcc -I /usr/local/Cellar/python3/3.7.0/Frameworks/Python.framework/Versions/3.7/Headers -o ConnectFour ConnectFour.c
Run Code Online (Sandbox Code Playgroud)
但是我收到以下错误:
Undefined symbols for architecture x86_64:
"_PyBaseObject_Type", referenced from:
___Pyx_InBases in ConnectFour-3c26d7.o
"_PyBytes_FromStringAndSize", referenced from:
___pyx_pymod_exec_ConnectFour in ConnectFour-3c26d7.o
___Pyx_InitStrings in ConnectFour-3c26d7.o
"_PyCFunction_NewEx", referenced from:
___pyx_pymod_exec_ConnectFour in ConnectFour-3c26d7.o
"_PyCFunction_Type", referenced from:
___Pyx_PyObject_CallOneArg in ConnectFour-3c26d7.o
___Pyx_PyObject_CallNoArg in ConnectFour-3c26d7.o
___Pyx_PyObject_Call2Args in ConnectFour-3c26d7.o
___Pyx_PyCFunction_FastCall in ConnectFour-3c26d7.o
___pyx_pf_11ConnectFour_36eval_heuristic_score in ConnectFour-3c26d7.o
___pyx_pf_11ConnectFour_38list_valid_col_idxs in ConnectFour-3c26d7.o
___pyx_pf_11ConnectFour_40deep_copy_board in ConnectFour-3c26d7.o
...
"_PyCode_New", referenced from:
___Pyx_InitCachedConstants in ConnectFour-3c26d7.o …Run Code Online (Sandbox Code Playgroud) 我是 C 新手,目前正在通过在 C11 中使用 _Generic 来探索函数重载的概念。
在这篇 SO 帖子中,@Lundin 提供了以下代码片段,我运行它没有任何问题:
#include <stdio.h>
void func_int (int x) { printf("%d\n", x); }
void func_char (char ch) { printf("%c\n", ch); }
#define func(param) \
_Generic((param), \
int: func_int(param), \
char: func_char(param)); \
int main()
{
func(1);
func((char){'A'});
}
Run Code Online (Sandbox Code Playgroud)
@Lundin 还提到了以下内容:
更好的方法是使用单个结构参数创建一个函数接口,该结构参数可以适应包含所有必要的参数。有了这样的接口,你就可以使用上面基于_Generic的简单方法了。类型安全且可维护。
所以我决定扩展上面的例子来structs看看它的实际效果。
以下是我的尝试:
#include <stdlib.h>
#include <stdio.h>
typedef struct args_int Args_int;
typedef struct args_char Args_char;
void func_int(Args_int args);
void func_char(Args_char args);
struct args_int {
int val;
};
struct …Run Code Online (Sandbox Code Playgroud) 该SO线程重点介绍了如何将独特的Firebase功能导入Web应用程序。
在我的VueJS SPA中,我只想在我的Web应用程序中包含firebase / auth。根据线程,以下所有片段都是必需的。
import * as firebase from 'firebase/app';
import 'firebase/auth';
Run Code Online (Sandbox Code Playgroud)
不幸的是,该线程中的答案/评论没有指定此导入操作的确切位置,也没有说明代码段的任何部分。
我尝试将上述代码添加到我的main.js文件(应用程序的入口以及初始化Firebase的位置)中;但是,在相应地更改了导入语句之后,整个firebase仍捆绑在我的应用程序中(如下所示)。
我的问题是,我的网络应用程序中还需要在哪里包含上述代码段?每次将Firebase导入使用Firebase函数的Vue组件时,都需要同时包括两个导入行吗?
另外,我觉得我的问题源于对进口实际情况的不了解。为什么我们必须import * as firebase然后import 'firebase/auth'呢?
这篇中级帖子还演示了如何导入特定的Firebase程序包,并引用了“摇树”,但没有做进一步解释。阅读有关“摇树”的文档可以帮助我理解该概念,但不能理解它与Firebase示例相关的工作方式。
注意,我目前正在使用Webpack v3.6.0作为捆绑程序。
javascript ×4
node.js ×3
vue.js ×3
asynchronous ×2
c ×2
vue-router ×2
webpack ×2
cdn ×1
css ×1
cython ×1
cythonize ×1
database ×1
dependencies ×1
firebase ×1
generics ×1
html ×1
memory-leaks ×1
mongodb ×1
mongoose ×1
npm ×1
overloading ×1
package ×1
performance ×1
python ×1
scroll ×1
socket.io ×1
struct ×1
vuex ×1
websocket ×1