013-Vue: Overview of front-end knowledge structure, basic grammar, statement cycle

Overview of front-end knowledge structure

1. Common js frameworks

Explanation : The underlying package of the js framework is js.

2. Common ui frameworks

Overview :

• Ui is the English abbreviation of user interface, so what is the ui framework? The framework can be understood as a template, and the ui framework is also the ui template. This is somewhat similar to encapsulation in programming, that is to say, some common effects of ui design have been encapsulated into ui frameworks by others. You only need to call them directly to achieve any effect you want, and you don’t need to be too entangled in the underlying implementation.

Section 1 Introduction to Vue.js

1. Framework

Any programming language has no framework at the beginning. Later, as it is continuously summarized 『经验』and accumulated in the actual development process 『最佳实践』, people gradually find that many 『特定场景』downloads 『特定问题』are always possible 『套用固定解决方案』.

So someone collected the mature ones 『固定解决方案』, integrated them together, and it was done 『框架』.

In the process of using the framework, we often only need to tell the framework 『做什么（声明）』, and do not need to care about the framework 『怎么做（编程）』.

For Java programs, we use the framework to import those encapsulated 『固定解决方案』jar packages, and then 『配置文件』tell the framework what to do, which can greatly simplify coding and improve development efficiency. The junit we have used is actually a unit testing framework.

For JavaScript programs, we use the framework to import those encapsulated 『固定解决方案』" js文件』, and then code on the basis of the framework.

Use washing clothes as an analogy to the framework:
Typical application scenario: washing clothes
Input data: clothes, laundry detergent, water
Not using the framework: hand washing
Using the framework: using the washing machine, for humans, only buttons are needed, and the specific operation is completed by the washing machine. People just tell the washing machine what to do, and the specific operation is done by the washing machine.

When using the framework in actual development, we mainly tell the framework what to do, and the specific operation is completed by the framework.

2, Vue.js

2.1, the author of Vue.js

After working on AngularJS, the author of Vue 尤雨溪developed Vue.js. He claims that his idea is to extract the parts he likes in Angular and build a fairly lightweight framework.

Vue was first released in February 2014. The author posted the earliest versions on Hacker News, Echo JS, and Reddit's JavaScript forum. Within a day, Vue hit the front pages of all three sites.

Vue is one of the most popular open source projects on Github. At the same time, in the JavaScript framework/function library, the number of stars obtained by Vue has surpassed React, and is higher than Backbone.js, Angular 2, jQuery and other projects.

2.2. Introduction to the official website of Vue.js

Vue.js official website URL : https://cn.vuejs.org/

Vue (读音 /vjuː/，类似于view) is a progressive framework for building user interfaces . Unlike other big frameworks, Vue is designed to be 自底向上逐层应用. Vue's core library 只关注视图层is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications when used in conjunction 现代化的工具链 with various支持类库

Summary :

• Vue is a front-end framework that exempts DOM operations in native JavaScript (js) 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.
• One-way display : only the data in the model can be taken out and placed in the view for one-way display
  • Disadvantage 1 : You can only 单方向take the data out of the model and display it in the view layer
  • Disadvantage 2 : 只能实现展示而不是绑定(Before using js or jquery, you need to obtain the Dom object first, and then use the object to obtain the attribute value to display the data. Once the model data changes, the js code will also change. Now Vue can be used to achieve binding, and the model data will occur in the future The data in the changing view will also change accordingly, no need to modify any code)
• Two-way binding对象(ViewModel) : one will View(html元素)and Model(数据)two-way binding provided by View
  • That is: the model changes and the view changes, and the view changes and the model changes. And these changes are done automatically.

The second section prepares the Vue.js environment

1. Best practices in development

"Best practice" is the best solution extracted for a specific problem in actual development. Extracting "best practices" and encapsulating them into packages of their respective programming languages ​​is the basis of the framework.

• Java language package: jar package
• Packages of the JavaScript language: external js files

For Java programs, framework = jar package + configuration file. For Vue, the Vue framework can be used by importing Vue's external js files .

2. Get the js file of the Vue framework

• Download location provided by the official website: 1 : https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  Description : This method directly opens the content in vue.js, you can create a vue.js first file, and then copy the content into this created file.
  
• Download address 2 provided by the official website : https://v2.cn.vuejs.org/v2/guide/installation.html
  
  Click to download respectively:
  

3. Create a vue.js file locally

