Vue 使用中遇到的问题(一)

版权声明:未经博主允许,请勿转载原创,谢谢! https://blog.csdn.net/mystonelxj/article/details/88545451

在使用Vue过程中,如果语法使用不当,会在调试区域(Chrome 开发者平台中的Console区域)出现提示错误,因具体情况不同提示有差异:

1 ,Vue实例未加载

错误提示:

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

(found in <Root>)

解决方案:

template 声明需在 Vue 调用 app 之前

2 ,Vue实例未加载

错误提示:

Cannot find element: #demo

解决方案:

Vue 实例声明 在 html 之后

3,属性间忘记写逗号

错误提示:

Uncaught SyntaxError: Unexpected token

解决方案:

属性项目(如data,methods)注意是否没有写逗号结尾

4,关键字写错

错误提示:

vue.js:633 [Vue warn]: Failed to resolve directive: mdoel

(found in <Anonymous>)

解决方案:

将 v-mdoel 改写为 v-model

5,模板根元素不惟一

错误提示:

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.

解决方案:

在模板定义时添加根节点元素(如 div)

6,注意调用方法的属性位置是否在正确的组件中

错误提示:

[Vue warn]: Property or method "add" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

解决方案:

将add方法写入正确的组件内

7,用字符串使用变量

错误提示:

vue.js:633 [Vue warn]: Invalid Component definition: temp1

解决方案:

在使用变量时,不加引号标识,如使用模板变量

          components:{

                "mycomponent":temp1

            }

8,模板定义方法错误

错误提示:

vue.js:633 [Vue warn]: Invalid prop: type check failed for prop "checked". Expected Boolean, got Event

found in

---> <BaseCheckbox>

       <Root>

解决方案:

安装 下述模式,书写

 this.$emit('change', event.target.checked);  

 

 

猜你喜欢

转载自blog.csdn.net/mystonelxj/article/details/88545451