1. 如何监听url中参数的变化？
正常情况下，url里的参数变化之后，页面是不会更新的。因为vue视为url没有变化，也没有触发任何生命周期的钩子函数。
解决方案：通过监听$route的变化来实现
watch: {
"$route": {
handler: function(val, oldVal) {
// do sth.
}
}
}
2. 在vue中监听DOM事件
不要使用DOM0级事件的形式，因为0级事件会互相覆盖
// 不推荐的写法
element.onclick = function() {
// do sth.
};
使用DOM2级事件则无问题
element.onEventListener("click", function() {
// do sth.
});
3. 兼容linux / windows系统的启动命令
当使用同一webpack配置打包两个项目时，启动命令需要添加一个环境变量的参数，用以区分两个项目的不同路径不同入口文件等，但是linux环境与windows环境下，给命令添加环境变量参数的写法有所不同，如下：
// linux
"dev": "PROJECT=user webpack-dev-server --config webpack.dev.config.js --port 8080",
// windows
"dev": "set PROJECT=user&&webpack-dev-server --config webpack.dev.config.js --port 8080"
注意：user与&&之间不能有空格，否则环境变量PROJECT会变成
user+空格。
我是自我反省的分割线，上面说的很对，但是也很蠢，其实更好的方式是使用cross-env
// 安装cross-env
npm install cross-env --save-dev
// 使用cross-env
"dev": "cross-env PROJECT=user webpack-dev-server --config webpack.dev.config.js --port 8080"
4. vue的一些小知识点
- 模板表达式中只能访问一个全局变量的白名单，比如Math、Date等
- 条件渲染 (v-if) 在切换时并不会完全重新渲染 DOM，比如两个 input
切换则输入值会被保留，可以为切换的元素添加不同的key来强制重新渲染 - v-show 无法使用 template 包装元素
- v-for 可以遍历对象，(value, key, index) in obj，分别代表值、键、索引
- v-on 的修饰符是有顺序的，@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击
- 动态组件可以使用 keep-alive，保留在内存
<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存！ -->
</component>
</keep-alive>
- 一个具有 name 属性的组件可以递归调用自身
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
- 使用 v-once，让静态资源模板只渲染一次
5. vue/react路由为history模式的nginx配置
location / {
root /path/to/the/dist;
try_files $uri $uri/ /index.html;
}
网友评论