1. Template: The template is the HTML code that contains the Vue specific markup. For example, the following code is a template that displays a simple message:
{{ message }}
2. Data: Data is the data that is used to populate the template. For example, the following code defines a data object that contains a message property:
data: {
message: ‘Hello World!’
}
3. Methods: Methods are functions that can be used to manipulate the data. For example, the following code defines a method that updates the message property:
methods: {
updateMessage() {
this.message = ‘Goodbye World!’
}
}
4. Computed Properties: Computed properties are functions that can be used to compute values based on the data. For example, the following code defines a computed property that returns a modified version of the message property:
computed: {
modifiedMessage() {
return this.message + ‘!’
}
}
5. Directives: Directives are special HTML attributes that tell Vue to do something. For example, the following code defines a directive that sets the background color of an element based on the value of the message property:
{{ message }}