1. Basic introduction to Vue
- Vue is a [progressive] JavaScript framework for building a user interface (UI)
- Vue.js is a framework for building a user interface that focuses solely on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. (Vue has a supporting third-party library that can be integrated to develop large projects)
- Main jobs at the front end? Mainly responsible for the V layer in MVC; The main job is to work with the interface to make front-end page effects.
1.2. Why learn the Vue framework
- In order to improve the efficiency of development, enterprises: in the enterprise, time is efficiency, efficiency is money;
- In the enterprise, using the framework can improve the efficiency of development;
- How to Improve Development Efficiency: Native JS -> Class libraries like Jquery - > Front End Template Engine-> Angularjs 1 Vue,js (Can help us reduce unnecessary DOM operations; improve rendering efficiency; the concept of two-way data binding [through instructions provided by the framework, our front-end programmers only need to care about the business logic of the data, not how the DOM is rendered] )
- In Vue, one of the core concepts is that users will no longer operate on DOM elements. Releases the user's hands, allowing programmers more time to focus on business logic;
1.3. MVVM mode
M:model (data layer, that is, exponential data (front end is js))
V:view (that is, DOM layer or user interface)
VM: View-model
2Vue Basic Use
2.1 Common Instructions
2.2 Interpolation expression
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- Define boundaries -->
<div id="d1">
<h4>{{msg}}</h4>
</div>
</body>
<script type="text/javascript">
/* Binding Boundary */
new Vue({
/* The first ES6 representation */
el:'#d1',
data() {
return {msg:'Vue Basic Use'}
}
/* Second */
// data:{
// Msg:'Vue Basic Use',
// },
// Third
// data :function(){
// Return {msg:'Vue Basic Use'}
// }
})
</script>
</html>
2.3 Data Binding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- Define boundaries -->
<div id="d1">
<h4>{{msg}}</h4>
<input type="text" v-model="msg" />
<h4>{{msg}}</h4>
<h4>{{msg}}</h4>
</div>
</body>
<script type="text/javascript">
/* Binding Boundary */
new Vue({
/* The first ES6 representation */
el:'#d1',
data() {
return {msg:'Vue Basic Use'}
}
})
</script>
</html>
Synchronize the contents of the input box with the labels, and the labels of other bindings change when the input box is modified
2.4 Events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- Define boundaries -->
<div id="d1">
<h4>{{msg}}</h4>
<input type="text" v-model="msg" />
<h4>{{msg}}</h4>
<h4>{{msg}}</h4>
<button type="button" v-on:click="getmsg">Submit</button>
</div>
</body>
<script type="text/javascript">
/* Binding Boundary */
new Vue({
/* The first ES6 representation */
el:'#d1',
data() {
return {msg:'Vue Basic Use'}
},
methods:{
getmsg(){
alert(this.msg)
}
}
})
</script>
</html>
3.Vue life cycle
First, each Vue instance has a complete life cycle, that is, a series of processes from creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, destroying, etc., which we call the life cycle of Vue. Generally speaking, the process from creation to destruction of a Vue instance is the life cycle.
- new Vue() instantiates a vue instance, and init initializes event and lifecycle. In this process, three initialization functions (initLifecycle(), initEvents(), initRender()) are called to initialize the life cycle, events, and createElement functions, respectively. When initializing the life cycle, some properties are defined. For example, the current status life cycle state is _ isMounted,_ isDestroyed,_ isBeingDestroyed, which represents the state of a component in keep-alive inactive, and when an event is initialized, there are actually several functions defined: $once, $off, $emit, $on. The createElement function is defined when render is initialized (the initRender function is called)
- Execute beforeCreate life cycle function
- After beforeCreate completes, data initialization begins, which defines data data, methods, and events, completes data hijacking observes, and configures watcher observer instances for component instances. This way, subsequent changes in the data can be perceived and rendered on the page.
- Execute the created lifecycle function, so when this function executes, we're ready to get the data under data and the methods under methods, so here we can start calling the methods to make data requests
- After the created execution, we can see that there is a judgment to determine whether there is an EL parameter at present (why do we need to decide here because we will rely on this El later, which will be detailed later). If so, let's see if there is a template parameter. If there is no el, we will wait for the $mount(el) method to be called (more on that later).
- Make sure you have an el, move on, and decide if you have a template parameter, we'll choose to convert the template to a render function (there's a previous judgment as to whether there's a render function, if there's one, to render the current render function directly, and if not, to start looking for a template). Without a template, we would compile the resulting El (that is, our common #app, #app might have other tags) directly into a templae and convert the template into a render function.
- Then beforMount is called, that is, actually between creted and beforeMount, the main work is to convert the template or el to the render function. And we can see that whether you use el, template or the.vue file that we use most often (if it is a.vue file, it actually compiles into a template first), it will eventually be converted into a render function.
- After beforeMount calls, are we going to start rendering render functions? First, we will generate a virtual DOM (for comparing old and new virtual DOMS when subsequent data changes), save it, and then start rendering render as a real dom. Rendering to a real DOM replaces the rendered real DOM with the original vm.$el (which we may not understand at this point, please be patient to look down, and I'll give you an example later), and then puts the replaced $el append on our page. The whole preliminary process is finished
- Mounted is then called and an attribute of the life cycle is identified_ isMounted set to true. So inside the mounted function, we can manipulate the dom, because by this time the DOM has been rendered.
- Then, only when our state data changes, we trigger beforeUpdate to start rendering our changed data onto the page (In fact, there is a judgment here as to whether the current _isMounted is a ture and _isDestroyed is false, that is, if the dom is mounted and the current component is not destroyed, the update process will be followed.)
- After the beforeUpdate call, we will regenerate a new virtual dom(Vnode), and then do a diff calculation with the latest Vnode and the original Vnode, which involves a series of calculations to calculate the minimum update range, so as to update the latest data in the render function, and render the updated render function as a real dom. And we've finished updating our data
- Then update is executed, so DOM can also be manipulated inside updated and get the updated dom. But let me put a word in here, execution of mouted and updated doesn't wait for all the subcomponents to be mounted, so if you want to do something after all the views have been updated, then you'd better add a $nextTick () to mouted or updated and put the things you want to do in $netTick() (As for why, let's talk about $nextTick later)
- Then beforeDestroy does nothing, before the instance is destroyed, that is, within this function, you can still manipulate the instance's
- A series of destructive actions are then taken to remove references to various data, remove event monitoring, delete component_watcher, delete child instances, delete self-self, and so on. The instance property _isDestroyed is also set to true.
Argument Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="d1">
<div>number:{{number}}</div>
<div>{{detail()}}</div>
<input type="text" v-model="number" />
</div>
<script>
var data = {
number:999,
msg:null
};
var vm = new Vue({
el:'#d1',
data:data,
methods:{
detail:function(){
return "Interpolate using methods:"+this.msg;
}
},
beforeCreate:function(){
console.log('beforeCreate:just new Vue()After that, at this time, the data has not been mounted, it is just an empty shell')
console.log(this.msg)//undefined
console.log(document.getElementsByClassName("myp")[0])//undefined
},
created:function(){
console.log('created:The data is already available or can be changed at this time,Changing data here will not trigger updated function')
this.msg+='!!!'
console.log('Here you can change the data a second time to the last before rendering, without triggering other hook functions, where you can generally get the initial data')
console.log('Next, start looking for a template for an instance or component, and compile the template as virtual dom Place in render Preparing rendering in functions')
},
beforeMount:function(){
console.log('beforeMount: fictitious dom Created, rendering is imminent,Here you can also change the data without triggering updated')
this.msg+='@@@'
console.log('This is where you can last change the data before rendering without triggering other hook functions, where you can generally get the initial data')
console.log(document.getElementsByClassName("myp")[0])//undefined
console.log('Next Start render，Render Reality dom')
},
// render:function(createElement){
// console.log('render')
// return createElement('div','hahaha')
// },
mounted:function(){
console.log('mounted: At this point, the component is already on the page, data, real dom All handled,Events are all mounted')
console.log(document.getElementsByClassName("myp")[0])
console.log('You can manipulate reality here dom Wait for something...')
// this.$options.timer = setInterval(function () {
// console.log('setInterval')
// this.msg+='!'
// }.bind(this),500)
},
beforeUpdate:function(){
//You can't change the data here, or you'll end up in an infinite loop
console.log('beforeUpdate:Triggered before re-rendering')
console.log('Then? vue Virtual of dom Mechanisms rebuild virtualization dom With the last virtual dom Tree Utilization diff Rendering after algorithm comparison')
},
updated:function(){
//You can't change the data here, or you'll end up in an infinite loop
console.log('updated:The data has been changed. dom Again render complete')
},
beforeDestroy:function(){
console.log('beforeDestory:Execute before destruction ( $destroy Method is executed when called),Usually in the aftermath here:Clear timer, clear non-instruction bound events, etc....')
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log('destroyed:Component data binding, listening...All gone,Only left dom An empty shell, which can also be treated here')
}
});
</script>
</body>
</html>