Instruction 1 : Use HBuilderX to write vue.js

• Step 1: Create a project in HBuilderX

• Step 2: Create a script directory in the project directory to store the vue.js file

• Step 3: Create an empty vue.js file

• Step 4: Copy and paste the content of the vue.js file provided by the official website into the local vue.js file

Description 2 : Use idea to write vue.js

• Step 1: Create a java-web project in idea
  
• Step 2: Create a script directory in the web directory to store the vue.js file
• Step 3: Copy and paste the vue.js file provided by the official website into the local script directory
  

4. Create an HTML document and introduce vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script language="JavaScript" src="script/vue.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

Section 3 Basic Grammar: Declarative Rendering

1. Concept

1.1. Declarative

『声明式』is relative 『编程式』.

• Declarative: tell the framework what to do, and the specific operation is done by the framework
• Programmatic: Write your own code to complete specific operations

1.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

2、demo

2.1. Two ways to define js objects

Explanation : You can see that there are two ways to create objects in js. The js code does not need to import the vue.js file. This is to compare the following ways to create Vue objects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function hello(){
      
      
        person.sayHello();
    }

    //定义js对象方式一：
    /*
    var person = new Object();
    person.pid = "p001";
    person.pname="jim";
    person.sayHello = function(){
        alert("HELLO world");
    }
    */
    //定义js对象方式二：
    var person = {
      
      
        "pid":"p001",
        "pname":"jim",
        "sayHello":function(){
      
      
            alert("HELLO world");
        }
    };
</script>
<div id="div0">
    <span>HELLO</span>
    <input type="button" value="打招呼" onclick="hello()"/>
</div>
</body>
</html>

2.2, vue declarative rendering

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

           /* new Vue({xxx}):创建Vue对象，里面的key加不加引号都可以。每个键值对
                             使用逗号隔开，最后一个不用加逗号，里面的参数为{xxx}
                             可以理解为一个对象
                             
                el: 用于指定Vue对象要关联的HTML元素。el就是element的缩写
                    通过id属性值指定HTML元素时，语法格式是：#id (选择器)
                data: 设置了Vue对象中保存的数据
            */
            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    msg:"hello!!!"
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <!-- 使用{
    
    {}}格式，指定要被渲染的数据 -->
    <span>{
   
   {msg}}</span>
</div>
</body>
</html>

illustrate:

• elSpecify the selector through the attribute "#app"to bind id="app"the div tag of the attribute value.
• Binding is done by datasetting attributes messageand tags { {message}}.
  

3. View the responsive effect of declarative rendering

Run the test:

Modify the value of the msg attribute:

By verifying the effect of the Vue object 『响应式』, we can see that the Vue object and the HTML tags on the page are indeed always related , and at the same time, we can see that Vue has indeed done a lot of work behind the scenes.

Section 4 Basic Syntax: Binding Element Attributes

1. Basic grammar

v-bind:HTML标签的原始属性名

2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            /* new Vue({xxx}):创建Vue对象，里面的key加不加引号都可以。里面的参数为{xxx}可以理解为一个对象
                 el: 用于指定Vue对象要关联的HTML元素。el就是element的缩写
                     通过id属性值指定HTML元素时，语法格式是：#id (选择器)
                 data: 设置了Vue对象中保存的数据
             */
            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    msg:"hello!!!aaaaaaaa",
                    uname:"鸠摩智"
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <!-- 使用{
    
    {}}格式，指定要被渲染的数据 -->
    <span>{
   
   {msg}}</span>
    <!--  <input type="text" v-bind:value="uname"/>
          v-bind:value表示绑定value属性 , v-bind可以省略，也就是 :value
          注意：
             在标签体内通过{
    
    {}}告诉Vue这里需要渲染
             在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染
        -->
    <input type="text" :value="uname"/>
</div>
</body>
</html>

3. Summary

Essentially, v-bind:属性名="表达式"both { {}}of them use Vue objects to render pages. only:

• Text tag body: use { {}} form
• Attribute: use v-bind: attribute name = "expression" form

Section 5 Basic Syntax: Two-Way Data Binding

1. Ask questions

After using two-way binding, it can be realized: after the data on the page is modified, the data attributes in the Vue object are also modified.

2、demo

