怎么写dom代码的过程

写的错的代码：

<!DocType>
<html>
    <div>
        <button :click = "ddd" type="text">display button</button>
        alert('hamimelon!')
    </div>
</html>

一步步修改的代码
第二次思考

<!DocType>
<html>
    <body>   //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
        <type= 'text/javascript'>
    <div>
        <button :click = "ddd" type="text">display button</button>
        alert('hamimelon!')
    </div>

    <script>
        <input 
    </script>
    </body>
</html>

第三次思考
还是差的远啊

<!DocType>
<html>
    <body>   //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
        <type= 'text/javascript'>
    <div>
        function display_alert() {
            alert('hamimelon!')
            //怎么调用alert函数？
        }
    </div>

    <script>
        <button :click = "desplay_alert" type="text">display button</button>
        
        
    </script>
    </body>
</html>

第四次思考

<!DocType>
<html>
    <head>   //漏了，为什么要写head？
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
        }
    </div>
    </script>
    </head>
    <body>   //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
 
         <input type="button" :click = "desplay_alert" >
             //input是什么标签，为什么在这里要用这个，不能直接用button？
             //click里头应该跟什么？desplay函数吗？
    
             //<input type="button" :click = "desplay_alert" >
             // <button :click = "desplay_alert" type="text">display button</button>

    </body>
</html>

第五次思考：vscode里的注释应该怎么加？

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
        }
    </div>
    </script>
    </head>
    <body>  
 
         <input type="button" :click = "desplay_alert" > 

    
             //<input type="button" :click = "desplay_alert" >
             // <button :click = "desplay_alert" type="text">display button</button>

    </body>
</html>

第六次思考

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
        }
    </div>
    </script>
    </head>
    <body>  
 
         <input type="button" :click = "desplay_alert()" value="显示消息框" > //忘记写小括号了，以为调用的是函数名字即可，没想到要调用函数
         //不知道要写value
         //value里面应该怎么填呢？除了点显示消息框外，还能不能填别的？

    
             

    </body>
</html>

第七次思考：没有起作用，弹窗没有弹，是不是click写得不对

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
//忘记写小括号了，以为调用的是函数名字即可，没想到要调用函数
         //不知道要写value
         //value里面应该怎么填呢？除了点显示消息框外，还能不能填别的？
        }
    </div>
    </script>
    </head>
    <body>  
 
         <input type="button" :click = "desplay_alert()" value="显示消息框" > 

    
             

    </body>
</html>

第八次思考：把：click改成onclick了还是不对

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
//忘记写小括号了，以为调用的是函数名字即可，没想到要调用函数
         //不知道要写value
         //value里面应该怎么填呢？除了点显示消息框外，还能不能填别的？
        }
    </div>
    </script>
    </head>
    <body>  
 
         <input type="button" onclick = "desplay_alert()" value="显示消息框" > 

    
             

    </body>
</html>

第九次思考：少写了一个/号加上了，还是不对

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
//忘记写小括号了，以为调用的是函数名字即可，没想到要调用函数
         //不知道要写value
         //value里面应该怎么填呢？除了点显示消息框外，还能不能填别的？
        }
    </div>
    </script>
    </head>
    <body>  
 
         <input type="button" onclick = "desplay_alert()" value="显示消息框" /> 

    
             

    </body>
</html>

第十次思考：是不是注释闹的？除此以外，没看出有什么不对的了

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> //<type= 'text/javascript'>我写的是这个
           <div>
            function display_alert() {  //这段倒是没有错，难得
                alert('hamimelon!')   //应该是双引号，单引号是不是也行？拿不准，还有缩进，糊了
                                      //怎么调用alert函数？--见以上
                                       //为什么要加body，不加行不行？
             //什么是js代码，什么是html代码？是不是dom就是js了？
             //刚才一堆乱码，是因为body里面多了script标签
             //应该怎样加注释，head和body后不能加注释吗？
             //input是什么标签，为什么在这里要用这个，不能直接用button？
//click里头应该跟什么？desplay函数吗？
//漏了，为什么要写head？
//忘记写小括号了，以为调用的是函数名字即可，没想到要调用函数
         //不知道要写value
         //value里面应该怎么填呢？除了点显示消息框外，还能不能填别的？
        }
    </div>
    </script>
    </head>
    <body>
        <input type="button" onclick = "desplay_alert()" value="显示消息框" />
    </body>
