VUE is a front-end framework that eliminates DOM operations in native JavaScript and simplifies writing. VUE is based on the MVVM (Model-View_ViewModel) idea to realize two-way data binding.
Vue's core library only focuses on layers. Responsive data binding and component development are its two major features.
Responsive data binding refers to automatically responding to changes in certain data in the page. (The v-model directive can implement two-way binding of data)
Component development refers to the use of components to split various modules in a single page application into individual components. We just need to write various component tags in the parent component first, and write the parameters to be passed into the component tags, and then write the implementation of various components, and the entire application can be completed.
1 First meet Vue
If you want Vue to work, you must create a Vue instance and pass in a configuration object
The code in the demo container still complies with the html specification, but some special Vue syntax is mixed in
The code in the demo container is called [Vue template]
Vue instances and containers are one-to-one.
There is only one Vue instance in real development and will be used with components
{{xxx}} is the syntax of Vue: an interpolation expression, {{xxx}} can read all properties in data
Once the data in data changes, the places where the data is used on the page will be automatically updated (responsive in Vue)
Initial sample code
<!-- Get a container ready -->
<div >
<h1>Hello，{{()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
= false //Block vue from generating production prompts at startup.
//Create a Vue instance new Vue({
el:'#demo', //el is used to specify which container the current Vue instance is to serve, and the value is usually a css selector string. data:{ //Data is used to store data, and the data is used for the container specified by el. We temporarily write the value into an object. name:'hello,world',
address:'Beijing'
}
});
</script>
2 Template Syntax
There are 2 major categories of Vue template syntax:
Interpolation syntax:
Function: used to parse the tag body content
Writing method: {{xxx}}, xxx is a js expression, and can directly read all attributes in data
Instruction syntax:
Function: used to parse tags (including: tag attributes, tag body content, binding events...)
For example: v-bind:href="xxx" or abbreviated as :href="xxx", xxx also needs to write a js expression, and can directly read all attributes in data
<div >
<h1>Interpolation syntax</h1>
<h3>Hello，{{name}}</h3>
<hr/>
<h1>Instruction syntax</h1>
<!-- Here is the displayVueDirective binding properties，The quotes are written injsexpression -->
<a :href="()" rel="external nofollow" x="hello">Click me to go{{}}study1</a>
<a :href="" rel="external nofollow" x="hello">Click me to go{{}}study2</a>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'Baidu',
url:'',
}
}
})
</script>
3 Data binding
There are 2 ways to bind data in Vue:
One-way binding (v-bind): Data can only flow from data to page
Two-way binding (v-model): Data can not only flow from data to page, but also from page to data
tips:
1. Bidirectional binding is generally applied to form class elements (such as input, select, etc.)
-model:value can be abbreviated as v-model, because v-model collects value by default
<div >
<!-- Ordinary writing One-way data binding -->
One-way data binding：<input type="text" v-bind:value="name"><br/>
Two-way data binding：<input type="text" v-model:value="name"><br/>
<!-- Abbreviation v-model:value 可以Abbreviation为 v-model，becausev-modelThe default collection isvaluevalue-->
One-way data binding：<input type="text" :value="name"><br/>
Two-way data binding：<input type="text" v-model="name"><br/>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'jack',
}
})
</script>
4 Event handling
Basic use of events:
- Use v-on:xxx or @xxx to bind events, where xxx is the event name
- The callback of the event needs to be configured in the methods object, and will eventually be on the vm
- The functions configured in methods are all functions managed by Vue. This points to vm or component instance objects
<!-- Get a container ready-->
<div >
<h2>Welcome{{name}}study</h2>
<!-- <button v-on:click="showInfo">Click me to prompt information</button> -->
<button @click="showInfo1">Click me to prompt information1（No transmission）</button>
<!-- The event itself is actively transmitted -->
<button @click="showInfo2($event,66)">Click me to prompt information2（Transfer the ginseng）</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'vue',
},
methods:{
// If the vue template does not write event, the event will be automatically passed to the function showInfo1(event){
// ()
// (this) // This here is vm alert('Hello classmate! ')
},
showInfo2(event,number){
(event,number)
// ()
// (this) // This here is vm alert('Hello classmate! ! ')
}
}
});
</script>
Event modifiers in Vue
- prevent: Block default events (commonly used)
- stop: prevent events from bubbled (commonly used)
- once: Events are triggered only once (commonly used)
<!-- Get a container ready-->
<div >
<h2>Welcome{{name}}study</h2>
<!-- Block default events（Commonly used） -->
<a href="" rel="external nofollow" @="showInfo">Click me to prompt information</a>
<!-- Stop events from bubbles（Commonly used） -->
<div class="demo1" @click="showInfo">
<button @="showInfo">Click me to prompt information</button>
<!-- Modifiers can be written continuously -->
<!-- <a href="" rel="external nofollow" @="showInfo">Click me to prompt information</a> -->
</div>
<!-- Events are triggered only once（Commonly used） -->
<button @="showInfo">Click me to prompt information</button>
</div>
5 Keyboard Events
Keyboard Event Syntax Sugar: @keydown, @keyup
Commonly used key alias in Vue:
- Enter => enter
- Delete => delete
- Exit => esc
- Space => space
- Line break => tab (Special, must be used with keydown)
<!-- Get a container ready-->
<div >
<h2>Welcome{{name}}study</h2>
<input type="text" placeholder="Press Enter prompt to enter" @="showInfo">
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Zhejiang University of Science and Technology'
},
methods: {
showInfo(e){
// (,)
()
}
},
})
</script>
6 Conditional Rendering
v-if
Writing method:
(1).v-if="expression"
(2).v-else-if="expression"
(3).v-else="expression"
Suitable for: Scenarios with low switching frequency
Features: DOM elements not displayed are removed directly
Note: v-if can be used with:v-else-if and v-else, but the structure is required to not be "breaked"
<!-- Get a container ready-->
<div >
<!-- usev-ifDo conditional rendering -->
<h2 v-if="false">Welcome{{name}}</h2>
<h2 v-if="1 === 1">Welcome{{name}}</h2>
<!-- v-elseandv-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>Ha ha</div>
<!-- v-ifandtemplate的配合use -->
<!-- There is no need to write multiple judgments，Just write one -->
<!-- 这里的思想就像事件代理的use -->
<template v-if="n === 1">
<h2>Hello</h2>
<h2>Silicon Valley</h2>
<h2>Beijing</h2>
</template>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
}
})
</script>
v-show
Writing: v-show="expression"
Suitable for: Scenarios with high switching frequency
Features: The DOM element that is not displayed has not been removed, it is just hidden using the style (display:none)
Note: When using v-if, elements may not be able to be obtained, but when using v-show, you can definitely be obtained.
v-if is to actually change the dom element, v-show is to hide or display the dom element
<!-- Get a container ready-->
<div >
<!-- usev-showDo conditional rendering -->
<h2 v-show="false">Welcome{{name}}</h2>
<h2 v-show="1 === 1">Welcome{{name}}</h2>
</div>
7 List Rendering
v-for directive
- Used to display list data
- Syntax: v-for="(item, index) in xxx" :key="yyy"
- It can be traversed: arrays, objects, strings (used very rarely), specified times (used very little)
<div >
<!-- Iterate through the array -->
<h2>Personnel List（Iterate through the array）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{}}-{{}}
</li>
</ul>
<!-- Traversal objects -->
<h2>Car information（Traversal objects）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- Iterate over strings -->
<h2>测试Iterate over strings（Use less）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- traversal number of times -->
<h2>测试traversal number of times（Use less）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'#root',
data: {
persons: [
{ id: '001', name: 'Zhang San', age: 18 },
{ id: '002', name: 'Li Si', age: 19 },
{ id: '003', name: 'Wang Wu', age: 20 }
],
car: {
name: 'Audi A8',
price: '700,000',
color: 'black'
},
str: 'hello'
}
})
</script>
8 Life cycle
Vue instances have a complete life cycle, that is, a series of processes such as new Vue(), initialization events (.once events) and life cycle, compiling templates, mount Dom -> rendering, updating -> rendering, uninstalling, etc., which is called Vue's life cycle.
beforeCreate: Data monitoring (getter and setter) and initialization events have not started yet. At this time, data's responsive tracking and event/watcher have not been set yet, which means that methods and data on data, computed, watch, and methods cannot be accessed.
created (after creation): The instance is created, and the options configured on the instance include data, computed, watch, methods, etc., are all configured, but the rendering node has not been mounted to the DOM at this time, so the $el attribute cannot be accessed.
beforeMount: Called before the mount starts, and the relevant render function is called for the first time. In this stage, Vue begins to parse the template, generate a virtual DOM and store it in memory. It has not yet converted the virtual DOM to a real DOM and inserted it into the page. Therefore, the web page cannot display parsed content.
mounted (after mount): Called after el is replaced by the newly created vm.$el (which is a copy of the real DOM), and mounted to the instance (convert the virtual DOM in memory to the real DOM, and insert the real DOM into the page). At this time, the page is presented with a DOM compiled by Vue. At this time, the operation of the DOM in this hook function can be effective, but try to avoid it. Generally, it is carried out at this stage: Turn on the timer, sending network requests, subscribing to messages, binding to custom events, etc.
beforeUpdate: Called when responsive data is updated. Although the responsive data is updated at this time, the corresponding real DOM has not been rendered yet (the data is new, but the page is old, and the page and data are not kept in sync).
updated: Called after virtual DOM rerendering and patching due to data changes. At this time, the DOM has been updated according to the changes in the responsive data. When called, the component DOM has been updated, so DOM-dependent operations can be performed. However, in most cases, changing the state during this period should be avoided, as this may result in an infinite loop of updates. This hook is not called during server-side rendering.
beforeDestroy: Called before the instance is destroyed. In this step, the instance is still fully available, and this can still get the instance. In this stage, the timer is generally closed, unsubscribe to messages, and unbind custom events.
destroyed: After the instance is destroyed, call it. After the call, everything indicated by the Vue instance will be unbinded, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server rendering.
9 Summary
This is the end of this article about the basic knowledge tutorial on Vue Quick Start. For more related contents of Vue Quick Start tutorials, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!