button with i code example

Example: html button

<!-- Normal HTML with javascript -->


<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
  </head>
  <body>
    <button onclick = "myfunction()">OK</button>
    <script>
      	function myfunction() {
        	alert("This is a working button");
      	}
    </script>
  </body>
</html>


<!-- Normal HTML with jquery -->


<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
	<!--scripts \/-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <button id="buttonAlert">OK</button>
    <script>
      $("#buttonAlert").click(
      	function(){
  			alert("This is a working button");
      		}
    	); 
    </script>
  </body>
</html>


<!-- HTML with vue -->


<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
    <!--scripts \/-->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <!--You need a palce to mount the app/widget-->
    <!--Example 1 - there is no template-->
    <div id="app">

        <button v-on:click="activate">OK</button>
    </div>
    <!--mount to id APP-->

    <!--You need a palce to mount the app/widget-->
    <!--Example 2 - with template-->
    <div id="app_2">
    </div>
    <!--mount to id APP-->

    <script>
        const app_1 = {
            data() {
                msg_1 = "Example 1"
            },
            methods: {
                activate: function() {
                    alert(msg_1)
                }
            }
        }
        api_1 = Vue.createApp(app_1)
        api_entry_1 = api_1.mount("#app")
        console.log(api_entry_1)

        const app_2 = {
            data() {
                msg = "Example 2"
            },
            methods: {
                runb: function() {
                    alert(msg)
                }

            },
            template: `
                <button v-on:click="runb">Now</button>
            `
        }
        api_2 = Vue.createApp(app_2)
        api_entry_2 = api_2.mount("#app_2")
        console.log(api_entry_2)
    </script>
</body>
</html>

Tags:

Html Example