Correct version:
<!DOCTPYE html>
<html>
<head>
<title>ruguog</title>
</head>
<body>
<div id="app">
<input type="button" value="hamimelon!" @click="test"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
test:function(){
//vue的点击触发事件
alert("完成vue的点击事件")
}
}
})
</script>
</body>
</html>
Write a comment below:
<!DOCTPYE html>
<html>
<head>
<title>ruguog</title>
</head>
<body>
<div id="app">
<input type="button" value="hamimelon!" @click="test"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
test:function(){
//vue的点击触发事件
alert("完成vue的点击事件")
//head那段无所谓
//id=app这段必须要，与el那里呼应
//@click必须等于test，与方法那里的test呼应
//引用的这个版本不对还不行，这个是旧版的，之前引用了一个不行，改成这个，就行了；<script type="text/javascript" src="js/vue.js" ></script>这个不行
//这是vue2的语法，记一下，有空再改一个vue3的
//methods这些为什么要这么写，还是混沌的
//#app，el哪一行，其实还没明白真正的意思
}
}
})
</script>
</body>
</html>
Reference code:
https://jingyan.baidu.com/article/ca00d56c28e850e99eebcfe7.html
I remember it seems to have been written before, without success, there is still a little progress.