Vue.js has been learning for some time, now review and sort out the knowledge points to avoid forgetting
table of Contents
1. Introduction to MVC and MVVM modes
Third, the installation of vue.js
1. Import directly with script
1. Introduction to MVC and MVVM modes
1. MVC: Model (model) + View (view) + controller (controller)
Mainly based on the purpose of layering, to separate each other's responsibilities. View communicates with the Model through the Controller. The Controller is the coordinator of the View and the Model. The View and the Model are not directly connected. The basic contact is unidirectional. The user User operates the template Model through the Controller to achieve the change of the View.
- View: used to present data to the user in some way
- Model: Actually it is data
- Controller: Receive and process requests from users, and return Model to users
Without considering the background framework, the MVC interaction process should be like this
Learning the MVC framework is a new understanding of the MVC model
model: A part of the logic for processing data in the application, which is usually used to store and access the model objects to the database.
view: The view part, usually refers to a part of jsp, html, etc. used to display to the user
controller: The control layer is usually used to process business logic, responsible for trying to read data and send data to the model
The view operation will trigger the controller to change the model, and then the model to change the view . Since then, the three parts of the code are written separately, the logic will be much clearer; mvvm is based on this design concept to innovatively propose the development of mvvm The idea is to deal with front-end development. It can be said that mvvm is equivalent to the front-end mvc. Let's talk about mvvm.
2. MVVM: Model + View + ViewModel
View changes will be automatically updated to ViewModel, ViewModel changes will be automatically synchronized to the View to display. ViewModel is responsible for connecting View and Model to ensure the consistency of view and data. This lightweight architecture makes front-end development more efficient and convenient. Its core is to provide two-way data binding to View and ViewModel, which allows ViewModel state changes to be automatically passed to View, so-called data two-way binding.
The frameworks of the MVVM model are: AngularJS, Vue.js and Knockout, and Ember.js. The latter two are less well-known and early framework models.
The relationship between the three can be seen in the above figure; ViewMode can be seen as the connection bridge between Model and View, View can bind Model through event, Model can bind View through data, and ViewMode can realize data and view Completely separated.
2. Introduction to Vue.js
Vue.js's official document introduces it this way: simple and compact core, progressive technology stack, enough to deal with applications of any scale.
Simple and compact means that Vue.js is only 17KB after compression. The so-called Progressive (Progressive) is that we can use Vue.js step by step, step by step, without having to use everything from the beginning.
Based on the virtual DOM, a technology that can perform various calculations through JavaScript in advance and calculate and optimize the final DOM operation. Since this DOM operation is a preprocessing operation, there is no real operation of the DOM. All are called virtual DOM. Two-way data binding saves developers from manipulating DOM objects and puts more energy into business logic.
Using Vue.js can make web development simple, and it also subverts the traditional front-end development model. It provides advanced features common in modern web development:
- Decoupling views and data
- Reusable components
- Front-end routing
- State management
- Virtual DOM (Virtual DOM)
Third, the installation of vue.js
1, by directly scriptintroducing
In vue official website direct download vue.js and with <script>the introduction of a local label, Vueit will be registered as a global variable.
2. Introduction of CDN
For prototyping or learning, you can use the latest version like this:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>For production environments, we recommend linking to a clear version number and build file to avoid unexpected damage caused by the new version:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>3. NPM installation
NPM works well with packagers such as webpack or Browserify modules. Vue also provides supporting tools to develop single-file components .
# 最新稳定版
$ npm install vue
Code walkthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Hello World!
</body>
</html>operation result
If the above English appears in the console, it means that the Vue.js development environment has been successfully installed!
Four, Vue examples
1. Create a Vue instance
Each Vue applications are through with Vuecreating a new function Vue instance begins:
var vm = new Vue({
// 选项
})Code walkthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }} {{name}} //文本插值
</div>
<script type="text/javascript">
var app = new Vue({ //vue是对象
el: '#app', //id选择器选中id为app标签
data: {
message: 'Hello Vue!', //注册变量并初始化赋值
name : "Vue"
}
});
</script>
</body>
</html>
operation result
2. Data and methods
When a Vue instance is created, it will be dataall the properties of the object was added to the Vue responsive system of. When the value of these attributes changes, the view will generate a "response", that is, the match is updated to the new value.
Code walkthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}{{b}}{{c}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
a: 1,
b: 2,
c: 3,
}
});
vm.$watch('a', function(newVal, oldVal){
console.log(newVal, oldVal);
}) //观察data.a的值是变化
vm.$data.a = "test...." //给data.a重新赋值
</script>
</body>
</html>
operation result
You can see the change of the value of a in the console output, indicating that the change of the value of the data attribute will cause the view to change, and the view will produce a "response".
This response is the MVVM pattern above. View can bind Model through events, and Model can bind View through data, and two-way data binding between View and ViewModel. This allows ViewModel state changes to be automatically transferred to View.
3. Life cycle
Each Vue instance undergoes a series of initialization processes when it is created-for example, you need to set up data monitoring, compile templates, mount the instance to the DOM, and update the DOM when the data changes. At the same time, some functions called lifecycle hooks will be run in this process , which gives users the opportunity to add their own code at different stages.
The life cycle in vue is divided into three stages: initialization, new state, and destruction
- Initialization stage: beforeCreated, created, beforeMount, mounted
- Follow the new state: beforeUpdate, update
- Destroy the vue instance: beforeDestory, destroyed
Among them, created / mounted can be used to send requests and start asynchronous tasks such as timers
beforeDestroy is used for finishing work, such as clearing the timer
Code walkthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
// setTimeout(function(){
// vm.msg = "change ......";
// }, 3000);
</script>
</body>
</html>
Console to see the output
I have learned the development of WeChat applets before, and the basic grammar of Vue.js is similar to that of WeChat applets.
Follow-up ~~~~~~
