1.1 Overview
Vue is a front-end framework that exempts DOM operations in native JavaScript
We have also learned the back-end framework beforeMybatis
MybatisIt is used to simplify jdbccode writing; but VUEit is a front-end framework that is used to simplify JavaScriptcode writing.
After learning VUE, we don't need to write this part of the code anymore. So VUEhow to simplify DOM writing?
Based on the idea of MVVM (Model-View-ViewModel), the two-way binding of data is realized, and the focus of programming is placed on the data. Before we focused on the DOM operation; but to understand MVVMthe idea, we must first talk about MVCthe idea, as shown in the figure below is MVCthe idea diagram
C is the js code, M is the data, and V is the content displayed on the page. The following picture is the code we wrote before
MVCThoughts cannot be two-way bound. Two-way binding means that when the data model data changes, the page display will change accordingly, and if the form data changes, the bound model data will also change accordingly. Next, let's talk about MVVMideas, the following figure is a diagram of three components
The in the figure Modelis our data, Viewwhich is the view, that is, the page label, the content that the user can see through the browser; Modeland are two-way bound Viewthrough the object, and the object is provided by . Next, let's take a look at the effect of two-way binding. The following figure is the code prepared in advance. The input box is bound to the model data, and the model data is also bound on the page.ViewModelViewModelVueusername{
{}}username
Open this page through a browser and you can see the following page
When we enter content in the input box, and the content we input is displayed in real time behind the input box, this is the effect of two-way binding.
1.2 Quick Start
Vue is relatively simple to use, and it is divided into the following three steps:
1. Create a new HTML page and import the Vue.js file
<script src="js/vue.js"></script>2. In the JS code area, create a Vue core object for data binding
new Vue({
el: "#app",
data() {
return {
username: ""
}
}
});When creating a Vue object, a js object needs to be passed, and the following attributes are required in the object:
-
el: Used to specify which tags are managed by Vue.#appThe value of this attributeappneeds to be the id attribute value of the managed label -
data: used to define the data model -
methods: Used to define functions. This we will use later
3. Write the view
<div id="app">
<input name="username" v-model="username" >
{
{username}}
</div>{
{}}It is defined in Vue 插值表达式, and the data model is written in it, and the data value of the model will be displayed in this position at that time.
The overall code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
<!--插值表达式-->
{
{username}}
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){ // data() 是 ECMAScript 6 版本的新的写法
return {
username:""
}
}
/*data: function () {
return {
username:""
}
}*/
});
</script>
</body>
</html>1.3 Vue directives
Directives: special attributes prefixed with v- on HTML tags, different directives have different meanings. For example: v-if, v-for...
Commonly used commands are:
1.3.1 v-bind & v-model directives
1、v-bind
This directive can bind model data to the original attribute of the tag. In this way, the model data changes, and the tag attribute value also changes accordingly.
For example:
<a v-bind:href="url">百度一下</a>The above v-bind:"can be simplified :as follows:
<!--
v-bind 可以省略
-->
<a :href="url">百度一下</a>Open this page through a browser and you can see the following page:
2、v-model
This directive can bind model data to form item tags. In this way, a two-way binding effect can be achieved. For example:
<input name="username" v-model="username">Code demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<a :href="url">点击一下</a>
<input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com"
}
}
});
</script>
</body>
</html>Open this page through a browser and you can see the following page:
Open the above page through the browser, and use the check to view the path of the hyperlink, which will change according to the path entered in the input box, because the hyperlink and the input box are bound to the same model data
3、v-on
We define a button on the page, and use v-onthe command to bind the click event to the button. The html code is as follows
<input type="button" value="一个按钮" v-on:click="show()">Open this page through a browser and you can see the following page:
When using v-on, you can also use a simplified way of writing, v-on:replace with @, the html code is as follows
<input type="button" value="一个按钮" @click="show()">The binding of the above code needs to be defined in the property show()of the Vue objectmethods
new Vue({
el: "#app",
methods: {
show(){
alert("我被点了");
}
}
});==Note: v-on:The following event name is the original event attribute name before removing on. ==
For example:
-
Click event: The event attribute name is onclick, and it is used in vue
v-on:click -
Lost focus event: the event attribute name is onblur, and when used in vue
v-on:blur
The overall page code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="一个按钮" v-on:click="show()"><br>
<input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
}
},
methods:{
show(){
alert("我被点了...");
}
}
});
</script>
</body>
</html>4、v-if
Next, let's demonstrate it through code. Define a data model in Vue count, as follows
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
count:3
}
}
});Now to achieve, when countthe data of the model is 1, the content is displayed on the page div1; when countthe data of the model is 2, div2the content is displayed on the page; countwhen the model data is other values, it is displayed on the page div3. Here, in order to dynamically change countthe value of the model data, another input box is defined to bind countthe model data. The html code is as follows:
<div id="app">
<div v-if="count == 1">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>
<hr>
<input v-model="count">
</div>The overall page code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="count == 3">div1</div>
<div v-else-if="count == 4">div2</div>
<div v-else>div3</div>
<hr>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
count:3
}
}
});
</script>
</body>
</html>Then we are looking at v-showthe effect of the instruction. If countthe value of the model data is 3, div v-showthe content will be displayed, otherwise it will not be displayed. The html page code is as follows
<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">Open this page through a browser and you can see the following page:
Through the above demonstration, it is found v-showthat and v-ifhave the same effect, so what is the difference between them? We view the source code against the browser's inspection capabilities
It can be seen from the above figure v-showthat the principle of not displaying is to add a css attribute to the corresponding label display, and set the attribute value to none, thus achieving the hidden effect. The instruction v-ifis that it will not be rendered at all when the condition is not met.
5、 v-for
This instruction knows that it is used for traversal when you see its name. The format used by this instruction is as follows:
<标签 v-for="变量名 in 集合模型数据">
{
{变量名}}
</标签>==Note: The label needs to be cycled, and v-forthe instruction is written on that label. ==
If you need to use the index of the collection model data on the page, you need to use the following format:
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{
{索引变量 + 1}} {
{变量名}}
</标签>Code demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{
{addr}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{
{i+1}}--{
{addr}} <br>
</div>
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
addrs:["北京","上海","西安"]
}
}
});
</script>
</body>
</html>Open this page through a browser and you can see the following page:
1.4 Life cycle
Eight phases of the life cycle: Every time a life cycle event is triggered, a life cycle method is automatically executed, and these life cycle methods are also called hook methods.
The figure below shows the entire process from creating Vue to destroying Vue objects and the hook functions corresponding to each stage provided by Vue official website
We only need to pay attention to these hook methods mounted.
mounted: The mount is complete, Vue is initialized successfully, and the HTML page is rendered successfully. In the future, we will send an asynchronous request to load data in this method.