vue自学入门-9 @click后直接跟alert报错 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button @click="alert('a')">点击弹出</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>
</body>
</html>

上面这种写法是可以运行的，但是在脚手架项目中使用的话，会报

_vm.alert错误，只能将alert放到methods里定义的方法内

的关于alert问题，网上有个回答

VUE中直接在标签中写@click事件时，等号右边的函数会默认为是vm对象的一个方法，因此会在js中寻找_vm.alert方法，找不到会报以下错误Property or method "alert" is not defined on the instance but referenced during render，正确做法应为@focus = "doSomething"，在js方法中再定义doSomething的功能

估计是和vueloader有关系。

在函数式组件中，使用methods也不行，只能通过parent.xxxx()调用父组件中的方法。

posted @ 2020-04-14 13:23  zhaogaojian  阅读(3145)  评论(0)  编辑  收藏  举报