Vue.js is a popular JavaScript framework for building user interfaces. Its core features include two-way data binding, component architecture, virtual DOM, and responsive systems. In this article, we will explore the syntax of Vue.js in depth to help readers better understand and apply Vue.js.
1. Template syntax
The template syntax of Vue.js uses a template language similar to HTML. Template syntax can easily render data, bind events and display components, etc. Here is an example of Vue.js template syntax:
<template>
<div>
<h1>{
{ message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
updateMessage() {
this.message = 'Updated Message';
}
}
}
</script>In the above example, we defined a Vue.js component. Components contain a template and a JavaScript script. { { message }} in the template means data binding, which renders the value of the message variable into the template. @click is an event binding directive that calls the updateMessage method when the button is clicked.
2. Instructions
Directives are an important concept in Vue.js. Directives can be used to bind data, render templates, control flow, bind events, manipulate DOM, etc. Here are some common Vue.js directives:
v-model: Realize two-way binding of data.
v-if: Render DOM elements based on conditions.
v-for: Render DOM elements in a loop.
v-show: Show or hide DOM elements based on conditions.
v-bind: dynamically bind HTML attributes.
v-on: bind event.
Here is an example using the v-for directive:
<template>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>In the above example, we used the v-for directive to loop through an unordered list of three list items. :key="item.id" is a key attribute that helps Vue.js better manage DOM elements.
3. Components
The componentized architecture of Vue.js is another of its core features. By breaking a complex application into components, code can be better managed and reused. Here is an example of a Vue.js component:
<template>
<div>
<my-heading :text="title"></my-heading>
<ul>
<my-list-item v-for="item in items" :key="item.id" :data="item"></my-list-item>
</ul>
</div>
</template>
<script>
import MyHeading from './MyHeading.vue'
import MyListItem from './MyListItem.vue'
export default {
components: {
'my-heading': MyHeading,
'my-list-item': MyListItem
},
data() {
return {
title: 'My List',
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>In the above example, we defined a parent component with two child components. The <my-heading> component displays a heading, and the <my-list-item> component renders three list items in a loop. Note that we need to use the import statement in the Vue.js component to import the child component.
4. Computed properties
Computed properties in Vue.js are a way to dynamically calculate data. Computed properties can be automatically updated based on the values of other properties, reducing the need for repetitive code. Here is an example of a Vue.js computed property:
<template>
<div>
<h1>{
{ fullName }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
</script>In the above example, we defined a computed property fullName. It dynamically calculates a full name based on the values of the firstName and lastName properties.
5. Life cycle hooks
Vue.js lifecycle hooks are a way to execute code during the component lifecycle. Lifecycle hooks can be used to initialize data, perform asynchronous operations, listen to events, clean up resources, and more. Here are some common lifecycle hooks of Vue.js:
beforeCreate: Called before the instance is created.
created: Called after the instance is created, but the DOM has not been mounted yet.
beforeMount: Called before the DOM is mounted.
mounted: Called after the DOM is mounted.
beforeUpdate: Called before the data is updated.
updated: Called after the data is updated.
beforeDestroy: Called before the instance is destroyed.
destroyed: Called after the instance is destroyed.
Here's an example of a Vue.js component using lifecycle hooks:
<template>
<div>
<h1>{
{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue.js!'
}
},
created()
{
console.log('Component created.')
},
mounted() {
console.log('Component mounted.')
},
beforeUpdate() {
console.log('Component about to update.')
},
updated() {
console.log('Component updated.')
},
beforeDestroy() {
console.log('Component about to be destroyed.')
},
destroyed() {
console.log('Component destroyed.')
}
}
</script>In the above example, we defined a simple Vue.js component and used common lifecycle hooks in the component. When components are created, mounted, updated and destroyed, the console will output corresponding log information.
6. Instructions
Directives in Vue.js are special properties for manipulating the DOM. Directives begin with `v-` followed by the name of the directive, such as `v-if`, `v-for`, and `v-bind`. The value of a directive can be a JavaScript expression that dynamically computes the behavior of the directive. Here are some commonly used Vue.js directives:
- `v-if`: Decide whether to render the element based on the value of the expression.
- `v-for`: Render multiple elements based on the value of the list.
- `v-bind`: Dynamically bind the value of one or more properties.
- `v-on`: bind one or more event handlers.
- `v-model`: Two-way binding to the value of a form element.
- `v-show`: Determine whether to display the element according to the value of the expression.
Here is an example of a Vue.js directive:
<template>
<div>
<h1 v-if="showTitle">{
{ title }}</h1>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
<input type="text" v-model="message">
<button v-on:click="submitForm">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My List',
showTitle: true,
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
message: ''
}
},
methods: {
submitForm() {
console.log('Form submitted.')
}
}
}
</script>In the above examples, we used some common directives of Vue.js. The v-if directive decides whether to render the title based on the value of the showTitle attribute. The v-for directive loops through the rendered list items based on the value of the items property. The v-model directive two-way binds the value of a form element. The v-on directive binds an event handler.
7. Summary
Vue.js is a popular front-end framework that can be used to build modern web applications. This article introduces some of the core concepts and syntax of Vue.js, including components, templates, data binding, computed properties, lifecycle hooks, and directives. By learning these contents, you can better understand how Vue.js works, and be able to develop Vue.js applications more efficiently.
In addition to the above, Vue.js has many other features and functions, such as plugins, mixins, transition effects, and more. If you want to learn Vue.js in depth, you can check the official documents or other related materials. These resources can help you better grasp the knowledge of Vue.js.
Finally, it needs to be reminded that the front-end technology is constantly developing, and new technologies emerge in endlessly. Therefore, we need to constantly learn and update our knowledge to keep pace with the times. Follow me and continue to share more high-quality articles!