开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 28 天，点击查看活动详情
前言
今天写一个vue的单击事件，发现报错了
源代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎学习：{{name}}</h2>
<button v-on:click="showInfo">点我提示信息</button>
</div>
<!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->
<script type="text/javascript">
function showInfo(){
alert("你好！")
}
Vue.config.productionTip = false
const vm=new Vue({
el:'#root',
data:{
name:'vue'
}
})
</script>
</body>
</html>
报错信息如下
解决问题
分析问题发现，是由于我的单击回调函数写的不对，我是用的js方式写的这个函数，但是在vue中读取不到这个函数，所以才会报错！
需要使用vue的一个属性：methods 把回调函数写在里面，才能读取到函数，传统js写法是不行的！
我们修改代码，把函数放到methods里面，需要去掉function,只需要保留函数名称以及基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎学习：{{name}}</h2>
<button v-on:click="showInfo">点我提示信息</button>
</div>
<!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->
<script type="text/javascript">
function showInfo(){
alert("你好！")
}
Vue.config.productionTip = false
const vm=new Vue({
el:'#root',
data:{
name:'vue'
},
methods:{
showInfo(){
alert("你好！")
}
}
})
</script>
</body>
</html>
再次点击按钮测试，发现已经解决问题
总结
在编写vue代码时，我们需要遵循vue的写法，不能一位的使用js代码去实现vue的功能
其他回调函数也是一样的写法，都要写在vue的属性methods里面,让vue可以读取到这个回调函数
