脚本宝典收集整理的这篇文章主要介绍了

Vue常见问题及处理

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

常见问题及处理

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

错误提示:

  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.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&&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=()=>{}

clipboard.png

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

总结

以上是脚本宝典为你收集整理的

Vue常见问题及处理

全部内容,希望文章能够帮你解决

Vue常见问题及处理

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过