- Front-end and back-end separation&vue introduction
- Getting started with vue
- vue life cycle
1. Front-end and back-end separation&vue introduction
What is front-end and back-end separation?
The separation of front and back ends is the separation of front and back ends in development mode.Of course, there is also the separation of front-end and back-end in terms of project architecture, that is, considering factors such as request concurrency, server performance, and efficiency in processing requests, etc., so as to separate the front-end and back-end. This is not so friendly for beginners to understand, so we only discuss development. Pattern separation.
Let’s define it first: The separation of front-end and back-end means that the front-end and back-end perform their respective duties and focus on their own work.
Why should the front and back ends be separated?
The purpose of separation of front-end and back-end in development model is to improve development efficiency
Separation in development mode. When the front-end and back-end are not separated, the development mode is:
The front-end staff writes the static page and packages the page to the back-end. The back-end staff places the page in the static file directory, implements page jumps through the back-end, and uses technologies such as jsp or thymeleaf to render data and other logic.
The back-end personnel directly develop the full stack, and the front-end and back-end are completed by the back-end.
We will find that the following problems will occurThe workload of back-end personnel is too great. The focus of back-end personnel should be on processing business logic, not on writing pages or rendering pages. In contrast, front-end personnel only need to write static pages. Therefore, during that period, the importance of front-end personnel was not that great.
Due to the excessive coupling between the front and back ends, the communication cost is too high. The JS code written by the front-end personnel may not be understood by the back-end personnel. When a bug occurs in the project, it becomes very difficult to find the root cause of the problem.
Advantages of front-end and back-end separation
The separation of front and rear ends reduces the coupling between the front and rear ends.
Let front-end personnel concentrate on developing front-end pages, processing page jump logic, and rendering data.
Let back-end personnel concentrate on processing business logic, data persistence and other operations.
When a problem occurs, the front-end problem is solved by the front-end, and the back-end problem is solved by the back-end, thus reducing the cost of error correction.
Introduction to vue
Vue is a progressive framework for building user interfaces (some use, not the whole family). Progressive in Vue means you can use some of its functionality without having to use all of it. You can use Vue to replace just a certain part of your application, or apply it to the entire project. This way, you can gradually move to a full implementation of building your application using Vue.
The difference between libraries and frameworks
Library is essentially a collection of functions. Each time a function is called, a specific function is implemented, and then control is handed over to the user.
Representative: jQuery
The core of the jQuery library: DOM operations, that is: encapsulating DOM operations and simplifying DOM operations
Framework is a complete set of solutions. When using a framework, you need to put your code in the appropriate place in the framework, and the framework will call your code at the right time.
Representative: vue
The framework stipulates its own programming method and is a complete solution
When using a framework, the framework controls everything. We only need to write code according to the rules.
The framework is highly intrusive (from start to finish)
mvvn model introduction
mvvn model: model, view, view-model
Virtual dom, rendering dom tree == data two-way binding
mvc model: model, view, controller
2. Getting started with vue
vue entry display content steps
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
{
{msg}}
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:'hello vue 雷猴'}
}
})
</script>
</body>
</html>
Make a barrage sending function to verify the power of vue. In the past, jquery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
{
{msg}}
<span id="show"></span>
<input id="content"/>
<button type="button" onclick="tan()">发送弹屏</button>
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:'hello vue 雷猴'}
}
})
function tan(){
var content=$("#content").val();
$("#show").text(content);
}
</script>
</body>
</html>
Current vue
v-model or: two-way binding of data, variables in boundaries, variable definitions in vue instances
:value or (v-bind:value): taken from the defined variable in the vue instance and used in the boundary
@click或(v-on:click)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
<!-- {
{msg}} -->
<!-- <input :value="msg"/> --> <!-- 111 -->
<!-- <input value="msg"/> --> <!-- msg -->
<!-- <input v-bind:value="msg"/> --> <!-- 111 -->
<input v-model="msg"/> <!-- msg -->
<button type="button" @click="tan()">发送弹屏</button>
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:111}
},
methods:{
tan(){
alert(this.msg)
}
}
})
</script>
</body>
</html>
3.vue life cycle
The life cycle of Vue is divided into 8 stages: before and after creation, before and after loading, before and after updating, before and after destruction.
1. beforeCreate (before creation)
Indicates that before the instance is completely created, the mounting element $el and data object data of the vue instance are undefined and have not been initialized.
2. created (after creation)
The data object data already exists, and you can call the methods in methods to operate the data in data, but the dom is not generated and $el does not exist.
3. beforeMount (before mounting)
The $el and data of the vue instance have been initialized. Before mounting, it was a virtual dom node. The template has been edited in memory, but the template has not yet been rendered into the page. data.message is not replaced.
4. mounted (after mounting)
The vue instance is mounted and data.message is successfully rendered. The template in the memory has been actually mounted on the page, and the user can already see the rendered page. The last life cycle function during instance creation. When mounted is executed, it means that the instance has been completely created and DOM rendering has been completed in mounted.
5. beforeUpdate (before update)
When data changes, the beforeUpdate method is triggered. data The data is not yet synchronized with the latest data.
6. updated (after update)
When data changes, the updated method will be triggered. The page and data data have been kept in sync.
7. beforeDestroy (before destruction)
Called before the component is destroyed, at this step the instance is still fully available.
8. destroyed (after destruction)
Called after the component is destroyed, changes to data will no longer trigger the periodic function. The Vue instance has released event monitoring and dom binding, but the dom structure still exists.
Hook functions triggered by default during vue initialization: beforeCreate, created, beforeMount, mounted