Javascript vueJS单击事件不工作_Javascript_Vue.js

Javascript vueJS单击事件不工作

javascript vue.js

Javascript vueJS单击事件不工作,javascript,vue.js,Javascript,Vue.js,我试图在Vue中创建一个静态HTML文件中的click事件作为测试，但它没有按预期工作。请参阅下面的完整代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <!--Empty IE conditional comment to improve s

我试图在Vue中创建一个静态HTML文件中的click事件作为测试，但它没有按预期工作。请参阅下面的完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE]><![endif]-->
<!--Empty IE conditional comment to improve site performance-->
<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<script type="text/babel">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>

</body>
</html>


var滴定过滤器=新Vue({
el:“#过滤器”，
方法：{
clickEvent:函数（）{
console.log（'Vue正在工作'）；
}
}
});

因此，作为清单：

我在方法对象中有我的函数

函数名是正确的

我包括图书馆

在我的script标签中，我将babel指定为type

它不起作用了，怎么了？

这个有效

<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>
<script type="text/javascript">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>
</body>
</html>


var滴定过滤器=新Vue({
el:“#过滤器”，
方法：{
clickEvent:函数（）{
console.log（'Vue正在工作'）；
}
}
});

将text/babel更改为text/javascript并将JS代码移到下面

好吧，首先，创建Vue的脚本在

#filter

存在之前执行。@Bert是否按照脚本标记的顺序执行？我将脚本标记移到了锚点下面，得到了相同的结果。控制台未记录。请将A用ID

filter

包装在一个div中，然后从锚定标记中删除筛选器ID vue不是吗？这让我相信，为什么使用text/babel会破坏它？babel是一个传输工具