Vue
Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members
Counter
<button @click="count++">Count is: {{ count }}</button>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Dynamic Input
<input v-model="name" class="bg-gray-100 px-2 py-1 rounded-lg" placeholder="Enter text"/>
<div v-if="name!=''" class="bg-red-100 px-2 py-1 border-2 border-red-500 rounded-lg mt-4 break-words">{{name}}</div>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>Sample Code
This uses Vue3 syntax.
html
<!DOCTYPE html>
<html lang='en'>
<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>Welcome</title>
<script src='https://cdn.tailwindcss.com'></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body id="app" class="p-8">
<h1>Welcome!</h1>
<p>My name is {{fullName}} {{lastName}}</p>
<p class="mt-3">Click the buttons below to increase the count to 9!</p>
<button class="mt-3 bg-blue-500 text-white p-2 rounded-lg" @click="state.count--">
Decrease Count
</button>
<button class="ml-3 mt-3 bg-blue-500 text-white p-2 rounded-lg" @click="state.count++">
Increase Count
</button>
<p class="mt-3">{{state.count}}</p>
<p v-show="showNext" class="mt-3">Great! Now type something in the box below and click Add it to your tasks</p>
<form @submit.prevent="items.push(task);resetFields()">
<input id="task" v-model="task" class="mt-3 py-2 px-4 bg-gray-100 rounded-lg"/>
<input value="Add" type="submit" class="ml-3 mt-3 bg-red-500 text-white p-2 rounded-lg"/>
</form>
<p class="mt-3">{{items}}</p>
<script>
const { createApp, ref, computed, reactive, watch } = Vue
createApp({
setup() {
const message = ref('Welcome!');
const firstName = ref("Tutorial");
const lastName = ref("Doctor");
const showNext = ref(false)
const task = ref();
const state = reactive({ count: 0 })
const items = ref([])
function resetFields(){
firstName.value = 'Tutorial'
lastName.value = 'Doctor'
task.value= ''
document.getElementById('task').focus();
}
watch(
() => state.count,(count) => {
showNext.value = count > 8
}
)
const fullName = computed({
get() {
return firstName.value + ' ' + lastName.value
},
set(newValue) {
[firstName.value, lastName.value] = newValue.split(' ')
}
})
return {
message,fullName, resetFields, state, items, showNext, task
}
}
}).mount('#app')
</script>
</body>
</html>