</html>

第十次思考：删掉注释，还是不行

<!DocType>
<html>
    <head>   
        <script type="text/javascript"> 
           <div>
            function display_alert() { 
                alert('hamimelon!')   
        }
    </div>
    </script>
    </head>
    <body>
        <input type="button" onclick = "desplay_alert()" value="显示消息框" />
    </body>
</html>

第十一次思考：删掉！doctype还是不行
第十二次思考，删掉div还是不行
第十三次思考，display_alert单词拼错了，跟前面定义的不一样，再试试。
还是不行？！！！

<html>
    <head>   
        <script type="text/javascript"> 
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
    </script>
    </head>
    <body>
        <input type="button" onclick = "display_alert()" value="显示消息框" />
    </body>
</html>

第十四次思考：好像display_alert()函数的右半边括号写成了半角

<html>
<head>   
<script type="text/javascript"> 
function display_alert() 
{ 
    alert('hamimelon!')   
            }
</script>
</head>
<body>
    <input type="button" onclick = "display_alert()" value="显示消息框" />
</body>
</html>

终于好了，好像也不是半角的事儿，到第十三步就好了，还是单词拼写错了
另外alert函数里单引号和双引号都可啊，下次要知道了。
我在看看没有value会发生什么，报什么错？

第十五次思考
没有value，dom也能实现，只是按钮里头没有文字了，也可以点开，出弹窗
用input而不用button的原因是需要value这个值吧。

第十六次思考：为什么：click不行呢
因为这是js，不是vue，如果是vue要引用

<html>
    <head>   
        <script type="text/javascript"> 
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
    </script>
    </head>
    <body>
        <input type="button" :click = "display_alert()" value="wo shi yige " />
    </body>
</html>

第十七次思考：引用vue的方法不对

<html>
    <head>   
        <script type="text/javascript"> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
    </script>
    </head>
    <body>
        <input type="button" :click = "display_alert()" value="wo shi yige " />
    </body>
</html>

这样也不对

<html>
    <head>   
        <script type="text/javascript"> </script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
   
    </head>
    <body>
        <input type="button" :click = "display_alert()" value="wo shi yige " />
    </body>
</html>

第十八次思考：调换了一下位置，不报错了，但是还是不弹窗

<html>
    <head>   
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript"> 
        
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
    </script>
    </head>
    <body>
        <input type="button" :click = "display_alert()" value="wo shi yige " />
    </body>
</html>

第十九次思考：
可能是：click的写法不对吗？
：改成@click了，也还是不对，不弹窗。

<html>
    <head>   
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript"> 
        
            function display_alert() 
            { 
                alert('hamimelon!')   
            }
    </script>
    </head>
    <body>
        <input type="button" @click = "display_alert()" value="wo shi yige " />
    </body>
</html>

是不是@click后 vue一定要跟

Vue.createApp({
  data() {
    return {
      counter: 0
    }
  }
}).mount('#basic-event')

这样的代码才可以？
想不清楚了

怎么写dom代码的过程

相关文章

vue3监听浏览器尺寸变化

事件处理，js会了点，vue好像又不会了，vue怎么好像搞得比js在事件处理上更复杂？

springcloud dashboard控制面板上的各项指标详解（图文并茂）

微信小程序合并两个对象

js如何与html进行转换，在浏览器中显示？js显示不了弹窗，我暂时，那就用html实现，加了插件，然后，右键，选用浏览器打开

Java代码中，如何监控Mysql的binlog？

微信小程序父组件调用子组件的方法

全链路追踪spring-cloud-sleuth-zipkin