父子组件双向绑定
组件之间的双向绑定最近在学习electron+vue仿有道云笔记markdown区域的代码中，遇到父组件与子组件数据需要同步变化的问题。
（可以利用组件间的v-model或者.sync修饰符）故做此总结。
利用 v-model通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。可以利用v-model的使用原理来使组件之间利用v-model进行双向绑定。
父组件通过v-model绑定一个变量传给子组件
子组件通过props['value']接收。注意是value
子组件通过$emit('input',XX)去改变父组件中v-model绑定的变量。注意是input事件
v-model 原理Vue根据元素决定如何监听和处理数据。对于input元素，您可以这样使用v-model：
<input v-model="email" />
v-model 翻译成这样：
<input :value="email" @input="(e) => (email = e.target.value)" /&g ...
Proxy和Reflect
Proxy 和 Reflect
转载于Proxy 和 Reflect
一个 Proxy 对象包装另一个对象并拦截诸如读取/写入属性和其他操作，可以选择自行处理它们，或者透明地允许该对象处理它们。
Proxy 用于许多库和某些浏览器框架。在本章中，我们将看到许多实际应用。
语法：
let proxy = new Proxy(target, handler);
target —— 是要包装的对象，可以是任何东西，包括函数。
handler —— 代理配置：带有“钩子”（“traps”，即拦截操作的方法）的对象。比如 get 钩子用于读取 target 属性，set 钩子写入 target 属性等等。
对 proxy 进行操作，如果在 handler 中存在相应的钩子，则它将运行，并且 Proxy 有机会对其进行处理，否则将直接对 target 进行处理。
首先，让我们创建一个没有任何钩子的代理：
let target = {};
let proxy = new Proxy(target, {}); // 空的handler对象
proxy.test = 5; // 写入 Prox ...
git命令
GIT 命令git basics
git init
在指定的⽬录下创建⼀个空的 git repo。不带参数将在当前⽬录下创建⼀个 git repo。
git clone
克隆⼀个指定 repo 到本地。指定的 repo 可 以是本地⽂件系统或者由 HTTP 或 SSH 指 定的远程路径。
git config user.name
针对当前 repo 配置⽤户名。使⽤ –global 参数将配置全局⽤户名。
git add
将指定目录的所有修改加⼊到下⼀次 commit 中。把替换成 将 添加指定文件的修改。
git commit -m ““
提交暂存区的修改，使用指定的 作为提交信息，而不是打开文本编辑器输⼊提交信息。
git status
显示哪些⽂件已被 staged、未被 staged 以及未跟踪 (untracked)。
git log
以缺省格式显示全部 commit 历史。更多自定义参数请参考后续部分。
git diff
git diff
⽐较⼯作区和暂存区的修改。
git diff HEAD
⽐较工作区和上⼀次 comm ...
移动端适配的几种方案记录
移动端适配的几种方案记录思路
写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用rem|| vw相对单位，不需要缩放的使用px
固定尺寸+弹性布局，不需要缩放（viewport、vm、rem）但是等比适配，放在ipad上的时候（设计稿以手机屏幕设计），页面的元素会很大很丑，所以并不是所有的场景下，页面都做整体的缩放（viewport 自动处理的也很好了）。利用合理的布局也可以比如flex、grid
viewport 适配
设计稿的宽度为750px,写完页面之后元素自动缩小，适配375px宽度的屏幕。
<meta name="viewport" content="width=750,initial-scale=0.5">
inital-scale = 屏幕的宽度 / 设计稿的宽度。但是移动端的屏幕肯定不止一种宽度，所以需要动态的设置 inital-scale的值。
<head>
<script>
const WID ...
参考vue-element-admin的i18n实现思路
国际化(Vue+ElementUI)的实现安装npm install vue-i18n --save-dev
引入// src/main.js
import i18n from '@/lang/index.js'
Vue.use(ElementUI，{
i18n:(key,value)=> i18n.t(key,value) // ElementUI默认只兼容vue-i18n的5.x版本。该行代码是为了兼容7.x甚至更新的版本
})
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
// src/lang/index.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui 的语言包
import eleme ...
动态路由权限的解决方案
Vue 动态添加路由及生成菜单写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。思路是仿照vue-element-admin。
动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。
先看一下官方介绍：
router.addRoutes
router.addRoutes((routes: Array<RouteConfig>));
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
举个例子：
const router = new Router({
routes: [
{
path: "/login",
name: "login",
component: () => import("../components/Login.vue"),
},
{ path: "/", redirect: "/home" },
],
});
上面的代码和下面的代码效果是 ...
ESLint超级详细
此文章转载于从 ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验
解答了关于 ESLint 的很多疑惑，文章简明通俗易懂~~~
最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。
阅读完这篇文章，你可以收获：
能够自己亲手写出一套 ESLint 配置;
会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码;
vue-cli 在初始化一个包含代码校验的项目时都做了什么;
Prettier 是什么?为什么要使用它?如何与 ESLint 配合使用?
EditorConfig 又是什么?如何使用?
如何在 VSCode 中通过插件来协助代码校验工作;
如何保证 push 到远程仓库的代码是符合规范的;
下面开始阅读吧，如果你对 ESLint 比较熟悉，可以直接跳过这个部分。
ESLint 是什么E ...
Vue中使用JSX
JSX 使用理由每个组件上都有一个render函数,其写法是this.$createElement('div', {}, [...]),非常的不直观，JSX可以改进这种写法，使其更加直观方便。
注意: 如果在组件上定义了render方法，则Vue将忽略template定义。因为 template最终还是需要编译成render的格式。
啥叫 JSX 呢
JSX 是 JavaScript 的类似 XML 的语法扩展，没有任何定义的语义。
通过babel将JSX转成JS。简单来说呢，JSX就是在JS中写类似HTML的语法。
如果使用的Vue-cli大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。
在 Vue 中使用 JSX 需要注意的地方
要监听JSX中的事件，我们需要“on”前缀。 例如，将onClick用于单击事件。
render (createElement) {
return (
<button onClick={this.handleClick}></button>
)
}
绑定变量，注意这里不是使用: ...
Vue-router基本使用
路由的基本使用方法vue-router的使用分为三步
引入vue-router，并使用Vue.use(VueRouter)
定义路由数组const routes = {}，并将数组routes传入VueRouter实例，并将实例暴露出去export default new VueRouter({ routes})
将VueRouter实例引入到main.js，并注册到根Vue实例
注意：this.$route、this.$router
this.$route：表示的是当前的路由信息。this.$route.matched是一个数组，包含了当前路由的所有的嵌套记录，即是routes配置中的对象数组，包括自己的信息和children数据。
this.$router：表示的是全局的路由信息。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。所有的页面都可以访问。比如常用的是this.$router.push()。如果提供了path，params会被忽略，例如：
this.$router.push({path: 'home', para ...
JS小偏门
复制数组array.concat()
console.table(obj)用于对象或者对象数组。console.clear()清空控制台
eval()参数是字符串，将字符串变成可执行的JS代码
a标签的href的动态参数，可以设置为参数设置不同的值
<a :href="'www.ZJingW.blog?id='+userId" ></a>
let userId =1111
this 既不指向函数自身也不指向函数的词法作用域。this 实际上是在函数调用的时发生的绑定，它指向啥完全取决函数在哪里被调用
调用栈->为了到达当前执行位置所调用的所有的函数 | 调用位置–>当前正在执行的函数的前一个调用中
html5 的meta
meta 有4个属性 name http-equiv charset content content和它们搭配使用，content =
'具体的描述' name 主要用于描述网页
content就是进一步说明name，也就是指定具体的name对象 http-equiv
相当于http的文件头作用，比如说定义htt平参 ...
