终于写出了vue2的事件点击alert弹窗,下一步写vue3的

news/2024/7/10 1:28:09 标签: vue, js

正确版本:

<!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/vue@2.5.16/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/vue@2.5.16/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
我记得之前好像照着写过,没有成功,还是有一点点进步的啊


http://www.niftyadmin.cn/n/957884.html

相关文章

JSR303数据校验Bean Validation

后端校验技术 JSR303技术&#xff0c;JSR-303 是JAVA EE 6 中的一项子规范&#xff0c;叫做Bean Validation&#xff0c;Hibernate Validator 是 Bean Validation 的参考实现 . Hibernate Validator 提供了 JSR 303 规范中所有内置 constraint 的实现&#xff0c;除此之外还有…

vue3的事件处理代码

第一次的思考 引用的一定要改&#xff0c;从2.5的vue改为3以上的 <!DOCTPYE html> <html><head><title>ruguog</title></head> <body><div id"app"><input type"button" value"hamimelon!"…

event.target.tagName怎么用?没搞清楚,还是混沌的

如果是div&#xff0c;而不是input&#xff0c;则会变成DIV <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style type"text/css">#main {width: 200px;height: 100px;background: pink;…

过滤器(Filter)和拦截器(Interceptor)的区别

来自&#xff1a;http://www.cnblogs.com/luoyun/archive/2013/01/04/2844274.html 过滤器(Filter)和拦截器(Interceptor)的区别 Filter介绍 Filter可以认为是Servlet的一种“加强版”&#xff0c;它主要用于对用户请求进行预处理&#xff0c;也可以对HttpServletResponse进行…

不知道这段为什么有bug

const Person2 {name: little bear,sayHello: () > {SetTimeout(() > {console.log(我叫’this.name我今年this.age岁)}, 1000);} }; Person2.sayHello();

@Validated和@Valid区别:Spring validation验证框架对入参实体进行嵌套验证必须在相应属性(字段)加上@Valid而不是@Validated

Spring validation 嵌套查询 Validated 用在方法上 Valid 用在被嵌套的属性上. Spring Validation验证框架对参数的验证机制提供了Validated&#xff08;Springs JSR-303规范&#xff0c;是标准JSR-303的一个变种&#xff09;&#xff0c;javax提供了Valid&#xff08;标准JSR…

组合代码,把div和vue代码拼起来在浏览器中显示

第一次思考&#xff1a; 是不是没有引用vue <html><head><title>问问</title></head><body><div id"event-with-method"><!-- greet 是在下面定义的方法名 --><button click"greet">Greet</but…

mysqldumpslow不是内部或外部命令,也不是可运行的程序,mysql慢查询日志工具

window系统&#xff0c;mysql版本&#xff1a;5.7.14。 使用mysqldumpslow命令分析日志时&#xff0c;报错&#xff1a;mysqldumpslow不是内部或外部命令&#xff0c;也不是可运行的程序。 查看目录下&#xff0c;没有mysqldumpslow.exe文件&#xff0c;有一个mysqldumpslow.…