Home > Article > Web Front-end > How to introduce Vue into a web page
How to introduce Vue into a web page
- PHPzOriginal
- 2023-04-13 11:36:271312browse
Vue is a popular JavaScript framework widely used for building interactive single-page applications (SPAs). In this article, we will introduce how to write Vue in web pages.
The most basic usage of Vue is to introduce Vue.js on the page and then create an instance of Vue. This instance will contain some data properties, used to store data, and a methods object, containing some methods to control this data.
The following is an example of a simple Vue instance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
In the above example, we created a Vue instance and bound it to a div with the id "app" . Then a message data attribute (default value is 'Hello Vue!') and a reverseMessage method are defined. In HTML, we use double curly brace interpolation to display the message on the page and bind the reverseMessage method using the v-on:click directive on the button tag.
In addition to data binding and event processing, Vue also provides instructions, calculated properties, components and other functions. These features make it easier to use Vue in web pages.
The following is an example of displaying a list of images, using the v-for directive and computed properties:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="image in images">
<img :src="image.url" :alt="image.title">
<p>{{ image.title }}</p>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
images: [
{ title: 'Image 1', url: 'https://via.placeholder.com/150' },
{ title: 'Image 2', url: 'https://via.placeholder.com/150' },
{ title: 'Image 3', url: 'https://via.placeholder.com/150' }
]
},
computed: {
reverseImages: function () {
return this.images.slice().reverse()
}
}
})
</script>
</body>
</html>
In the above example, we use the v-for directive to display a list of images , and used computed properties to reverse the image list. Note that in HTML, we use the v-bind abbreviation :src and :alt to bind the src and alt attributes of the image.
To summarize, Vue is a powerful framework that can be used to build interactive single-page applications. By introducing Vue.js into the web page and creating a Vue instance, we can easily use Vue's data binding, event processing, instructions, calculated properties and other functions. This makes writing Vue in web pages simpler and easier to understand.
The above is the detailed content of How to introduce Vue into a web page. For more information, please follow other related articles on the PHP Chinese website!