Table of contents
Case: Completing the rendering and display of tabular data through Vue
1. What is Vue?
Vue is a front-end framework that eliminates DOM operations in native JavaScript and simplifies writing.Based on the idea of MVVM (Model-View- ViewModel ) , the two-way binding of data is realized , and the focus of programming is on the data.Official Website: Vue.js
2. Quick Start with Vue
Create a new HTML page and import the Vue.js file<script src="js/vue.js"></script>In the JS code area, create the Vue core object and define the data model<script> new Vue({ el: "#app", data: { message: "Hello Vue!" } }) </script>When creating a vue object, there are several commonly used attributes:
el: Used to specify which tags are managed by Vue. The value
#appofappneeds to be the id attribute value of the managed labeldata: used to define the data model
methods: Used to define functions. This we will use later
write view<div id="app"> <input type="text" v-model="message"> { { message }} </div>Interpolation expression:
Used to display the model defined in the vue object on the page
Form: { { expression }} .Content can be:variableternary operatorfunction callarithmetic operation
common command
Directives: Special attributes prefixed with v- on HTML tags, different directives have different meanings. For example: v-if , v-for…
v-bind
Bind attribute values for HTML tags, such as setting href , css style, etc. When the data model in the Vue object changes, the attribute value of the tag will change accordingly.
<a v-bind:href="url">传智教育</a>The v-bind instruction can be omitted, but: it cannot be omitted, so the code for the second hyperlink is written as follows:
<a :href="url">传智教育</a><script> new Vue({ el: "#app", data: { url: "https://www.itcast.cn" } }) </script>v-model
Create two-way data bindings on form elements. The role of two-way binding: the value of the form data can be obtained and then submitted to the server
What is bidirectional?
When the data in the data attribute of the vue object changes, the view display will change together
When the view data changes, the data in the data attribute of the Vue object will also change accordingly.
We know that the data in the data attribute can be changed by assignment, but why does the view data change? Only form item labels! So two-way binding must be used on the form item label
<input type="text" v-model="url">Variables bound by v-bind or v-model must be declared in the data model.v-on
Used to bind events to html tags. It should be noted that the following 2 points :
The function bound to the event of the label by v-on syntax must be a function declared by the vue object
When binding events with v-on syntax, the event name is compared to the event name in js, without on
<input v-on:click="demo()">我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下： methods: { handle: function(){ alert("你点我了一下..."); } } 然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下： <input type="button" value="点我一下" v-on:click="handle()"> 同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下： <input type="button" value="点我一下" @click="handle()"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="点我一下" v-on:click="handle()"> <input type="button" value="点我一下" @click="handle()"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { handle: function(){ alert("你点我了一下..."); } } }) </script> </html>v-if /v-show
In the v-if instruction, the label codes that do not meet the conditions are gone, and in the v-show instruction, the codes that do not meet the conditions still exist, but the css style is added to control the label not to be displayed.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-if与v-show</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 年龄<input type="text" v-model="age">经判定,为: <span v-if="age <= 35">年轻人(35及以下)</span> <span v-else-if="age > 35 && age < 60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span> <br><br> 年龄<input type="text" v-model="age">经判定,为: <span v-show="age <= 35">年轻人(35及以下)</span> <span v-show="age > 35 && age < 60">中年人(35-60)</span> <span v-show="age >= 60">老年人(60及以上)</span> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ age: 20 }, methods: { } }) </script> </html>v-for
We can see from the name that this instruction is used to traverse
v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下： <标签 v-for="变量名 in 集合模型数据"> { {变量名}} </标签> 需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。 有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下： <标签 v-for="(变量名,索引变量) in 集合模型数据"> <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1--> { {索引变量 + 1}} { {变量名}} </标签> 接下来，准备如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ addrs:["北京", "上海", "西安", "成都", "深圳"] }, methods: { } }) </script> </html> 然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下： <div id="app"> <div v-for="addr in addrs">{ {addr}}</div> <hr> <div v-for="(addr,index) in addrs">{ {index + 1}} : { {addr}}</div> </div>
Case: Completing the rendering and display of tabular data through Vue
As shown in the figure above, we have provided a data model, and users is an array collection that provides multiple user information. Then we need to display the data on the page in the form of a table, where the gender needs to be converted into Chinese male and female, and the grade needs to be converted into the corresponding grade.
analyze:
First of all, we definitely need to traverse the array, so we need to use the v-for tag; then each piece of data corresponds to one row, so v-for needs to be added to the tr tag; secondly, we need to number, so we need to use the index traversal syntax; then We want to display the data in the cells of the table, so we need to use { {}} interpolation expressions; finally, we need to convert the content, so we need to use the v-if instruction to perform conditional judgment and content conversion
step:
Use v-for's indexed method to add to the <tr> tag of the table
Use { {}} interpolation expressions to display content into cells
Use index + 1 as the number
Use v-if to judge and change the values of the two columns of gender and grade
Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-案例</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{ {index + 1}}</td> <td>{ {user.name}}</td> <td>{ {user.age}}</td> <td> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{ {user.score}}</td> <td> <span v-if="user.score >= 85">优秀</span> <span v-else-if="user.score >= 60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, }) </script> </html>
life cycle
Vue's life cycle: refers to the process of Vue objects from creation to destruction. The life cycle of vue includes 8 stages: 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. Its complete life cycle is shown in the following figure:
