Vue basics (1)
Vue official document: https://cn.vuejs.org/v2/guide/
Vue is only responsible for the view layer! The view layer is only responsible for showing the user and refreshing the information given by the background.
Vue adheres to the Soc principle: the principle of separation of concerns
Vue core: data-driven, componentized!
Vue is also divided into three layers: MVVM
- M: model layer. Represent JavaScript object here
- V: view layer. DOM elements are represented here
- VM: ViewModel layer. The middleware that connects the view and the data, Vue.js is the implementer of the ViewModel layer
The role of ViewModel is: two-way data binding.
The backend will pass the data to the Model layer, and the ViewModel will listen to the Model. If the data in the Model changes, the data in the View will also change!
Install Vue
-
Download and install Vue.js in IDEA
-
Import Vue.js
- Import using CDN, use online
- After downloading the Vue.js project, use it offline
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
The first Vue page (pseudo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入需要的包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
使用{
{}}}获取vm中的数据，这个数据可以引用model层的对象，这样vm就起到了连接
model和view的作用了
这样就有了一个模板template，{
{message}}它就是模板
-->
{
{message}}
</div>
<div id="app2">
{
{message}}
</div>
<script>
// 创建一个vue对象用来监听DOM元素
var vm = new Vue({
// 绑定要监听的DOM元素
el: "#app",
// 数据存的是model层的数据
data: {
message: "hello, vue!"
}
});
var vm = new Vue({
// 绑定要监听的DOM元素
el: "#app2",
// data就是一个js对象
data: {
message: "hello, vue!"
message2: "xxxxx"
}
});
</script>
</body>
</html>
From the above code, we can see that the View is there, and so is the Model. But where does the VM reflect?
You can modify the following vm data in F12 and console to have a try. The result is that the data can be changed without refreshing the page, which embodies the effect of a monitoring!
Changing the data changes the information in the dom node, which is the virtual dom. No need to frequently modify the attributes in dom
The page written above is not exactly a vue page, it is similar to a transition. The tags used in the vue interface are not them at all.
Benefits of using Vue
-
Not stuck.
When I was doing a course design, I used the way of operating dom to update page data asynchronously, so that every time I entered the page, it would be very stuck. If there are too many dom elements on the page, it will be stuck. Using Vue, you will find that the modification of the data in the dom element is very fast!
-
Low coupling
Views can be independent of Model changes and modifications. A ViewModel can be bound to different Views (the same class or the same name). When the View changes, the Model can remain unchanged (the data will not change when the label changes), and the View will also remain unchanged when the Model changes. It can be unchanged (the label will not change when the data changes).
-
Reusable
You can put some view logic in a ViewModel and let many Views reuse this view logic.
-
Independent development
Developers can focus on business logic and data development (ViewModel), designers can focus on page design
-
Testable
The interface has always been difficult to test, but now the test can be performed on the View Model.
Vue properties
1.the
[El] indicates which [View] (dom element) to bind with. Its value can be [Selector], select [View] to bind
The code is the same as above
2.data
[Data] indicates which [model] is bound to. Its value is a [model] (model is an object)
The code is the same as above
3.methods
[Methods] represents the monitored events connected to [View]. Its value is a key-value pair (object), the key of the key-value pair is the function name, and the value is a function
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="addOne">点我加一</button>
<h1>{
{num}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
addOne: function () {
this.num += 1
console.log(this.num)
}
}
})
</script>
</body>
</html>