把内容都写到div#app里面来, 因为vue指定了以#app为根标签, 按照你写的模板结构, vue会创建一套虚拟DOM解析真正的内容和标签, 然后替换到这个标签上来, 写外面你让vue咋解析?
报错: Do not mount Vue to
<html>
错误描述: 不能使用html或body作为vue的模板根标签
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body id="app"></body>
<script>
new Vue({
el:'#app'
</script>
报错图示:
Vue框架不允许把html或者body作为挂载的根元素
把挂载根元素换成普通元素即可
<div id="app"></div>
报错: Property or method 'xxx' is not defined on the instance
错误描述: 属性或方法没定义
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{name}}
</div>
<script>
const vm = new Vue({
el: '#app',
computed:{}
data: {},
methods: {}
</script>
在vue组件实例的模板中使用到的属性值或者方法必须要在实例的配置项中定义好才可以使用
根据错误提示的内容，去组件实例选项中查看是否未定义该属性，查找范围包括data,computed,methods,props
在data: {} 里面定义name变量
报错: method 'name' has already been defined as a
报错: the data property 'name' is already defined
错误描述: xxx already defined 就是已经定义过了的提示, 肯定重复定义了变量名哦
有问题代码:
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'cp'
props: {
name: {
type: String
computed: {
name() {}
methods: {
name() {
console.log(`cp`)
</script>
报错图示:
Vue框架不允许data/props/computed/methods中任意两项出现重复的属性名，在初始化配置时会进行名称检测
根据错误提示找到哪里发生了重复，找到重复属性名更改为不重复即可
报错: Duplicate keys detected
错误描述: 发现重复的key
有问题代码
<script src="./vue.js"></script>
<div id="app">
<li v-for="item in list" :key="item.id">
{{item.name}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'react' },
{ id: 2, name: 'vue' },
{ id: 1, name: 'angular' }
</script>
报错图示:
为保证列表的高效更新 vue框架在我们使用v-for指令的时候要求为每一项绑定一个唯一的key属性，注意key必须是唯一不可重复的 代码中的存在重复的id 所以会报错
每次给key绑定值时确保是唯一的值
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<li v-for="item in list" :key="item.id">
{{item.name}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'react' },
{ id: 2, name: 'vue' },
{ id: 3, name: 'angular' }
</script>
报错: the data option should be a function
错误描述: 说你的data选项必须是一个方法
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
Vue.component('add-component', {
data: {
name: 'cp'
const vm = new Vue({
el: '#app'
</script>
报错图示:
上面申明的组件add-component上面的data属性直接配置了一个对象，这在vue的组件系统中是不允许的，因为组件的核心使用场景是复用，data如果直接赋值一个对象，那么多个重复的组件会共用一套数据，一个组件进行数据更改所有组件都会受到影响，违背了组件的功能独立性
任何一个组件的data都应该申明为一个函数，函数中返回一个对象，这个全新的对象作为组件的依赖数据
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
Vue.component('add-component', {
data(){
return {
name:'cp'
const vm = new Vue({
el: '#app'
</script>
报错: Component template should contain exactly one root element
错误描述: 组件模板应该只包含一个根元素标签
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<add-component></add-component>
</div>
<script>
Vue.component('add-component', {
template: `
<div></div>
new Vue({
el: '#app'
</script>
报错图示:
vue组件的的template选项中只能拥有一个根元素 原因是因为一是为了做组件样式隔离，二是为了渲染时存放当前的组件对应的vnode，所以只能有一个根元素 这在vue3.0中会得到改善
只写一个根元素
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<add-component></add-component>
</div>
<script>
Vue.component('add-component', {
template: `
<div></div>
new Vue({
el: '#app'
</script>
报错: do not use build-in or reserved HTML elements as
错误描述: 不能将内置或保留的html元素用作组件
有问题代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<script>
Vue.component('header', {
data(){
return {}
const vm = new Vue({
el: '#app'
</script>
报错图示:
Vue框架对于组件的命名规则有一定限制，不允许和HTML内置标签发生名称重复，上面组件的名称header和HTML内置标签中的header标签重复，关于vue中的组件命名希望大家严格遵守
将组件名称替换成规范的命名规则即可
报错: Unknown custom element
错误描述: 不知道自定义的标签, 你注册了吗?
有问题代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<father-component></father-component>
</div>
<script>
Vue.component('father-component', {
template:`
我是父组件
<son-component></son-component>
const vm = new Vue({
el: '#app',
components:{
'son-component':{
template:`
<div>我是子组件</div>
</script>
报错图示:
组件 并没有在父组件 中注册，所以并不能正常使用，大家一定要记着，全局组件在每一个vue实例的模板中都能正常使用，而局部注册的组件只有在父组件的components选项中注册时候才能使用
在父组件的components中注册一下组件即可
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<father-component></father-component>
</div>
<script>
Vue.component('father-component', {
template:`
我是父组件
<son-component></son-component>
components:{
'son-component':{
template:`
<div>我是子组件</div>
const vm = new Vue({
el: '#app'
</script>
总结: 谁用谁注册哦~全局的不用注册, 直接用
报错: Failed to mount component: template or render function not defined
错误描述: 无法装载组件：未定义模板或呈现函数
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<add-component></add-component>
</div>
<script>
Vue.component('add-component', {
data() {
return {}
new Vue({
el: '#app'
</script>
报错图示:
尝试渲染组件，但是组件中既没有tempalte选项又没有render函数，因为vue组件的渲染最终是要执行render函数的，如果render函数存在就以render函数为准，如果render函数不存在，则会把template选项编译成为render函数再执行 所以这俩个需要申明其中的一个
申明template选项或者申明render函数
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('add-component', {
template:`
<div>this is add-component</div>
data() {
return {}
new Vue({
el: '#app'
</script>
报错: Avoid mutating a prop directly since the value will be overwritten
错误描述: 避免直接改变属性，因为值将被覆盖
有问题代码
<script src="./vue.js"></script>
<div id="app">
<add-component title="this is title"></add-component>
</div>
<script>
Vue.component('add-component', {
props: {
title: {
type: String
template: `
{{title}}
<button @click="change">修改数据</button>
methods:{
change(){
this.title = 'new title'
new Vue({
el: '#app'
</script>
报错图示:
可以通过事件传递的方式，通过调用父组件的一个方法进行修改title数据，这样的话就符合父组件修改自己数据的要求，或者我们可以把props中的title赋值给子组件data中的一个新的值，让它成为子组件自己的数据，这样的话就可以子组件自己修改了
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<add-component title="this is title"></add-component>
</div>
<script>
Vue.component('add-component', {
props: {
title: {
type: String
data() {
return {
childTitle: this.title
template: `
{{childTitle}}
<button @click="change">修改数据</button>
methods: {
change() {
this.childTitle = 'new title'
new Vue({
el: '#app'
</script>
报错: Computed property "xxx" was assigned to but it has no setter
错误描述: 计算属性想被赋值, 但是它没有setter方法
有问题代码
<div id="app">
<input type="checkbox" v-model="isAll">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
computed: {
isAll(){
return true;
</script>
报错图示:
set(val) {
this.arr.map(obj => {
obj['checked'] = val;
get() {
return this.arr.every(obj => obj['checked'] == true);
报错: avoid using JavaScript unary operator as property name
错误描述: 避免使用JavaScript一元运算符作为属性名
有问题代码
<tr v-for="(obj, index) in list">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.time }}</td>
<button @click="delete(index)">删除</button>
报错图示:
报错的意思是说你使用了一元运算符作为属性名, 而且报错里一直说delete有问题
后来百度一查发现delete是个关键字
所以以后不要用delete作为变量名/方法名哦
把delete换个名字使用和定义即可
<tr v-for="(obj, index) in list">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.time }}</td>
<button @click="delBtn(index)">删除</button>
methods: {
delBtn(index){
this.list.splice(index, 1);
报错: Templates should only be responseible for mapping the state to the UI
错误描述: 模板应该只负责将状态映射到UI
有问题代码
<div id="app">
<li v-for="item in arr">{{item}}</li>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: ["春天", "夏天", "秋天", "冬天"]
</script>
</div>
</body>
</html>
报错图示:
报错说只负责把状态更新到UI, 而且下面波浪线画的是script标签, 说明你script不是模板代码啊
Vue会把#app指定标签内的代码认为是模板代码, 怎么把script也认为了?
看代码结构, 发现把script写#app标签里了我的天啊...
解决: 把script标签等拿出来啊
拼写类错误
报错: Error in mounted hook: "TypeError: xxx is not a function"
错误描述: xxx不是一个方法
有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: "cp"
method:{
add(){}
mounted(){
this.add()
</script>
报错图示:
!> 此类错误并不会直接告诉你是拼写错了，如果你发现貌似根据错误提示怎么找都找不到，那么试着检查下，vue的配置项是不是拼写错了
解决: methods 配置项
报错: this.getOptions is not a function
错误描述: this.getOptions不是一个方法
代码环境: @vue/cli - 内部是webpack4.x版本, 而less-loader我们下的8.x版
报错图示:
百度上很多人遇到了, 让我下载less-loader除了8以外的版本
具体为啥less-loader8.x版本就不行了呢? 因为webpack4.x配置引入less-loader方式 和less-loader8不同, 具体参考这个文档
segmentfault.com/a/119000003…
报错: this dependency was not found
错误描述: 找不到此依赖项
有问题代码:
import "@api/hmmm/questions"
报错图示:
说找不到@api/hmmm/questions模块, 但是这是我们自己建立的, 为啥让我们下载, 应该是路径写错了导致未找到
@代表的是src文件夹, 你想访问src文件夹下的api文件夹, 正确写法 @/api
import "@/api/hmmm/questions"
报错: spawn cmd ENOENT
错误描述: spawn命令无法运行
报错图示:
- 199
-
Bpuns
React.js
Vue.js
Preact
- 207
-
敲代码的彭于晏
Webpack
Vue.js
- 864
-
萌萌哒草头将军
JavaScript
Vue.js
- 816
-
youth君
Vue.js
Element
- 3042
-
华山令狐冲
JavaScript
Vue.js
