小编rpi*_*var的帖子
vue-router:router-link无法正常工作
我正在尝试使用vue-router和router-link.当我单击链接时,URL会正确更新,但不会加载任何内容<router-view></router-view>.我猜这与使用unpkg CDN有关,而不是用vue-CLI构建它？我不确定为什么这不起作用.
的index.html
....
<body>
....
<nav id="app">
<li><router-link to="/hello">Hello</router-link></li>
<nav>
<!--view-->
<router-view></router-view>
....
<!--vue.js-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--router-->
<script src="js/router.js"></script>
</body>
router.js
const Hello = { template: '<div>test</div>' }
const routes = [
{ path: '/hello', component: Hello }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
我试过去除<li> </li>周围的router-link,但这似乎没有帮助.
推荐指数
解决办法
查看次数
动态导入：我错过了什么吗？
我有一个使用 Webpack 作为捆绑器的 React 项目，我将我的捆绑包分成两个块 - 主代码库main.js和供应商捆绑包vendor.js。
构建这些捆绑包后，main.js最终大小为 45kb 和vendor.js651kb。
一个特定的供应商库大小为 225kb，似乎是供应商导入中最严重的违规者。
我正在文件顶部的页面组件中导入该库：
import React from 'react';
import { ModuleA, ModuleB } from 'heavyPackage'; // 225kb import
...
const Page = ({ setThing }) => {
...
};
为了尝试将这个繁重的导入加载到单独的包中，我尝试使用动态导入来导入这些模块。
在组件内部Page，直到调用特定函数才真正使用模块，因此我尝试在该范围内而不是在文件顶部导入模块：
import React from 'react';
...
const Page = ({ setThing }) => {
...
const handleSignIn = async () => {
const scopedPackage = await import('heavyPackage');
const { moduleA, moduleB …推荐指数
解决办法
查看次数
Flex在Firefox中无法正常工作
我有两个似乎与flex不配合的文本输入。
他们应该这样定位：
..但是定位如下：
的CSS
.container{
width: 48.1%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display:flex;
justify-content: space-between;
}
input[type=text] {
font-size: 18px;
padding: 8px;
font-family: 'lato';
font-weight: 300;
line-height: 20px;
transition: all linear .5s;
display: inline;
margin-top: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ddd;
}
#zip{
flex: .21;
}
#phone{
flex: .7;
}
对于flex:，我正在使用分数，以使它们的总和不等于1，并且彼此之间应留一点余量。不过这只是没有发生。
的HTML
<div class="container">
<input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return …推荐指数
解决办法
查看次数
没有控制台或数学前缀的log()？
我目前正在浏览Touch Events上的MDN页面,我正在使用此代码:
HTML
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
Your browser does not support canvas element.
</canvas>
<br>
<button onclick="startup()">Initialize</button>
<br>
Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
JS
function startup() {
var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
log("initialized.");
}
我实际上从来没有见过log()像这样没有前缀console或Math前缀的东西,我希望它能在这里产生一些结果,但是当你点击按钮开启时它似乎没有在代码笔中做任何事情功能startup().我也做了一些搜索,很奇怪似乎没有找到任何东西.log()也用于MDN页面上的其他位置.
任何人都可以阐明它是如何工作的,或者为此分享资源,我只是没有找到？
推荐指数
解决办法
查看次数
大写的React元素抛出元素类型无效 - 为什么？
我正在尝试使用React创建自定义标签,如下所示:
// imports
// react
import React from 'react';
import ReactDOM from 'react-dom';
// ========================================
// classes & functions
const Home = <Home></Home>;
// ========================================
// exports
ReactDOM.render(
Home,
document.getElementById('root')
);
<Home></Home>抛出错误Element type is invalid.
将其更改为<home></home将起作用并将在浏览器中呈现此元素,但我得到此标志:
index.js:2178警告:此浏览器中无法识别标记.如果您要渲染React组件,请使用大写字母开始其名称.
我猜这与定义Home变量而不是函数或类有关？我在这做错了什么？如何<Home></Home>在浏览器中获取元素而不出错？
推荐指数
解决办法
查看次数
使用 React Hooks 在窗口上添加和删除鼠标移动侦听器
我试图在window单击对象时添加一个事件侦听器，然后在再次单击该对象时删除该事件侦听器。
Card单击组件时，状态isCardMoving会打开或关闭。
我添加了一个useEffect来观看isCardMoving。当isCardMoving打开时，它应该向mousemove触发该handleCardMove功能的窗口添加一个事件侦听器。该函数仅记录鼠标的坐标。
如果我再次单击该卡，isCardMoving将为 false，并且我希望窗口上的事件侦听器在useEffect.
isCardMoving但会发生什么情况，事件侦听器将在is时添加true，然后一旦isCardMovingis就不会被删除false。
import React from 'react';
const App = () => {
const [isCardMoving, setIsCardMoving] = React.useState(false);
React.useEffect(() => {
if (isCardMoving) window.addEventListener('mousemove', handleCardMove);
else window.removeEventListener('mousemove', handleCardMove);
}, [isCardMoving]);
const handleCardMove = (event) => console.log({ x: event.offsetX, y: event.offsetY });
return <Card onClick={() => setIsCardMoving(!isCardMoving)} />;
};
然后我尝试ref在窗口上设置 …
addeventlistener mousemove reactjs react-hooks removeeventlistener
推荐指数
解决办法
查看次数
golang的x%y是什么样的操作？
我正在阅读一些golang教程,我遇到了这个for循环:
for n := 0; n <= 5; n++ {
if n%2 == 0 {
continue
}
fmt.Println(n)
}
我对这n%2句话感到困惑.
这个输出是:
1
3
5
看起来这些不是2的倍数,但== 0如果是这种情况,我不理解声明的部分？是否有资源谈论此操作,或者我应该查找的内容？
推荐指数
解决办法
查看次数
标签 统计
javascript ×3
reactjs ×3
css ×1
css3 ×1
firefox ×1
flexbox ×1
go ×1
html ×1
mousemove ×1
react-hooks ×1
vue-router ×1
vue.js ×1
vuejs2 ×1
webpack ×1