分类 VUE 下的文章
TypeError: Cannot read property 'range'
TypeError: Cannot read property 'range' of null
由下面引起的报错
vue-cli 3.x配置跨域代理
由于3.x的默认配置都转移到了CLI service里,所以生成的项目中并没有配置项,我们如果需要自定义一些项目配置,则需要自己在项目的根目录(root)创建一个vue.config.js。vue.config.js里的配置项所有都是可选的,这就避免了我们去看一大堆不必要的默认配置,只需要配置自己需要的部分就行了。
由于baseUrl也是关联的部署目录,我们需求的仅仅是开发环境的变量,所以尽可能的我们不动baseUrl这个变量以免部署的时候出现问题。所以这里配置稍作修改。
需求上是我们只需要在开发环境配置跨域代理,所以我们可以在开发环境的配置上加上能够代理上的环境变量即可。官方提供了环境变量的配置方案。
在项目的根目录,我们创建一个.env.development文件来做开发环境的变量设置。
我们在.env.development文件下设置变量VUE_APP_BASE_API=/api即可将devServer的proxy重写的url赋值给VUE_APP_BASE_API,我们仅需在axios的封装方案上使用VUE_APP_BASE_API这个变量,就可以对应上devServer设置的变量。
// vue.config.js
module.exports = {
// 修改的配置
// 将baseUrl: '/api',改为baseUrl: '/',
baseUrl: '/',
devServer: {
proxy: {
'/api': {
target: 'http://www.example.org',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
// .env.development
VUE_APP_BASE_API=/api
这里依然是采用的http-proxy-middleware来做的代理配置,一些自定义配置可以移步到官网去进行参考。
vue 监控对象变化
监控深层对象变化
that.$watch(
function () { // 第一个函数就是处理你要监听的属性,只要将其return出去就行
return that.result.data[0].cardNo;
},
function (old, valold) {
that.parseCardId()
}
)
监控一般对象变化
export default {
data() {
return {
a: {
b: 1,
c: 2
}
}
},
watch() {
a: {
handler(newVal, oldVal) {
console.log('监听a整个对象的变化');
},
deep: true
}
}
}
vue.js阻止事件冒泡和默认事件
原生js取消事件冒泡
try{
e.stopPropagation();//非IE浏览器
}
catch(e){
window.event.cancelBubble = true;//IE浏览器
}
原生js阻止默认事件
if ( e && e.preventDefault ) {
e.preventDefault()//非IE浏览器
} else { window.event.returnValue = false; } //IE浏览器
vue.js取消事件冒泡
<div @click.stop="doSomething($event)">vue取消事件冒泡</div>
vue.js阻止默认事件
<div @click.prevent="doSomething($event)">vue阻止默认事件</div>