正确版本:
<!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>
下面写一下注释:
<!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>
参考代码:
https://jingyan.baidu.com/article/ca00d56c28e850e99eebcfe7.html
我记得之前好像照着写过,没有成功,还是有一点点进步的啊