vue demo
Sure! Here’s a simple Vue.js demo:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
changeMessage() {
this.message = 'New Message';
}
}
});
In this demo, we have a Vue instance that is bound to the #app element. The data property contains a message variable, which is initially set to "Hello Vue!". The changeMessage method is triggered when the button is clicked, and it updates the message variable to "New Message". The {{ message }} syntax is used to display the value of the message variable in the HTML.
When you open this HTML file in a browser, you should see “Hello Vue!” displayed on the page. Clicking the button will change the message to "New Message".
Certainly! Here’s an extended version of the Vue.js demo:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
},
methods: {
changeMessage() {
this.message = 'New Message';
}
}
});
In this extended version, we have added a list of items to the Vue instance’s data property. The v-for directive is used to iterate over the items array and display each item’s name in an <li> element. The :key attribute is used to provide a unique identifier for each item in the list.
When you open this HTML file in a browser, you should see “Hello Vue!” displayed on the page, along with a button and a list of items. Clicking the button will change the message to "New Message", and the list of items will be displayed.
