Table of contents
2. The difference between libraries and frameworks
1. Introduction to Vue
1. What is Vue.js?
Vue is a popular [ progressive ] JavaScript framework for building user interfaces (UI) . It is used to build user interfaces. Vue is simple, flexible and efficient , allowing developers to easily build interactive and reusable front-end applications .
2. The difference between libraries and frameworks
In software development, libraries and frameworks are two different concepts.
2.1 Library
A library is a collection of functions, classes, or methods that developers can select and use as needed to complete specific tasks. It is essentially a collection of functions. Each time a function is called, a specific function is implemented, and control is then handed over to the user .
Representative examples:
- Typical representative: jQuery : DOM operation, that is: encapsulating DOM operations and simplifying DOM operations
- React: JavaScript library for building user interfaces.
- Lodash: A practical JavaScript tool library that provides a series of efficient and reusable function methods.
- Axios: A Promise based library capable of HTTP requests, used for data interaction with the server.
- D3.js: JavaScript library for creating data visualizations.
2.2 Framework
Framework is more comprehensive. It provides a complete set of tools, specifications and conventions. By writing code according to the method provided by the framework, developers can fill in their own logic to build a complete application. It is a complete solution. When using the 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 examples:
- Angular: A complete front-end framework developed by Google.
- Vue: A popular JavaScript framework for building user interfaces.
- Django: a full-featured web development framework based on Python.
- Laravel: An elegant and simple web development framework based on PHP.
3. Introduction to MVVM
MVVM is the abbreviation of Model-View-ViewModel and is a software design pattern. In front-end development, MVVM divides the application into three main parts: Model, View and ViewModel . The model represents data and business logic, the view is responsible for displaying the user interface, and the view model connects the model and the view and handles user interaction, data binding and other logic. Vue is a framework that follows the MVVM pattern. It makes full use of the characteristics of two-way data binding and componentization, making it easier for developers to manage and operate data, and improving development efficiency.
MVVM, a better UI pattern solution, MVVM allows data to automatically synchronize in both directions through two-way data binding.
Compared with mvc, it is more convenient;
2. Getting started with Vue
1. Quick Start with Vue
Use BootCDN - Bootstrap Chinese website open source project free CDN acceleration service
Network import our Vue.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
Of course we can also download
Manual download
<!-- Development version, includes helpful command line warnings -->
<script src="dist/js/vue.js"></script><!-- Production environment version, optimized for size and speed-->
<script src="dist/js/vue.min.js"></script>put
inside
grammar:
var vm = new Vue({ el：'#ID' // DOM 元素，挂载视图模型， data：{}, // 定义属性，并设置初始值 methods：{} // 定义方法，用于事件交互时使用的函数 });
step:
- define boundaries
- Create vue instance
- Hang on the boundary and define variables
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>Vue入门</title> </head> <body> <!-- 定义边界 --> <div id="app"> { {msg}} </div> { {msg}} <script type="text/javascript"> // 绑定边界 ES6具体体现 new Vue({ el: '#app', data() { return {msg: 'Hello我是你大爷Vue'}; } }) </script> </body> </html>
2. Advantages of Vue
You can do a refresh at any time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>Vue入门</title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {msg: '我是你大爷Vue'};
}
})
</script>
</body>
</html>
3. Vue events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向绑定</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{
{msg}}</h3>
<input type="text" v-model="msg"/>
<button v-on:click="getMsg">获取输入框内容</button>
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {msg: 'vue你大爷', n: 1};
},
methods: {
getMsg() {
alert(this.msg);
}
}
})
</script>
</html>
v-model: two-way binding of data, variables in the boundary, and variables defined in the vue instance.
:value/V-bind:value: Take it out from the defined variable in the vue instance and use it in the boundary.
@click/v-on:click：
4. Vue life cycle
The life cycle of Vue refers to a series of hook functions triggered during the creation, update, and destruction of Vue instances. The life cycle of Vue is divided into eight stages:
- beforeCreate : Called before the Vue instance is initialized. At this time, properties such as data and methods have not yet been initialized.
- created : Called immediately after the Vue instance is created. At this time, the operation injection of data observer, attributes and methods has been completed, but it has not been mounted yet (no real DOM has been generated). Some asynchronous operations can be performed, such as requesting data.
- beforeMount : Called before the Vue instance is mounted to the DOM. At this point the template has been compiled but has not yet been rendered on the page.
- mounted : Called after the Vue instance is mounted to the DOM. At this point, the Vue instance has established a connection with the DOM element, and you can perform DOM operations or use third-party plug-ins.
- beforeUpdate : Called before data update causes re-rendering. Status or data can be modified inside the hook function.
- updated : Called after the Vue instance is re-rendered. At this point the DOM has been updated and the component has been updated.
- beforeDestroy : Called before the Vue instance is destroyed. At this stage, the Vue instance is still fully available.
- destroyed : Called after the Vue instance is destroyed. At this time, the Vue instance has been disassociated from the DOM, and event listening and calculated properties have been removed.
1. Example
<!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 "使用方法来插值："+this.msg;
}
},
beforeCreate:function(){
console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
console.log(this.msg)//undefined
console.log(document.getElementsByClassName("myp")[0])//undefined
},
created:function(){
console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
this.msg+='!!!'
console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
},
beforeMount:function(){
console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
this.msg+='@@@'
console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log(document.getElementsByClassName("myp")[0])//undefined
console.log('接下来开始render，渲染出真实dom')
},
// render:function(createElement){
// console.log('render')
// return createElement('div','hahaha')
// },
mounted:function(){
console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
console.log(document.getElementsByClassName("myp")[0])
console.log('可以在这里操作真实dom等事情...')
// this.$options.timer = setInterval(function () {
// console.log('setInterval')
// this.msg+='!'
// }.bind(this),500)
},
beforeUpdate:function(){
//这里不能更改数据，否则会陷入死循环
console.log('beforeUpdate:重新渲染之前触发')
console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
},
updated:function(){
//这里不能更改数据，否则会陷入死循环
console.log('updated:数据已经更改完成，dom也重新render完成')
},
beforeDestroy:function(){
console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
}
});
</script>
</body>
</html>
