The background of this cover image was published by Sara Torda on Pixabay, and I created the cover using Vue icons.
This article contains some thoughts and reflections I had while studying the relevant content from the Vue3 Tutorial | Runoob. All example codes in the text are sourced from Runoob.
Vue sounds similar to "view," and its syntax is very close to the Jinja2 template language in Flask. Vue determines the position through the element's id, creates applications using the createApp function, and mounts the application to the corresponding id element using the mount function.
Hello, Vue!!#
For example, the following code uses mount(#app) to mount HelloVueApp to the div element with id app, and the final result is displaying "Hello Vue!!" on the page.
<div id="app" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
Here, {{ }} is used to output object properties and function return values, and {{ message }} returns the message value in the application.
Hello Vue
Data Organization and Methods in Vue#
Data Option#
Data itself is a function and an essential part of the createApp function, returning an object. This object is wrapped by Vue through the reactive system and stored in the instance as $data, where the data can be edited using methods similar to document.write, as shown below:
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count) // => 4
document.write("<br>")
// Modifying vm.count will also update $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// The reverse is also true
vm.$data.count = 6
document.write(vm.count) // => 6
The result is shown in the image below:
Data can be changed
Methods#
In Vue, methods are added through the methods option, as shown below:
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` points to the component instance
this.count++
}
}
})
const vm = app.mount('#app')
document.write(vm.count) // => 4
document.write("<br>")
vm.increment()
document.write(vm.count) // => 5
It feels very close to object-oriented languages like Java and is easy to get started with, as shown in the result below:
Using methods
Template#
Text Interpolation#
As mentioned earlier, Vue is very similar to Jinja2, and this is vividly reflected in templates. For example, in the following code:
<div id="app">
<p>{{ message }}</p>
</div>
In {{ message }}, the message part will be converted to the specific value of this variable. When the value of the message variable changes in real-time, the information on the front-end interface will also change in real-time. For example, here is a script code where the variable value changes after 10 seconds and reflects on the front end:
<script>
const HelloVueApp = Vue.createApp({
data() {
return {
message: 'Hello Vue!!'
}
}
})
const vm = HelloVueApp.mount('#hello-vue')
setTimeout("vm.message='lalala~'",10000)
</script>
Initially, the page displays Hello Vue!!, and after 10 seconds, as the value of the message changes, the displayed content changes to lalala~, just like this gif:
Variable value changes, front-end display changes
This is a form of one-way binding between data and the interface, where the display of interface elements changes with the variable value. Another point to note is that if you do not want the front-end element's content to change, you need to use the v-once tag, such as <span v-once>{{ message }}</span>.
Expressions#
In {{ }}, JavaScript expressions can also be parsed, as shown in the following code:
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">Runoob Tutorial</div>
</div>
<script>
const app = {
data() {
return {
ok: true,
message: 'RUNOOB!!',
id: 1
}
}
}
Vue.createApp(app).mount('#app')
</script>
The displayed result is as follows:
Processing of expressions
Directives#
Directives usually have a v- prefix, and the v-once mentioned earlier is one such directive. They are often used to reflect certain behaviors in the front-end interface when the value of a variable or expression changes. There are many types of directives, each achieving different functionalities, such as the following:
- Display Text (v-text)
Using the v-text tag in elements like <p> can display text corresponding to the variable value in data, as shown in the following example:
<div id='app'>
<p v-text="count"></p>
</div>
<script>
const app = Vue.createApp({
data() {
return { count: 4 }
},
})
const vm = app.mount('#app')
</script>
The displayed result is:
v-text directive
- HTML Interpolation (v-html)
Using the v-html tag can also interpret and display HTML code. The following example shows the difference in display results when using text interpolation versus using HTML output for the same line of code:
<div id="example1" class="demo">
<p>Using double curly braces for text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">This will display in red!</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
The displayed result is:
v-html directive
- Changing HTML Element Attribute Values (v-bind)
For changing the values of attributes within HTML elements, Vue provides the v-bind tag to handle changes in attribute values. For example, the following code specifies class or id, where use is true, then class1 is used; otherwise, it is not used. To avoid involving other directives, I still use a delay to complete this.
<style>
.class1{
background: #66CCFF;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{'class1': use}">
v-bind:class directive
</div>
</div>
<script>
const app = {
data() {
return {
use: false
}
}
}
const vm = Vue.createApp(app).mount('#app')
setTimeout("vm.use=true",10000)
</script>
</body>
</html>
The actual effect:
v-bind directive
You can see that after 10 seconds, the background color of the div changes because the value of use becomes true, making the class value become class1, thus applying the styles corresponding to class1.
- Deciding Whether to Insert Elements (v-if)
For example, in the following example:
<div id="app">
<p v-if="seen">Now you see me</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* Change to false, and the message will not display */
}
}
}
Vue.createApp(app).mount('#app')
</script>
In this example, the v-if directive will determine whether the element will be displayed based on the value of seen.
- Listening to DOM Events (v-on)
Used in conjunction with methods to handle front-end events, as shown in the following code:
<div id='app'>
<button v-on:click="welcome">Welcome</button>
</div>
<script>
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
welcome() {
alert("Hello")
}
}
})
const vm = app.mount('#app')
</script>
The actual effect:
v-on directive
If no parameters are passed, the parentheses can be omitted.
- Two-Way Data Binding (v-model)
This directive is used to collect user input or selection for form controls (input, textarea, select, etc.), as shown in the following code:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
const app = {
data() {
return {
message: 'Runoob!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
The significance of two-way binding is that user input on the page will modify data in real-time, and data in the data object will also be displayed in real-time on the user interface.
The actual effect:
Processing of expressions
- Shortened Syntax for Two Directives
v-bind:
<!-- Complete syntax -->
<a v-bind:href="url"></a>
<!-- Shortened -->
<a :href="url"></a>
v-on:
<!-- Complete syntax -->
<a v-on:click="doSomething"></a>
<!-- Shortened -->
<a @click="doSomething"></a>