start .
me .
HTML Document File : vue.html
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Vue and Vanilla comparisons</title>
<script src="https://unpkg.com/vue@3"></script>
<div id="app">
<button @click="incremented++">increment {{incremented}} (VueJS)</button>
<button onclick="this.children[0].innerText++">increment <span>0</span> (vanilla JS)</button>
</div>
<script>
const app = Vue.createApp({
data(){return{
incremented: 0,
}},
})
app.config.devtools = true
const mountedApp = app.mount('#app')
</script>
<hr>
<h3>custom tags (vanilla JS)</h3>
<a user="1"></a> talks to <a user="0"></a> <br>
<a user="2"></a> quits. <br>
<script>
var users=document.querySelectorAll('a[user]')
var user_data={
0:['Dario Cangialosi','dario.cangialosi'],
1:['Firstname Lastname','profile.address'],
2:['Mario Rossi','mario.rossi.work'],
}
for(var iuser of users){
var uid=iuser.getAttribute('user')
iuser.text=user_data[uid][0]
iuser.href='/u/'+user_data[uid][1]
}
</script>
<hr>
<div id="app2">
<h3>custom tags (VueJS)</h3>
<user ucode="1"></user> talks to <user ucode="0"></user> <br>
<user ucode="2"></user> quits. <br>
</div>
<script>
const app2 = Vue.createApp({})
app2.config.devtools = true
let data = {
"0":['Dario Cangialosi','dario.cangialosi'],
"1":['Firstname Lastname','profile.address'],
"2":['Mario Rossi','mario.rossi.work'],
}
app2.component('user', {
props:{
ucode: String,
},
template:/*html*/`<a :href="'/u/'+address">{{name}}</a>`,
methods:{
user(){ return data[this.ucode] },
},
computed:{
name(){ return this.user()[0] },
address(){ return this.user()[1] },
},
})
const mountedApp2 = app2.mount('#app2')
</script>
<hr>
<pre contenteditable id=code></pre>
<script>fetch("").then(res=>res.text()).then(res=>code.innerText=res)</script>