Compilation software: IntelliJ IDEA 2019.2.4 x64
Operating environment: Google browser
Vue framework version: Vue.js v2.7.14
Table of contents
- 1. What is the framework?
- 2. How to write a Vue program (take IDEA as an example)?
- 3. What is declarative rendering?
- 4. How does Vue operate the tag body (content in double tags)?
- 5. How does Vue manipulate attribute values?
- 6. How does Vue implement conditional rendering?
- 7. How does Vue implement list rendering?
- 8. How does Vue implement event-driven?
- 9. How does Vue implement the default behavior of canceling controls?
- 10. How does Vue prevent event bubbling?
- 10. How does Vue listen to attributes
- 12. The life cycle of Vue
- Thirteen. Hook function
- Fourteen. Comprehensive case: Vue version dynamic form
1. What is the framework?
There is no framework for any programming language at the beginning. Later, in the actual development process 不断的总结经验, 积累最佳的解决方案people gradually discover specific problems in many specific scenarios, and it is always possible 套用固定的解决方案.
So someone 成熟的固定解决方案collected and integrated them together, and it was formed 框架.
When using a framework, we often don't care how the framework is programmed, we only care about whether it can achieve the code logic we want, of course, the premise is that we need to declare the framework in advance, that is, tell it what to do , Just like when washing clothes with a washing machine, you need to put the clothes, laundry detergent, and set the corresponding functional parameters such as the washing mode.
And we use the Vue framework to carry out programming development on the basis of importing the package 固定的解决方案.js文件
2. How to write a Vue program (take IDEA as an example)?
step:
-
Download the js file of the Vue framework on the official website
-
Create a new project file on IDEA, create a new js folder in its project directory and create a blank Vue.js file, copy and paste all the js codes of the Vue framework on the official website to our newly created Vue.js
-
Create a new HelloWorld.html file and build the Vue framework on it
a. Introduce Vue.js into the webpage
ps: Drag and drop Vue.js directly into HelloWorld.html in IDEA, and import it automatically
<script src="vue.js"></script>b. Set an area in the body tag (the area to be operated by Vue)
//在body里设置一个空的 div 元素，具有 ID“app” <body> <div id="app"></div> </body>c. Below the div tag, create a Script tag and new Vue() object
<body> <div id="app"></div> </body> <script> //new Vue()对象 new Vue({ }); </script>d. Pass a js object to the Vue object (js object created by {} method)
<script> new Vue({ "el":"#app",//指定为#app的目标元素，用于Vue控制(选择控制区域） "data":{ },//一个空对象，将用于存储此实例的数据模型。 "methods":{ } //一个空对象，将用于定义此实例可能使用的任何自定义方法。 ); </script> -
Realize function
a. Set up the data model
//设置数据模型 "data":{ "msg":"div的内容" },b. Make a binding relationship between the data model in the Vue object and the tag body of the web page
<body> <div id="app"> <!-- [{msg}}-->插值表达式 --> 绑定数据模型 --> <div>[{msg}}</div> </div> </body>c. In this way, when we operate the content in the div, it is transformed into an operation msg
Bind events on elements:
<input type="button"value="获得div中的内容"@click="getText"/>Create a function in the methods of the Vue object
"methods":{ //创建自定义函数getText用于获取msg的值，其实是获取div中的文本，以警示框弹出 "getText":function () { alert(this.msg); }, //创建自定义函数setText用于设置msg的值，实际上修改的是div中的内容 "setText":function () { this.msg="Vue设置的新值" }
Case: Get or modify the content in the div tag body
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue_HelloWorld</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div id="div01">{
{msg}}</div>
<input type="button" value="获取div的内容" id="btn01" @click="getText"> <!-- 无参函数可以省略()，但有参函数不能省略-->
<input type="button" value="修改div的内容" id="btn02" @click="setText">
</div>
<script>
new Vue({
"el":"#app",//el是选择Vue可操作的区域
"data":{
"msg": "这是div的内容"
}, //设置数据模型
"methods":{
"getText":function () {
alert(this.msg)
},
"setText":function () {
this.msg="这是Vue设置的新值"
}
}
}
)
</script>
</body>
</html>
3. What is declarative rendering?
3.1 Declarative
声明式是相对于编程式而言的。
声明式: Tell the framework what to do, the specific operation is done by the framework编程式: Write your own code to complete specific operations
3.2 Rendering
Explanation of the meaning of the above picture:
- Blue box: HTML tags
- Red circles: dynamic, undetermined data
- Blue circle: After the calculation of the program, the specific calculated data that can be directly displayed on the page,
- Rendering: the process in which the program calculates dynamic data to obtain specific data
Examples are as follows:
4. How does Vue operate the tag body (content in double tags)?
grammar:
插值表达式: { {key value in data model)}
The code example is as follows:
<div id="div01">{
{msg}}</div>
"data":{
"msg": "这是div的内容"
}
5. How does Vue manipulate attribute values?
5.1 One-way binding
Interpretation:
Modify the data model, html page synchronization effect,
但是用户修改html属性值，数据模型不会随之改变
grammar:
v-bind: original attribute name = "key value of data model"
Can be abbreviated as:
:Original attribute name = "key value of the data model"
Case: Demonstrate the effect of one-way binding
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue_HelloWorld</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 单向绑定 v-blind -->
<input type="text" v-blind:value="username" >
<br>
<br>
<input type="button" value="显示文本框中的内容" @click="getValue">
</div>
<script>
new Vue({
"el":"#app",//el是选择Vue可操作的区域
"data":{
"username":"admin"
},
"methods":{
"getValue":function () {
alert(this.username)
}
}
}
)
</script>
</body>
</html>
Case demonstration results:
① Change before input
②Change after input
5.2 Two-way binding
Interpretation:
Modify the data model, html page synchronization effect,
用户修改html属性值，数据模型会随之改变
grammar:
v-model: original attribute name = "key value of data model"
can be abbreviated as follows
v-model="key value of data model"
Notice:
In the input tag, two-way binding can only modify the value, because the customer can only modify the value attribute, and the user cannot modify other attributes
Case: Demonstration to realize two-way binding
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue_HelloWorld</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 v-blind -->
<input type="text" v-model:value="username" >
<br>
<br>
<input type="button" value="显示文本框中的内容" @click="getValue">
</div>
<script>
new Vue({
"el":"#app",//el是选择Vue可操作的区域
"data":{
"username":"admin"
},
"methods":{
"getValue":function () {
alert(this.username)
}
}
}
)
</script>
</body>
</html>
Case demonstration results:
①Before input:
②Change after input:
tips：
v-model.trim="key value of the data model" to remove spaces before and after
6. How does Vue implement conditional rendering?
6.1 What is conditional rendering?
According to the value of the data attribute in the Vue object, it is judged whether to render the content of the HTML page. That is, whether the control element is displayed.
6.2 v-if
usage:
Determine whether to render the element or component according to the value of the expression. When the value of the expression is true, it will be rendered, otherwise it will not be rendered.
Case: Use v-if to change the content of a div while pressing a button
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divs {
border: 1px solid red;
width: 100px;
height: 150px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if=flag id="divs">这是div的内容</div>
<input type="button" value="按钮" @click="changeDiv">
</div>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
"methods":{
"changeDiv":function () {
this.flag=!this.flag;
}
}
})
</script>
</body>
</html>
Case demonstration effect:
① before change
②After the change
6.3 v-else
usage:
True does not display, false displays
Notice:
不能单独使用，必须要和v-if搭配
v-if和v-else中间不能有多余标签
Case: The performance achieves the effect of the combination of the two
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divs {
border: 1px solid red;
width: 100px;
height: 150px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if=flag id="divs">这是加了v-if渲染的div</div>
<div v-else=flag >这是加了v-else渲染的div</div>
<input type="button" value="按钮" @click="changeDiv">
</div>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
"methods":{
"changeDiv":function () {
//按下按钮触发单击事件的瞬间，flag被取反并同时作用于所渲染的标签体
this.flag=!this.flag;
}
}
})
</script>
</body>
</html>
Case demonstration effect:
① before change
②After the change
6.4 v-show
usage:
Determine whether to display the element or component according to the value of the expression. When the value of the expression is true, it will be displayed, otherwise it will be hidden, but the element will still be rendered into the DOM.
Case: Demonstrate the effect of realizing v-show
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divs {
border: 1px solid red;
width: 100px;
height: 150px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div v-if=flag id="divs">这是加了v-if渲染的div</div>-->
<div v-show=flag id="divs">这是加了v-show渲染的div</div>
<input type="button" value="按钮" @click="changeDiv">
</div>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
"methods":{
"changeDiv":function () {
//按下按钮触发单击事件的瞬间，flag被取反并同时作用于所渲染的标签体
this.flag=!this.flag;
}
}
})
</script>
</body>
</html>
Case realization effect:
① Before rendering
② After rendering
6.5 Difference between v-if and v-show
different usage scenarios
v-if is good for rendering only once when the condition is met.
v-show is suitable for situations where frequent switching between display and hiding is required.
why？
因为 v-if 在条件不满足时会从 DOM 中删除元素，而 v-show 则只是通过修改 CSS 样式来隐藏元素，因此 v-show 的性能比 v-if 更好。
7. How does Vue implement list rendering?
usage:
Vue's list rendering can use the v-for instruction, which can traverse arrays or objects and render each element.
Location:
Which label to loop through, which label is v-for added to
grammar:
v-for=" "
7.1 Simple Arrays
Case: Traverse the hobbys in the data model in the unordered list in hyml and display them on the page
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="hobby in hobbys">{
{hobby}}</li>
</ul>
<input type="button" value="新增" @click="addHobby">
<input type="button" value="删除" @click="deleteHobby">
</div>
<script>
new Vue({
el:"#app",
data: {
hobbys:["Java","mysql","写博客","刷视频号"]
} ,
methods:{
//新增一个习惯
addHobby:function () {
this.hobbys.push("CODM")
},
//删除一个习惯，从后往前删
deleteHobby:function () {
this.hobbys.splice(this.hobbys.length-1,1)
}
}
})
</script>
</body>
</html>
7.2 Object values
Case: In the table tag, traverse and display the array of computers objects in the data model to the page
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>品牌</th>
<th>价格</th>
</tr>
<tr v-for="computer in computers">
<td >{
{computer.id}}</td>
<td >{
{computer.brand}}</td>
<td >{
{computer.price}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
//遍历对象数值
data: {
computers:[
{
id:1001,
brand:"华为",
price: 7800
}, {
id:1002,
brand:"联想" ,
price:8900
}, {
id:1003,
brand:"苹果",
price:13000
}
]
}
})
</script>
</body>
</html>
Syntax that requires an index:
v-for="(variable, index) in array"
索引index从0开始，可以加数学运算
Case: Add serial numbers to the object array just now
The code demonstration is as follows:
</head>
<body>
<div id="app">
<table>
<tr>
<th>索引</th>
<th>序号</th>
<th>品牌</th>
<th>价格</th>
</tr>
<tr v-for="(computer,index) in computers">
<td>{
{index+1}}</td>
<td >{
{computer.id}}</td>
<td >{
{computer.brand}}</td>
<td >{
{computer.price}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
//遍历对象数值
data: {
computers:[
{
id:1001,
brand:"华为",
price: 7800
}, {
id:1002,
brand:"联想" ,
price:8900
}, {
id:1003,
brand:"苹果",
price:13000
}
]
}
})
</script>
</body>
</html>
8. How does Vue implement event-driven?
grammar:
v-on:event-type="function-call"
Case: Implement click event and change event
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 单击事件 -->
<input type="button" value="按钮" v-on:click="clickTest(10,'java')"><br>
<!-- change事件 -->
<input type="text" v-on:change="changeTest">
</div>
<script>
new Vue(
{
el:"#app",
data:{
},
methods:{
clickTest:function (a,b) {
alert("这是vue绑定并测试的单击事件")
alert("传入的值:"+a+"\t"+b)
},
changeTest:function () {
alert("这是vue绑定并测试的change事件")
}
}
}
)
</script>
</body>
</html>
Notice:
The above event-driven syntax can be abbreviated as follows:
v-on:click=“clickTest” ==>
@click="clickTest"
The custom functions in the following methods can be abbreviated as follows (not commonly used):
clickTest:function (a,b) {
alert("这是vue绑定并测试的单击事件")
alert("传入的值:"+a+"\t"+b)
}
clickTest(){
alert("点击事件绑定成功")
}
9. How does Vue implement the default behavior of canceling controls?
9.1 What is the control default behavior?
The default behavior of the control refers to:
点击超链接跳转页面点击表单提交按钮提交表单
9.2 Default behavior of hyperlink and form cancel controls
grammar
js: event.preventDefault(); //Cancel the default behavior of the control
Vue: @click.prevent="clickTest" //100% cancel
Case: Simulate the default behavior of hyperlinks and form cancel controls
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com/" @click="clickTest">跳转至百度</a>
<form action="helloworld.html" method="get" @submit.prevent="submitTest" >
<input type="text" name="username">
<input type="submit" >
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
clickTest:function () {
//如果你不根让超链接进行跳转
alert("将要跳转至百度")
//取消控件的默认行为
event.preventDefault();
},
submitTest:function () {
//如果你不根让超链接进行跳转
alert("将要提交表单")
//取消控件的默认行为
// event.preventDefault();
}
}
})
</script>
</body>
</html>
10. How does Vue prevent event bubbling?
10.1 About event modifiers
Vue event modifiers are a syntactic sugar provided by Vue to simplify the writing of event handlers.
事件修饰符是在事件后面添加的特殊后缀，用于改变事件的行为。
Common event modifiers are as follows:
.stop: prevent event bubbling.prevent: block the default event.capture: The event capture phase triggers the event handler.self: The event handler will only fire if the event fires on the event's target element.once: trigger the event handler only once.passive: Tell the browser that the default event does not need to be blocked to improve performance
10.2 What is event bubbling?
It means that in the nested structure of HTML elements, when an event is triggered, it will start from the innermost element and pass outward layer by layer until it reaches the outermost element. In this process, if an element is bound to an event handler, it will be called and executed.
For example, when the user clicks the mouse on a button, the click event is fired and propagates from the button element up the hierarchy until it reaches the outermost level of the entire document. During the transfer process, any element bound to the click event will be called to execute the corresponding event handler.
10.3 How to prevent event bubbling
grammar:
js:event.stopPropagation(); //阻止事件冒泡
vue:@click.stop="div2Test"
Case: Mock implementation prevents event bubbling
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
#div1{
border: 2px solid red;
width: 300px;
height: 300px;
}
#div2{
border: 2px solid blue;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div id="div1" @click="div1Test">
<div id="div2" @click.stop="div2Test"></div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{},
methods:{
div1Test:function () {
alert("点击了大红框");
},
div2Test:function () {
//发生了事件冒泡：即点中了小蓝框，小蓝框的单击事件于大红框的单击事件先后触发
alert("点击了小蓝框");
//现有需求：点击小蓝框，只触发小蓝框的单击事件
//js的原生阻止方法
// event.stopPropagation();
}
}
})
</script>
</body>
</html>
10. How does Vue listen to attributes
Interpretation:
Attribute listening refers to monitoring the change of a certain attribute in the Vue instance, and performing corresponding operations when the attribute changes.
Function:
When the value of the data model changes, it is monitored by Vue, and then a function is executed
Case: The text after the last name and first name should change as the value entered by the user changes, and the text in the full name should also change together
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>尊姓:{
{firstname}}</p>
<p>大名:{
{lastname}}</p>
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname">
<p>全名:{
{fullname}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
firstname:"本",
lastname:"拉登",
fullname:"本.拉登"
},
methods:{
},
watch:{
firstname: function () {
this.fullname=this.firstname+"."+this.lastname;
},
lastname: function () {
this.fullname=this.firstname+"."+this.lastname;
}
}
})
</script>
</body>
</html>
12. The life cycle of Vue
The detailed diagram of the Vue life cycle is as follows:
① Official website version
② Chinese graphic version
对象的创建前：beforeCreate
对象的创建后：created
渲染（挂载）前：beforeMount
渲染（挂载）后：mounted
修改前：beforeUpdate
修改后：updated
销毁前：beforeDestroy
销毁后：Destroy
Thirteen. Hook function
Function:
Let developers execute custom functions during the lifecycle phase of vue
Location:
Same level as el/data/methods/watch
Case: Create a custom function to simulate and demonstrate the four life cycle states of beforeCreate, created, beforeMount, and mounted
The code demonstration is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div id="div01">{
{msg}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"这是div中的内容"
},
methods:{
fun01:function () {
console.log("这是fun01函数");
}
},
beforeCreate:function () {
console.log("vue对象初始化前执行...");
console.log(this.msg);//没有
this.fun01();//报错
},
created:function () {
console.log("vue对象初始化后执行...");
console.log(this.msg);//有值
this.fun01();//可以调用到
},
beforeMount:function () {
console.log("vue对象渲染前执行...");
console.log(document.getElementById("div01").innerText);//{
{msg}}
},
mounted:function () {
console.log("vue对象渲染后执行...");
console.log(document.getElementById("div01").innerText);//这是div中的内容
}
})
</script>
</body>
</html>
Fourteen. Comprehensive case: Vue version dynamic form
case requirements
-
① Create a table and initialize some employee information (number, name, age, major, etc.)
-
② Create a form where the user enters employee information
-
③ Create an Add button in the form, click the Add button, and the entered employee information will be added to the form
-
④ There is a delete hyperlink after each employee information, click delete to delete the current employee information
Case diagram
The case code demo is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实现动态表格</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0px" width="250px" align="center" id="users">
<tr>
<th>序号</th>
<th>用户</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="student in students">
<td>{
{
student.id}}</td>
<td>{
{
student.name}}</td>
<td>{
{
student.gender}}</td>
<td>
<input type="button" value="删除" @click="deleteUser" >
</td>
</tr>
</table>
<table border="0" cellspacing="0px" width="250px" align="center" id="input">
<tr>
<td>序号</td>
<td colspan="3"><input type="text" v-model:value="id" > </td>
</tr>
<tr>
<td>姓名</td>
<td colspan="3"><input type="text" v-model:value="name" ></td>
</tr>
<tr>
<td>性别</td>
<td colspan="3"><input type="text" v-model:value="gender" ></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="添加用户" @click="addUser">
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
students:[
{
id:1,
name:"张三",
gender:"男",
},
{
id:2,
name:"李四",
gender:"女"
},
{
id:3,
name:"王五",
gender:"男"
}
],
id:"null",
name:"null",
gender:"null",
},
methods:{
//删除用户
deleteUser:function () {
//event.target.parentNode --> 获取触发单击事件的按钮元素的父元素
//event.target.parentElement --> 获取触发单击事件的按钮元素的父元素
event.target.parentElement.parentElement.remove();
},
//思路：将新添加的数据加入到data中students数组中，即可
addUser:function () {
var data= new Object();
data.id=this.id;
data.name=this.name;
data.gender=this.gender;
this.students.push(data);
}
}
})
</script>
</body>
</html>
