这次“车祸现场”发生在学习Vue中事件绑定模块中关于方法绑定学习过程中,先来记录一下犯罪现场的代码以及后台截图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定操作</title>
</head>
<body>
<div id="app">
{{num}}
<button v-on:click="num++">自增</button>
<button @click="num++">简化自增写法</button>
<button @click="addNum">自增方法自增</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
num:100
},
method:{
addNum(){
this.num++
}
}
})
</script>
</body>
</html>
在进行测试的时候,显示截图如下:
根据上面页面显示情况可以看出:页面展示时没有问题的,点击前两个按钮测试也是可以通过的,但是第三个通过一个方法来实现自增的时候就出现了问题,打开测试的网页console控制台发现提示:Property or method “addNum” is not defined on the instance but referenced during render,提示:方法“addNum”不是在实例上定义的,而是在使用期间引用的。说明方法的定义有问题。
回去检查一下代码发现,里面的单词是固定写法methods不是method,害!白定义了半天,修改一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定操作</title>
</head>
<body>
<div id="app">
{{num}}
<button v-on:click="num++">自增</button>
<button @click="num++">简化自增写法</button>
<button @click="addNum">自增方法自增</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
num:100
},
methods:{
addNum(){
this.num++
}
}
})
</script>
</body>
</html>
这里面H-builder是比较人性化的,写对了都是会有小提示的,如果是初学者自己手打,打出来错误的是不会有提示的,除了自己定义的一些方法体里面的内容,这些常规的方法和属性都是会有提示,如果是导入的文件,导入成功也能看到提示,是比较方便检查的。