Vue 常见问题汇总及解决方案

1. 我给组件内的原生控件添加事件,怎么不生效了!!!

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

2. 我用了 axios , 为什么 IE 浏览器不识别(IE9+)

那是因为 IE 整个家族都不支持 promise, 解决方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();

3.我在函数内用了this.xxx=,为什么抛出Cannot set property ‘xxx’ of undefined;

这又是this的套路了…this是和当前运行的上下文绑定的…
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;
解决方案：

暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
箭头函数: 会强行关联当前运行区域为 this 的上下文;

4.为什么我的组件间的样式不能继承或者覆写啊!

单组件开发模式下,请确认是否开启了 css模块化功能!也就是scoped(vue-cli 里面配置了,只要加入这个属性就自动启用)。

<style lang="scss" scoped></style>

为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash! 比如：

// 写的时候是这个
.trangle{}
// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{}

这些都是在 css-loader 里面配置!!!

5.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错!

必须给对应的服务端配置查询的主页面…也可以认为是主路由入口的引导。
官方文档也有,为毛 总有人不喜欢去看文档,总喜欢做伸手党。

6.我想拦截页面,或者在页面进来之前做一些事情,可以么?
可以的，各种路由器的钩子!!当然,记忆滚动的位置也可以做到,详情翻翻官网里面的文档。

7.Uncaught ReferenceError: xxx is not define
实例内的 data 对应的变量没有声明，你导入模块报这个错误,那绝逼是导出没写好。

8.安装模块时命令窗口输出unsupported platform xxx

一般两种情况,node版本不兼容,系统不兼容;
解决方案: 要么不装,要么满足安装要求;

9.Unknown custom element: - did you register the component correctly?
组件没有正确引入或者正确使用,依次确认

导入对应的组件
在 components 内声明
在 dom 区域声明标签

10.this.$set|this.$xxx 这个 $ 是个什么意思?是 jQuery的么,会冲突么?

Vue 的$和jQuery的$并没有半毛钱的关系,就跟JavaScript和java一样.
Vue 的$是封装了一些vue的内建函数,然后导出以$开头…这显然并不是 jQuery的专利;
jQuery 的$是选择器!!取得 DOM区域…两者的作用完全不一致!

11. 组件的通讯有哪几种啊!
基本最常用的是这几种;

父传子: props
子传父: emit
兄弟通讯:event bus: 就是找一个中间组件来作为信息传递中介
vuex: 信息树

12.是什么,html5的标签么?
你猜对了…html5的标签还真有这么一个，不过 Vue 的 template 有点不一样,不是去给浏览器解析的。

你可以理解为一个临时标签,用来方便你写循环,判断的…
因为最终 template 不会解析到浏览器的页面,他只是在 Vue 解析的过程充当一个包裹层!最终我们看到的是内部处理后的组合的 DOM 结构!