Table of contents
1. VUE
1. Basic introduction
▶ Overview
Vue is a set of front-end frameworks that exempts DOM operations in native JavaScript and simplifies writing.
We have also learned the back-end framework `Mybatis` before, `Mybatis` is used to simplify `jdbc` code writing; and `VUE` is a front-end framework, which is used to simplify `JavaScript` code writing. In the previous comprehensive case, a large number of DOM operations were performed, as follows
After using `VUE`, we don't need to write this part of the code. So how does `VUE` 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 the idea of `MVVM`, we must first understand the idea of `MVC`, as shown in the figure below is the diagram of the idea of `MVC`
Among them, C is our js code, M is data, and V is the content displayed on the page, as shown below:
The idea of `MVC` 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, understand the idea of `MVVM`. The following figure is a diagram of three components:
The `Model` in the figure is our data, `View` is the view, that is, the page label, the content that the user can see through the browser; `Model` and `View` are bidirectionally bound through the `ViewModel` object , and the `ViewModel` object is provided by `Vue`. The effect of two-way binding: the following picture is written in the code prepared in advance, the input box is bound to the `username` model data, and the `{ {}}` is also used to bind the `username` model data on the page
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.
▶ 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"></scrip>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 tag is managed by Vue. The attribute value `app` in `#app` needs to be the id attribute value of the managed tag
● `data`: used to define the data model
● `methods`: used to define the function. This we will use later3. Write the view
<div id="app"> <input name="username" v-model="username" > { {username}} </div>`{ {}}` is the `interpolation expression` defined in Vue, where the data model is written, and the data value of the model will be displayed in this position.
▷ 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>2. Vue command
Directives: special attributes prefixed with v- on HTML tags, different directives have different meanings. For example: v-if, v-for...
▷ v-bind & v-model directives
▷ v-bind
This directive can bind model data to the original attribute of the tag. In this way, when the model data changes, the tag attribute value also changes accordingly, for example:
<a v-bind:href="url">百度一下</a>The `v-bind:"` above can be simplified as `:`, as follows:
<!-- v-bind 可以省略 --> <a :href="url">百度一下</a>▷ 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 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
▶ v-on directive
We define a button on the page, and use `v-on` instruction to bind the click event to the button, the html code is as follows:
<input type="button" value="一个按钮" v-on:click="show()">When using `v-on`, you can also use a simplified way of writing, replace `v-on:` with `@`, the html code is as follows
<input type="button" value="一个按钮" @click="show()">The `show()` bound by the above code needs to be defined in the `methods` property of the Vue object
new Vue({ el: "#app", methods: { show(){ alert("我被点了"); } } });Note: The event name after `v-on:` is the original event attribute name before removing on.
For example:
● Click event: The event attribute name is onclick, but it is `v-on:click` in vue
● Lost focus event: the event attribute name is onblur, and `v-on:blur` is used in vue▷ 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>▶ Condition judgment instruction
Next, let's demonstrate it through code. Define a `count` data model in Vue, as follows
//1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { count:3 } } });Now to implement, when the data of the `count` model is 3, display the content of `div1` on the page; when the data of the `count` model is 4, display the content of `div2` on the page; the data of the `count` model is For other values, display `div3` on the page. Here, in order to dynamically change the value of the model data `count`, another input box is defined to bind the `count` model data. The html code is as follows:
<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>▷ 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>Open the page through the browser and enter different values in the input box, the effect is as follows
Then we are looking at the effect of the `v-show` command. If the value of `count` in the model data is 3, display the content of `div v-show`, 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">The effect of opening the browser is as follows:
Through the above demonstration, it is found that `v-show` and `v-if` have the same effect, so what is the difference between them? We view the source code according to the inspection function of the browser:
It can be seen from the figure above that the principle of `v-show` not being displayed is to add the `display` css attribute to the corresponding label, and set the attribute value to `none`, thus achieving the hidden effect. And the `v-if` directive will not render at all if the condition is not met.
▶ v-for directive
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: You need to loop over that label, and the `v-for` directive 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>The effect of opening it through a browser is as follows
3. 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 effecting Vue objects and the hook functions corresponding to each stage provided by Vue official website
Seeing the picture above, you don’t need to pay too much attention to this picture. For these hook methods, we only focus on `mounted`.
`mounted`: Mounting 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.
2. Element
1. Basic introduction
▶ Overview
Element: It is a set of Vue-based website component library provided by the front-end development team of Ele.me, which is used to quickly build web pages.
Element provides many components (parts that make up web pages) for us to use. Such as hyperlinks, buttons, pictures, tables, etc.~
The left side of the picture below is the button we see when writing the page, and the right side of the picture above is the page effect provided by Element, and the effect is clear at a glance.
When we learn Element, we learn how to copy components from the official website to our own pages and modify them. The official website URL is: Element - the world's most popular Vue UI framework (eleme.cn)
Enter the official website to see the following page
Next, click `components` directly, the page is as follows
2. Element layout
Element provides two layout methods, namely:
● Layout layout
● Container layout container▷ Layout Partial
Create layouts quickly and easily with basic 24 columns. That is, a row is divided into 24 columns by default, and the number of columns occupied by each column is set according to the page requirements.
Find `Layout` in the left menu bar, then find the button style you like, click `Show Code`, and the corresponding code will be displayed below. The displayed code has styles and html tags. Copy the style into the `head` tag of our own page, and copy the html tag to the `<div id="app"></div>` tag.
▷ The overall page code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> <div id="app"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>Now you need to add a line, which requires the line to display 8 grids. By calculating, each grid occupies 3 columns. The specific html code is as follows
<!-- 添加一行，8个格子 24/8 = 3 --> <el-row> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>▶ Container layout container
The container component used for layout is convenient for quickly building the basic structure of the page. The following figure is the layout container effect.
The following figure is an example of the Container layout container provided by the official website:
The effect code includes styles, page tags, and model data. Copy the style `<style>` inside to the `head` tag of our own page; copy the html tag to the `<div id="app"></div>` tag, and then copy the data model to` in the `data()` of the vue` object.
▷ The overall page code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </head> <body> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="2-1"> <template slot="title">选项1</template> <el-menu-item index="2-1-1">选项1-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app", data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }) </script> </body> </html>▶ Complete the pagination bar display
Find `Pagination` on the Element official website, and find the effect we need in the main part of the page, as follows
Click `Show Code` to find the code corresponding to `Full Function`, and then analyze the code
▷ The attribute description of the above code:
● `page-size` : number of items to display per page
● `page-sizes`: Option settings for displaying the number of selectors per page.
`:page-sizes="[100,200,300,400]"` corresponds to the following page effects:
● `currentPage` : current page number. We click on that page number, and the value of this attribute is a few.
● `total`: the total number of records. It is used to set the total number of data entries. After setting this property, Element will automatically calculate how many pages need to be divided and show us the corresponding page number.▷ Event description:
● `size-change`: Triggered when the pageSize changes. That is, when we change the number of items displayed on each page, this event will trigger.
● `current-change`: Triggered when the currentPage changes. That is, when we click on other page numbers, the event will be triggered.