2.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    msg:"hello!!!aaaaaaaa"
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span>{
   
   {msg}}</span><br/>
    <!--
    v-model指的是双向绑定，
    也就是说之前的v-bind是通过msg这个变量的值来控制input输入框
    现在 v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值
    <input type="text" v-model:value="msg"/>,:value可以省略
    -->
    <input type="text" v-model="msg"/>
</div>
</body>
</html>

2.2. Page effect

The data in the p tag can be modified synchronously with the data in the text box :

• The msg in the input tag is bound to the msg attribute in the Vue object, and the msg attribute is bound to the {{msg}} value in the span tag , so modify the value in the tag on the page and the { {msg}} value in the span tag Also follow the change.

3. Remove the leading and trailing spaces

3.1, trim modifier

In actual development, it is necessary to consider that the user may include leading and trailing spaces when inputting data. And these spaces before and after are interference factors for the operation of our program and should be removed. It can be achieved by adding modifiers after v-model .trim.

    <!--trim可以去除首尾空格-->
    <input type="text" v-model.trim="msg"/>

Vue will help us automatically remove leading and trailing spaces when the text box loses focus.
Before adding:

After adding:

Section 6 Basic Syntax: 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.

1、v-if

1.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    num:2
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num"/>
    <!-- v-if表示里面的条件成立才能够绑定，即：如果num除以2的余数为0才成立-->
    <div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;">&nbsp;</div>
</div>
</body>
</html>

1.2, run the test

Note : Since num is bound to the attribute inputof the tag v-model="num"and the attribute of the div tag at the same time v-if="num%2==0", 奇数、偶数the display effect will also change when input in the text box.

2、v-if和v-else

2.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    num:2
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num"/>
    <!-- 表示如果条件成立绑定v-if中的，如果条件不成立绑定v-else中的-->
    <!-- v-if和v-else之间不可以插入其他节点/标签 -->
    <div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;">&nbsp;</div>
    <div v-else="num%2==0" style="width:200px;height:200px;background-color: coral">&nbsp;</div>
</div>
</body>
</html>

2.2, run the test

3、v-show

3.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    num:2
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num"/>
    <!-- 表示如果条件成立绑定v-if中的，如果条件不成立绑定v-else中的-->
    <!-- v-if和v-else之间不可以插入其他节点/标签 -->
    <div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;">&nbsp;</div>
    <div v-else="num%2==0" style="width:200px;height:200px;background-color: coral">&nbsp;</div>

    <!-- v-show -->
    <!-- v-show是通过display属性来控制这个div是否显示，标签还在只不过不满足时设置了属性为display:none ，
         上面使用v-if属性，如果不满足连这个div标签都没有了-->
    <div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;">&nbsp;</div>

</div>
</body>
</html>

3.2, run the test

Section 7 Basic Syntax: List Rendering

1. Iterate over a simple array

1.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    "fruitList": [
                        "apple",
                        "banana",
                        "orange",
                        "grape",
                        "dragonfruit"
                    ]
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <ul>
        <!-- 使用v-for语法遍历数组 -->
        <!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
        <!-- 在文本标签体中使用{
    
    {引用数组元素的变量名}}渲染每一个数组元素 -->
        <li v-for="fruit in fruitList">{
   
   {fruit}}</li>
    </ul>
</div>
</body>
</html>

1.2, run the test

2. Iterate over an array of objects

2.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                "data":{
      
      
                    fruitList:[   //这是一个数组，里面存的是一个个的对象
                        {
      
      fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
                        {
      
      fname:"菠萝",price:3,fcount:120,remark:"菠萝很好吃"},
                        {
      
      fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},
                        {
      
      fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}
                    ]
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <table border="1" width="400" cellpadding="4" cellspacing="0">
        <tr>
            <th>名称</th>
            <th>单价</th>
            <th>库存</th>
            <th>备注</th>
        </tr>
        <!-- v-for表示迭代：循环迭代fruitList数组，把每个值赋值给fruit-->
        <tr align="center" v-for="fruit in fruitList">
            <td>{
   
   {fruit.fname}}</td>
            <td>{
   
   {fruit.price}}</td>
            <td>{
   
   {fruit.fcount}}</td>
            <td>{
   
   {fruit.remark}}</td>
        </tr>
    </table>
</div>
</body>
</html>

2.2, run the test

Section 8 Basic Grammar: Event Driven

1. demo: reverse the order of strings

1.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                data:{
      
      
                    msg:"hello world!"
                },
                //在methods属性中用来声明事件的方法
                methods:{
      
       
                    myReverse:function(){
      
      
                       
                        /* this.msg：获取到msg
                         * .split(",")：表示按逗号分隔
                         * .split(" ")：表示按空格分隔
                         * .split("")：里面是一个字符串连空格都没有，表示把每个数据都分隔开
                         * .reverse()：反转，取到之后每个都反转
                         * .join("")：连接，反转之后在连在一起
                         * 最后赋值给 this.msg
                         * */
                        this.msg = this.msg.split("").reverse().join("");
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span>{
   
   {msg}}</span><br/>
    <!-- v-on:click 表示绑定点击事件，v-on:事件类型="事件响应函数的函数名"
         注意这个 myReverse不要写括号()，当点击这个按钮时会调用myReverse对应的方法-->
    <!-- v-on可以省略，变成 @click -->
    <!--<input type="button" value="反转" v-on:click="myReverse"/>-->
    <input type="button" value="反转" @click="myReverse"/>
</div>
</body>
</html>

1.2, run the test

2. demo: Obtain the coordinate information when the mouse moves

2.1, page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                data:{
      
      
                    "position":"暂时没有获取到鼠标的位置信息"
                },
                "methods":{
      
      
                    "recordPosition":function(event){
      
      
                        this.position = event.clientX + " " + event.clientY;
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <input type="button" value="鼠标坐标"  v-on:mousemove="recordPosition"/>
    <p id="showPosition">{
   
   {position}}</p></div>
</body>
</html>

2.2, run the test

Section 9 Basic Syntax: Listening Attributes

1. Page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                data:{
      
      
                    num1:1,
                    num2:2,
                    num3:0
                },
                //在watch属性中声明对num1和num2属性进行『侦听』的函数
                watch:{
      
      
                    //侦听属性num1和num2
                    //当num1的值有改动时，那么需要调用后面定义的方法 , newValue指的是num1的新值(页面文本框输入的值)
                    //parseInt()解析为int类型，不用的话是字符串类型结果显示字符串拼接
                    num1:function(newValue){
      
      
                        this.num3 = parseInt(newValue) + parseInt(this.num2);
                    },
                    num2:function(newValue){
      
      
                        this.num3 = parseInt(this.num1) + parseInt(newValue) ;
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num1" size="2"/>
    +
    <input type="text" v-model="num2" size="2"/>
    =
    <span>{
   
   {num3}}</span>
</div>
</body>
</html>

2. Run the test

Exercise 10

1. Demonstration of functional effects

2. Task dismantling

• Step 1: Display the form
• Step 2: Display four text boxes
• Step 3: Create a p tag to display the content entered by the user in the text box in real time
• Step 4: Click the Add Record button to add the record

3. The first step: display the table

3.1. HTML tags

<table id="appTable">
	<tr>
		<th>编号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>专业</th>
	</tr>
	<tr v-for="employee in employeeList">
		<td>{
   
   {employee.empId}}</td>
		<td>{
   
   {employee.empName}}</td>
		<td>{
   
   {employee.empAge}}</td>
		<td>{
   
   {employee.empSubject}}</td>
	</tr>
</table>

3.2, Vue code

var appTable = new Vue({
    
    
	"el": "#appTable",
	"data": {
    
    
		"employeeList": [{
    
    
				"empId": 1,
				"empName": "tom",
				"empAge": 11,
				"empSubject": "java"
			},
			{
    
    
				"empId": 2,
				"empName": "jerry",
				"empAge": 22,
				"empSubject": "php"
			},
			{
    
    
				"empId": 3,
				"empName": "peter",
				"empAge": 33,
				"empSubject": "python"
			}
		]
	}
});

4. The second step: display four text boxes

4.1. HTML tags

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv">
	
	<!-- 第一部分：四个文本框 -->
	编号：<input type="text" v-model="empId" /><br/>
	姓名：<input type="text" v-model="empName" /><br/>
	年龄：<input type="text" v-model="empAge" /><br/>
	专业：<input type="text" v-model="empSubject" /><br/>
	
	<!-- 第二部分：显示收集到的文本框数据的p标签 -->
	
	<!-- 第三部分：按钮 -->
	
</div>

4.2, Vue code

var appDiv = new Vue({
    
    
	"el":"#appDiv",
	"data":{
    
    
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	}
});

The way to test whether it is correct is to try to modify the data attribute value of the Vue object in the console:

5. Step 3: Create a p tag

HTML tags:

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv">
	
	<!-- 第一部分：四个文本框 -->
	编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>
	姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>
	年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>
	专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/>
	
	<!-- 第二部分：显示收集到的文本框数据的p标签 -->
	<p>{
   
   {empId}} {
   
   {empName}} {
   
   {empAge}} {
   
   {empSubject}}</p>
	
	<!-- 第三部分：按钮 -->
	
</div>

6. Step 4: Click the Add Record button

6.1, the first small step: set event-driven for the button

[1] HTML tags

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv">
	
	<!-- 第一部分：四个文本框 -->
	编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>
	姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>
	年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>
	专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/>
	
	<!-- 第二部分：显示收集到的文本框数据的p标签 -->
	<p>{
   
   {empId}} {
   
   {empName}} {
   
   {empAge}} {
   
   {empSubject}}</p>
	
	<!-- 第三部分：按钮 -->
	<button type="button" v-on:click="addRecord">添加记录</button>
	
</div>

[2] Vue code

var appDiv = new Vue({
    
    
	"el":"#appDiv",
	"data":{
    
    
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	},
	"methods":{
    
    
		"addRecord":function(){
    
    
			console.log("我点击了那个按钮……");
		}
	}
});

6.2, the second small step: print the data entered in the text box

var appDiv = new Vue({
    
    
	"el":"#appDiv",
	"data":{
    
    
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	},
	"methods":{
    
    
		"addRecord":function(){
    
    
			console.log("我点击了那个按钮……");
			console.log(this.empId);
			console.log(this.empName);
			console.log(this.empAge);
			console.log(this.empSubject);
		}
	}
});

6.3, the third small step: add the collected data to the form

"addRecord":function(){
    
    
	
	// 确认单击事件是否绑定成功
	console.log("我点击了那个按钮……");
	
	// 确认是否能够正确收集到文本框数据
	console.log(this.empId);
	console.log(this.empName);
	console.log(this.empAge);
	console.log(this.empSubject);
	
	// 将收集到的文本框数据封装为一个对象
	var employee = {
    
    
		"empId":this.empId,
		"empName":this.empName,
		"empAge":this.empAge,
		"empSubject":this.empSubject
	};
	
	// 将上面的对象压入表格数据的employeeList数组
	appTable.employeeList.push(employee);
}

Section 11 Vue object life cycle

1. Concept

『生命周期』It's a very common concept in the world of programming in our various languages . An object will undergo many stages of evolution from creation, initialization, work to release, cleanup, and destruction. For example, we have learned the life cycle of threads in the JavaSE stage, today we will learn the life cycle of Vue objects, and in the future we will learn the life cycles of Web components such as Servlet and Filter.

2. The life cycle of Vue objects

3. Life cycle hook function

Vue allows us to add our code through hook functions in specific life cycle links.

Hook function : The hook function captures an event at the system level when it is triggered, and then performs some operations. A program that handles system messages. "Hook" is to give you a chance to do some processing at a certain stage.

Features :

• Is a function that is called by the system when a system message is triggered
• not triggered by the user
• Write the function body directly when using
• The name of the hook function is determined, and it will be called automatically when the system message is triggered.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
      
      //文档就绪事件函数

            var vue = new Vue({
      
      
                el:"#div0",
                data:{
      
      
                    msg:1
                },
                methods:{
      
      
                    changeMsg:function(){
      
      
                        this.msg = this.msg + 1 ;
                    }
                },
                /*vue对象创建之前*/
                beforeCreate:function(){
      
      
                    console.log("beforeCreate:vue对象创建之前---------------");
                    console.log("msg:"+this.msg);
                },
                /*vue对象创建之后*/
                created:function(){
      
      
                    console.log("created:vue对象创建之后---------------");
                    console.log("msg:"+this.msg);
                },
                /*数据装载之前*/
                beforeMount:function(){
      
      
                    console.log("beforeMount:数据装载之前---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据装载之后*/
                mounted:function(){
      
      
                    console.log("mounted:数据装载之后---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                beforeUpdate:function(){
      
      
                    console.log("beforeUpdate:数据更新之前---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                },
                updated:function(){
      
      
                    console.log("Updated:数据更新之后---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span id="span">{
   
   {msg}}</span><br/>
    <input type="button" value="改变msg的值" @click="changeMsg"/>
</div>
</body>
</html>

Access testing:

Section 1 Ajax overview

Section 2 Axios basic usage