Vue Code Snippet
Style Guide
https://cn.vuejs.org/v2/style-guide/
重置 data 的数据为初始状态
this.$data = { ...this.$data, ...this.$options.data() };
// Object.assign(this.$data, this.$options.data());
Object.assign({}, this.$options.data().form, { type: 1 });修改 ElementUI 默认样式
<template>
<div class="my-class">
<el-table> </el-table>
</div>
</template>
<style lang="scss" scoped>
.my-class__expand-column .cell {
display: none;
}
.my-class .el-table tbody tr:hover > td {
cursor: pointer;
}
</style>watch 对象的属性
data: {
a: 100,
msg: {
channel: "音乐",
style: "活泼"
}
},
watch: {
a(newval, oldVal) {
console.log("new: %s, old: %s", newval, oldVal);
}
}watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
// 深度监听
deep: true
}
}监听对象内的某一具体属性，可以通过 computed 做中间层来实现：
computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
}
}判断 data 中的对象是否为空
1、利用 jQuery 的 isEmptyObject：
$.isEmptyObject(data.list);实现源码：
isEmptyObject: function(obj) {
var name;
for (name in obj) {
return false;
}
return true;
}2、获取到对象中的属性名，存到一个数组中，通过判断数组的 length 来判断此对象是否为空：
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0); // trueES6：
var arr = Object.keys(data.list);
alert(arr.length == 0); // true3、转化为 json 字符串，再判断该字符串是否为 {}：
var b = JSON.stringify(data) == "{}";
alert(b); // true关闭 webpack-dev-server 自动刷新
文件保存后页面刷新，刷的眼晕。
devServer: {
...
hot: false,
inline: false,
liveReload: false
}注释掉 plugins 中的相关插件。
plugins: [
// new webpack.HotModuleReplacementPlugin()
],必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR。如果 webpack 或 webpack-dev-server 是通过 –hot 选项启动的，那么这个插件会被自动添加，所以你可能不需要把它添加到 webpack.config.js 中。
nextTick
在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个
watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环 “tick” 中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的Promise.then和MessageChannel，如果执行环境不支持，会采用setTimeout(fn, 0)代替。
键盘监听事件
<input type="text" @keyup.esc="KeyUpEsc" />使用 element 组件库的 el-input 标签，绑定 delete 键：
<el-input
v-model="input"
placeholder="请输入内容"
@keyup.delete.native="KeyUpDelete"
></el-input>为什么这次绑定事件多一个 .native 修饰符，这个可能是因为 element-ui 封装了个 div 在 input 标签外面，把原来的事件隐藏了，所以如果不加 .native 的话，按键不会生效。
上面两种实现效果是当 input 标签获取到 焦点 的时候，才能监听到键盘，下面这种是全局监听 enter 键，是把监听事件绑定到 document 上（登录页面常用）：
created: function() {
var _this = this;
document.onkeydown = function(e) {
let key = window.event.keyCode;
if (key == 13) {
_this.submit();
}
};
},键盘回车后页面被刷新
form 回车后执行查询方法，但是却重新刷新了页面，并且路由多了一个问号，http://localhost:3009/?#/admin。
解决方案：el-from 加上 @submit.native.prevent：
<el-form @submit.native.prevent>
<el-form-item>
<el-input @keyup.enter.native="handleInputConfirm(obj)"> </el-input>
</el-form-item>
</el-form>
<script>
export default {
methods: {
handleInputConfirm(obj) {
// ... 提交内容
},
},
};
</script>原因：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。
解决方案二：为表单元素增加属性 onSubmit="return false"。
.sync 修饰符
<history-dialog
:historys="historyTable"
:dialogVisible.sync="dialogHistoryTableVisible"
/>methods: {
onClose() {
this.$emit("update:dialogVisible", false);
},
},优化图片加载失败
<div>
<img :src="item.picture" @error.once="handleImgError($event)" />
</div>handleImgError (e) {
e.currentTarget.src = "http://www.ianbiangou.cn/index/ICON2.png"
}数据绑定
this.form = {}; // 不要用这种：this.form = '';References
腾讯云开发者
