Vue basic content
1. Vue instance
Vue instance: A Vue instance created through new Vue(), which associates a DOM element and provides context for data and components.
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
What is DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and defines a way to access the structure from a program to change the document's structure, style, and content. The DOM parses a document into a structured collection of nodes and objects (objects that contain properties and methods). Simply put, it connects web pages to scripts or programming languages.
2. Template syntax
Template syntax: In Vue, we use templates to declaratively render data into DOM. Commonly used ones include {
{}}interpolation, v-bind, v-if, v-foretc.
<div id="app">
{
{ message }}
<span v-bind:title="message">鼠标悬停显示</span>
<span v-if="seen">现在你看到我了</span>
<ol>
<li v-for="todo in todos">{
{ todo.text }}</li>
</ol>
</div>
3. Calculated properties
Computed properties: Computed properties are used to derive new values from the state of the current component. Data can be responsive through getters and setters. Its advantage is efficient caching , and the previous calculation results will be returned immediately when the data does not change.
var vm = new Vue({
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
4. Monitor
Listener: Through watchoptions, we can observe the specified data source. Once the data changes, the function defined in the listener will be executed. It has a wider range of uses than computed. It can not only transform data, but also trigger asynchronous operations .
watch: {
message: function (newVal, oldVal) {
// 这个函数将在 `message` 改变后调用
}
}
5. Components
Components: Components are one of the most powerful features of Vue. Components can extend HTML elements and encapsulate reusable code. We create global components through Vue.component(), and Vue.component() creates local components.
// 全局组件定义
Vue.component('my-component', {
template: '<div>{
{ msg }}</div>',
data: function () {
return {
msg: 'Hello World!'
}
}
})
// 局部组件定义
var Child = {
template: '<div>{
{ msg }}</div>',
data: function () {
return {
msg: 'Hello World!'
}
}
}
new Vue({
// ...
components: {
'my-component': Child
}
})
6. Two-way data binding
Two-way data binding: Vue implements two-way binding between data and views. When we change the data in js, the view will automatically update, and vice versa. This is one of the highlights of Vue compared to other MVVM frameworks.
In Vue, two-way data binding is achieved through data hijacking combined with the publisher-subscriber model.
Here's a simple example:
<div id="app">
<input v-model="message">
<p>{
{message}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello!'
}
})
Code description
- We use the v-model directive on the input element, which associates input with data.message.
- Whatever the user inputs, the value of data.message becomes whatever it is.
- Then, rendered
The new value will also be updated and displayed since it is bound to the same data.message property.
- If the code in the Vue instance later changes data.message, the value displayed by the input element will also change.
- When we modify the data in the Vue instance, the DOM is updated. This is the data impact view.
When we modify the DOM (such as input), the data will also be updated. This is the view affecting the data.
7. Life cycle hooks
Life cycle hook: Each Vue instance must go through a series of initialization processes when it is created - for example, it needs to set up data monitoring, compile templates, mount the instance to the DOM, render data, etc. During this process, Vue will run some functions called life cycle hooks, allowing developers to add their own code.
8. Slots (to be added)
Slots: Distributing content through Slot, we can pass content to child components through slots in the parent component. Child components can set default content, or they can set named slots to distribute the content of the parent component to specified locations.
<navigation-link url="/profile">
<!-- Add slot content here -->
<span class="profile">Your Profile</span>
</navigation-link>
<script>
Vue.component('navigation-link', {
props: ['url'],
template: `
<a :href="url" class="nav-link">
<slot></slot>
</a>
`
})
</script>
There are some typical use cases for slots:
- Base Layout
- Slot replacement
- Partial content (Scoped slots)
to be added
Note: This article only provides some simple examples and will be expanded upon in detail later.
If there are any mistakes, please let me know!
When reprinting or quoting the content of this article, please indicate the source and original author: Juzu Qingzhong;