脚本宝典收集整理的这篇文章主要介绍了Vue常见问题及处理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

常见问题及处理

1.vue.js 2.0要求每个template只能有一个根元素。可以在最外层包一个div来解决这个问题。

错误提示：

PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" vue.js:435 [Vue warn]: Error compiling template:

这是页头

登录 component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead." tITle="" data-original-title="复制">

  vue.js:435 [Vue warn]: Error compiling template:
  <h2>这是页头</h2>
  <button>登录</button>
  Component template should contain exactly one root element. 
  If you are using v-if on multiple elements, 
  use v-else-if to chain them instead.

   解决方案：在最外层包上一个div容器（不允许直接返回多个元素）

2.把局部组件当成全局组件去使用了

错误提示：

Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to PRovide the "name" option." title="" data-original-title="复制">

 vue.js:435 [Vue warn]: Unknown custom element: <my-footer> - did
 you register the component correctly? For recursive components, make
 sure to provide the "name" option.

解决方案：正确的注册组件

3.在组件中去初始化数据 不允许给data直接赋值一个对象

错误提示：

   The "data" option should be a function that returns a per-instance
  value in component definitions.

解决方案： 
Vue.COMponent('',{
       data:function(){
        return {}
       }
    })

4.push前面的那个变量，其实undefined

错误提示 ：

Uncaught TypeError: Cannot read property 'push' of undefined

解决方案：
this 通过箭头函数来解决问题

5.不支持ico图片格式

错误提示：

C:xampphtdocsframeworkvueprojecttplssrcassetsimgfavicon.ico
Unexpected character '' (1:0) You may need an appropriate loader to
handle this file type. (Source code omitted for this binary file)
ERROR in ./src/assets/img/favicon.ico Module parse failed:

解决方案：
找到build/webpack.base.conf.js
在41行加上 |ico 
如：test: /.(png|jpe?g|gif|svg|ico)(?.*)?$/,

6.跨域问题

错误提示：

No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://localhost:8080' is therefore not
Allowed access.

解决方案：
在通用引入的php文件中添加引入header，注意：引入的php要放在最上方
header('Access-Control-Allow-Origin:*');

7.Vue用ajax获取数据绑定在data上

在vue编写登录验证信息时，验证信息的显示数据由ajax返回，如何在htML中显示data

问题代码：

<input @blur="name_check()"
 v-model="uname" type="text" 
class="form-control" 
placeholder="管理员登录名" required />
<span>{{uname_show}}</span>

name_check:function(){
                var xhr=new XMLHttpRequest();
                var uname=this.uname;
                var url="http://localhost/admin/data/user/check_uname.php?uname="+this.uname;
                xhr.open('get',url,true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4&amp;&xhr.status==200){
                        var uname_text=JSON.parse(xhr.responseText);
                        this.uname_show=uname_text.msg;
                        console.log(this.uname_show);
                    }
                }
                xhr.send(null);
            }

问题所在：可以打印，但不能在span中显示。
分析原因：this.uname_show=uname_text.msg;中的this，不是指向的vue实例
解决方法：将匿名函数变成箭头函数，xhr.onreadystatechange=()=>{}

(个人总结学习文档，会持续更新，欢迎大家留言交流，如有帮助多谢点赞啦~)

脚本宝典总结

以上是脚本宝典为你收集整理的Vue常见问题及处理全部内容，希望文章能够帮你解决Vue常见问题及处理所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。