1. Basic composition of Vue objects
The basic composition of Vue objects can be explained by a simple Vue instance. Here is a code example for a basic Vue instance and an explanation of its basic composition:
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
= ('').reverse().join('')
}
},
computed: {
reversedMessage: function () {
return ('').reverse().join('')
}
},
watch: {
message: function (newVal, oldVal) {
('Message changed from', oldVal, 'to', newVal)
}
}
})
In this example, vm is a Vue object, which is created with new Vue(). This Vue object contains the basic composition of the Vue application:
el: This is an existing DOM element in a page that is used to mount a Vue instance. In this example, it mounts to the first element of the match selector #app.
data: This is a function that returns an object that contains the data we want to synchronize with our view. In this example, we have a data attribute called message.
methods: This is an object that contains methods that we can use in the view. In this example, we have a reverseMessage method that inverts the value of the message property.
computed: This is an object that contains computed properties. Computed properties are cached based on their dependencies. In this example, reversedMessage is a computed property that returns the inverted string of the message property.
watch:This is an object that contains the data properties of the Vue instance we need to observe. When the observed data properties change, we can execute some custom logic. In this example, we observe the message property and print a message when it changes.
In this case, mounting of a Vue object usually refers to associating a Vue instance with a DOM element on the page so that the Vue instance can control and manage the DOM element and its children. The mounting of Vue objects can be implemented in several different ways. The following is a code example to explain these methods.
2. Several ways to mount Vue object
1. Use the el option to automatically mount it
When creating a Vue instance, you can specify the existing DOM element in a page through the el option to mount the Vue instance. This is the most common way to mount it.
javascript
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
In this example, the Vue instance will be mounted on the first element of the matching selector #app.
2. Use the $mount method to mount manually
If the Vue instance does not specify the el option when it is created, it can be manually mounted by calling the $mount method on the instance.
javascript
var vm = new Vue({
data: {
message: 'Hello Vue!'
}
})
// Manually mount to #app elementsvm.$mount('#app')In this example, the Vue instance does not specify the el option when it is created, but instead manually mounts elements on the page by calling the $mount method and passing in the selector string '#app'.
3. Use the template option and replace attribute
When creating a Vue instance, you can provide a string template to replace the mounted element by providing a string template. If you want to replace the mounted element with a template, you can set the replace attribute to true.
javascript
var vm = new Vue({
el: '#app',
replace: true,
template: '<p>{{ message }}</p>',
data: {
message: 'Hello Vue!'
}
})
In this example, the Vue instance will be mounted on the #app element and replace the element with the provided template.
4. Use the render function
Vue instances also provide a render option that allows you to declaratively generate DOM using JavaScript code. This method is more flexible and powerful than using template strings.
javascript
var vm = new Vue({
el: '#app',
render: function (createElement) {
return createElement('p', )
},
data: {
message: 'Hello Vue!'
}
})
In this example, the Vue instance uses the render function to generate the DOM. createElement is a function used to create a virtual DOM node. It takes a label name and child node as parameters and returns a virtual DOM node.
This is the introduction to this article about the composition and mounting methods of Vue objects. For more related Vue objects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!