?sonder* 的博客

前置说明React本身只关注于界面，并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互（json数据）react 应用中需要集成第三方ajax库或者自己封装常用的ajax请求Jquery比较重，如果需要另外引入不建议使用axios：轻量级，建议使用封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端跨域  出于浏览器的同源策略限制。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（

双向数据绑定从页面到数据都是通过事件监听的方式，即v-on事件监听。对于表单，就是v-bind:value+v-on:input对于单复选框，就是v-bind:value+v-on:change对于select，将value作为props传给options，用change监听从数据到页面就是数据绑定，主要是响应式数据绑定，v-on事件监听只是去改变数据，而数据如何响应还是依赖的响应式数据。整体MVVM 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：目前前端框架基

如何进行父子组件的通信？​父组件通过import引入子组件，并在父组件中通过component属性注册，然后子组件就可以用标签的形式嵌进父组件了。通过props进行通信子组件通过props选项能够接收到来自父组件的数据。props是单向绑定的，即只能父组件向子组件传递数据，不能反向。并且传递方式也有两种：静态传递：子组件通过props来声明一个自定义的属性，但这个属性是静态的，不能发生改变。通常用来传字符串。动态传递：通过v-bind绑定props的自定义属性，传递过去可以是一个表达式、布

#mermaid-svg-1Ttew15NUeAj72uL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1Ttew15NUeAj72uL .error-icon{fill:#552222;}#mermaid-svg-1Ttew15NUeAj72uL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1Ttew15

  最近在Vue官方文档看到自定义事件的表单输入组件时，纠结了亿会儿才绕过弯，所以决定总结一下让自己思路更清晰。  了解过vue的都知道v-model是用于表单数据的双向绑定，但到底怎么实现的，可能有一部分人都答不上来了。今天我们就来聊一聊v-model双向数据绑定的原理及如何在组件上使用。v-model语法糖  v-model用于表单数据的双向绑定，但其实它本身就是一个语法糖，它背后完成了两个操作：...

  创建好Vue项目后，自己写了父子组件进行测试，没想到报错，直接给我搞得有点懵。不过看报错原因，八成是eslint搞得鬼说有六个错误警告 , 需要注意字符间距、还要加回车什么的, 但我找不到位置, 所以直接进行修复解决办法, 执行npm run lint --fix自动修复警告npm run lint --fix  这样就可以正常运行了……...

SwitchV6.0以上的版本中Routes已经将Switch取代通常情况下，path和component是一一对应关系Switch可以提高路由匹配效率（单一匹配）路由的基本使用明确好界面中的导航区、展示区导航区的a标签改为Link标签<Link to='/xxxxx'>Demo</Link>//无高亮状态切换<NavLink to='/xxxxx'/>About</NavLink>//中间的标签元素可以使用<NavLink&gt

  diffing意为different，react、vue，都是先生成虚拟DOM之后，再转换为页面的真实DOM。DOM更新时，react会先与之前的虚拟DOM做对比，和之前一样的节点可复用，不会重新渲染；然而与之前不同的节点，则重新生成。这就是我们常说的DOM的diffing算法。react/vue中的key有什么作用？（key的内部原理是什么？）虚拟DOM中的key有什么作用：简单来说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用详细的说：当状态中的数据发生变化时，rea

场景  运用编程式路由导航，处在当前路由状态下，进行二次跳转（一直点击同一个按钮）时会报错 [Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca解决办法使用onComplete()、onAbort()this.$router.push({ path: ‘/XXX’ },onComplete => {},onAbort => {}) 

  用过的大部分人都知道，assets和static都用于在Vue中存储静态资源，那两者有何区别呢？相同点assets 和 static 两个都是用来存放静态资源文件；项目中所需要的资源文件图片、字体图标、样式文件等都可以放在这两个目录下不同点assets 中存放的静态资源文件在项目打包时，即：在运行 npm run build 时，会将 assets 中放置的静态资源文件进行打包上传（所谓打包，简单点可以理解为压缩体积、代码格式化），而压缩后的静态资源文件最终也都会放置在 static 目

  使用vue-cli创建项目时，项目初始化完成后执行npm run dev命令时报错：‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。如图所示：  起初我试着重新装 webpack-dev-server，然而装完之后会有一个一个的依赖接踵而来。查询百度后发现有一篇好的解决方案，分享给大家 原文第一种方法：  通常这种问题就是缺少依赖，尝试进行npm install 或 cnpm install进行重新下载，如果还是不可以就尝试第二种方法。最好npm和

  安装vue脚手架时，使用工具命令vue init webpack vue1创建vue项目的时候报错，提示连接超时，应该是下载某个package的时候，需要翻墙，导致出现连接超时。超时错误截图如下：  根据百度搜索结果，解决的办法就是离线创建。我们需要从github仓库中下载vue-templates/webpack，然后解压到本地。下载地址：https://github.com/vuejs-templates/webpack 。  国内网络不太稳定可能造成无法访问：https://pan.baid