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>