• 四、Vue

    第二章 Vue

    1. 目标

    • 了解什么是框架
    • 了解什么是Vue
    • 掌握Vue的基本语法
    • 了解Vue的生命周期

    2. 内容

    2.1 什么是框架

    任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。

    于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。

    在使用框架的过程中，往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。

    对于Java程序来说，使用框架就是导入那些封装了『固定解决方案』的jar包，然后通过『配置文件』告诉框架做什么，就能够大大简化编码，提高开发效率。junit其实就是一款单元测试框架。

    而对于JavaScript程序来说，使用框架就是导入那些封装了『固定解决方案』的『js文件』，然后在框架的基础上编码。

    用洗衣服来类比框架：

    典型应用场景：洗衣服

    输入数据：衣服、洗衣液、水

    不使用框架：手洗

    使用框架：使用洗衣机，对人来说，只需要按键，具体操作是洗衣机完成的。人只是告诉洗衣机做什么，具体的操作是洗衣机完成的。

    实际开发中使用框架时，也主要是告诉框架要做什么，具体操作是框架完成的。

    2.2 Vue的简介
    2.2.1 Vue的作者介绍

    在为AngularJS工作之后，Vue的作者尤雨溪开Vue.js。他声称自己的思路是提取Angular中自己喜欢的部分，构建出一款相当轻量的框架。

    Vue最早发布于2014年2月。作者在Hacker News、Echo JS与 Reddit的JavaScript版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。

    Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中， Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

    2.2.2 Vue的官网介绍

    Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

    **官网地址:**https://cn.vuejs.org/

    2.3 准备Vue.js环境

    1. Vue框架的js文件获取

      官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

    2. 创建空vue.js文件,将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

    2.4 Vue的入门案例

    1. 创建工程,导入vue.js文件放入工程的js文件夹中

    2. 创建demo01.html(引入vuejs,定义div,创建vue实例)

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的入门title>
    
    <script src="../js/vue.js">script>
head>
<body>
    
    <div id="app">
        <div>{{city}}div>
    div>
    <script>
        var vue = new Vue({
            "el":"#app",
            "data":{
                "city":"武汉"
            }
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    2.5 声明式渲染
    2.5.1 概念
    2.5.1.1 声明式

    『声明式』是相对于『编程式』而言的。

    • 声明式：告诉框架做什么，具体操作由框架完成
    • 编程式：自己编写代码完成具体操作
    2.5.1.2 渲染

    在这里插入图片描述

    上图含义解释：

    • 蓝色方框：HTML标签
    • 红色圆形：动态、尚未确定的数据
    • 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
    • 渲染：程序计算动态数据得到具体数据的过程
    2.5.2 案例

    HTML代码

    {}}格式，指定要被渲染的数据 -->
<div id="app">{{message}}div>

    • 1
    • 2

    vue代码

    // 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
	
	// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	// 通过id属性值指定HTML元素时，语法格式是：#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    2.5.3 查看声明式渲染的响应式效果

    在这里插入图片描述

    通过验证Vue对象的『响应式』效果，看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系，同时看到Vue在背后确实是做了大量的工作。

    2.6 绑定文本
    2.6.1 基本语法

    v-text=“要绑定的数据模型”

    2.6.2 案例代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue绑定文本title>
    
    <script src="../js/vue.js">script>
head>
<body>

<div id="app">
    
    <div v-text="city">div>
    <div>{{city}}div>
div>

<script>
    var vue = new Vue({
        "el":"#app",
        "data":{
            "city":"武汉"
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    2.7 绑定元素属性
    2.7.1 基本语法

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

    2.7.2 案例代码

    HTML代码

    <div id="app">
    
    <input type="text" :id="idValue" :value="inputValue"/>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "inputValue":"张三疯",
        "idValue":1
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    扩展:

    v-bind:属性名="属性值"可以简写成 :属性名=“属性值”

    2.8 双向数据绑定
    2.8.1 提出问题

    在这里插入图片描述

    而使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。

    2.8.2 案例代码

    HTML代码

    <div id="app">
    
    <input type="text" v-model="inputValue"/>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "inputValue":"张三疯"
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    页面效果

    p标签内的数据能够和文本框中的数据实现同步修改：

    在这里插入图片描述

    扩展:

    1. v-model:value=“值” 可以简写成 v-model=“值”

    2. trim修饰符

    实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。

    <input type="text" v-model.trim="vueValue" />

    • 1

    Vue会在文本框失去焦点时自动去除前后空格。

    2.9 条件渲染

    根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。

    2.9.1 v-if

    HTML代码

    <div id="app">
    
    <img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "isShow":false
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    2.9.2 v-if和v-else

    HTML代码

    <div id="app">
    
    <img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
    <img v-else="isShow" src="../img/girl.jpg">
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "isShow":true
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    2.9.3 v-show

    HTML代码

    <div id="app03">
	<h3>v-showh3>
	<img v-show="flag" src="/pro03-vue/images/mi.jpg" />
div>

    • 1
    • 2
    • 3
    • 4

    Vue代码

    var app03 = new Vue({
    "el":"#app03",
    "data":{
        "flag":true
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    2.10 列表渲染
    2.10.1 迭代一个简单的数组

    HTML代码

    <div id="app01">
	<ul>
		
		
		{引用数组元素的变量名}}渲染每一个数组元素 -->
		<li v-for="fruit in fruitList">{{fruit}}li>
	ul>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Vue代码

    var app01 = new Vue({
	"el":"#app01",
	"data":{
		"fruitList": [
			"apple",
			"banana",
			"orange",
			"grape",
			"dragonfruit"
		]
	}
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    2.10.2 迭代一个对象数组

    HTML代码

    <style type="text/css">
        /*设置样式*/
        table,th,td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
style>

<div id="app">
	<table>
		<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>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    Vue代码

    var app = new Vue({
	"el":"#app",
	"data":{
		"employeeList":[
			{
				"empId":11,
				"empName":"tom",
				"empAge":111,
				"empSubject":"java"
			},
			{
				"empId":22,
				"empName":"jerry",
				"empAge":222,
				"empSubject":"php"
			},
			{
				"empId":33,
				"empName":"bob",
				"empAge":333,
				"empSubject":"python"
			}
		]
	}
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    2.11 事件驱动
    2.11.1 案例一: 字符串顺序反转

    HTML代码

    <div id="app">
    <div v-text="message">div>
    
    <button type="button" @click="fn1()">按钮button>
    <button type="button" @click="reverseMessage()">反转字符串button>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "message":"Hello world"
    },
    "methods":{
        //vue的函数都是声明在methods里面的
        fn1(){
            alert("我被点击了...")
        },
        reverseMessage(){
            //将div中的内容进行反转,也就是将message反转
            //1. 将message通过空字符串切割成一个数组
            //this.message
            var arr = this.message.split(""); //["H","e","l","l","o"," ","w","o","r","l","d"]
            //2. 将数组反转
            var reverseArr = arr.reverse(); //["d","l","r","o","w"," ","o","l","l","e","H"]
            //3. 通过空字符串将数组拼接成一个字符串
            this.message = reverseArr.join("")
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    2.11.2 案例二:获取鼠标移动时的坐标信息

    HTML代码

    
<style>
    #area{
        width: 500px;
        height: 500px;
        border: 1px solid black;
    }
style>
<div id="app">
    
    <div id="area" @mousemove="recordPosition()">div>

    
    <p v-text="pointPosition">p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "pointPosition":"还未获取到鼠标的坐标"
    },
    "methods":{
        recordPosition(){
            //在这里就要获取鼠标的坐标
            //event表示当前事件
            this.pointPosition = event.clientX+","+event.clientY
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    扩展:

    v-on:事件名="函数"可以简写成@事件名=“函数”

    2.11.3 取消控件的默认行为
    2.10.3.1 控件默认行为
    • 点超链接会跳转页面
    • 点表单提交按钮会提交表单

    本来控件的默认行为是天经地义就该如此的，但是如果希望点击之后根据判断的结果再看是否要跳转，此时默认行为无脑跳转的做法就不符合预期了。

    2.11.3.2 取消方式

    调用事件对象的**preventDefault()**方法。

    超链接举例

    HTML代码：

    <div id="app">
    <a href="https://www.baidu.com" @click="fn1()">跳转到百度a>
div>

    • 1
    • 2
    • 3

    Vue代码：

    var vue = new Vue({
    "el":"#app",
    "data":{

    },
    "methods":{
        fn1(){
            console.log("hello world...")


            //阻止控件的默认行为
            event.preventDefault()
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    表单提交按钮举例

    HTML代码：

    <div id="app">
    <form action="https://www.baidu.com" method="get">
        用户名<input type="text" name="username"/><br/>
        <button type="submit" @click="fn2()">提交按钮button>
    form>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    JavaScript代码：

    var vue = new Vue({
    "el":"#app",
    "data":{

    },
    "methods":{
        fn2(){
            console.log("点击了表单的提交按钮...")

            event.preventDefault()
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    2.11.4 阻止事件冒泡

    在这里插入图片描述

    图中的两个div，他们的HTML标签是：

    
<style>
    #outer{
        width: 400px;
        height: 400px;
        background-color: lightskyblue;
    }

    #inner{
        width: 200px;
        height: 200px;
        background-color: lightgreen;
    }
style>
<div id="app">
    <div id="outer" @click="fn1()">
        <div id="inner" @click="fn2()">div>
    div>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    点击里面的div同时也等于点击了外层的div，此时如果两个div上都绑定了单击响应函数那么就都会被触发：

    所以事件冒泡就是一个事件会不断向父元素传递，直到window对象。

    如果这不是想要的效果那么可以使用事件对象的stopPropagation()函数阻止。

    var vue = new Vue({
    "el":"#app",
    "methods":{
        fn1(){
            console.log("外层的div被点击了...")
        },
        fn2(){
            console.log("内层的div被点击了...")

            //点击内层的div，只会让内层div触发事件，而不会传递到外层，这就是阻止事件的冒泡
            event.stopPropagation()
        }
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    2.11.5 Vue事件修饰符

    对于事件修饰符，Vue官网的描述是：

    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

    2.11.5.1 取消控件的默认行为

    控件的默认行为指的是：

    • 点击超链接跳转页面
    • 点击表单提交按钮提交表单

    实现这个需求使用的Vue事件修饰符是：.prevent

    <a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接a>

<form action="http://www.baidu.com" method="post">
	<button type="submit" @click.prevent="clickSubmitBtn">提交表单button>
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    2.10.5.2 取消事件冒泡

    实现这个需求使用的Vue事件修饰符是：.stop

    <div id="outterDiv" @click="clickOutterDiv">
	<div id="innerDiv" @click.stop="clickInnerDiv">div>
div>

    • 1
    • 2
    • 3
    2.12 侦听属性
    2.12.1 提出需求
    <div id="app">
	<p>尊姓：{{firstName}}p>
	<p>大名：{{lastName}}p>
	尊姓：<input type="text" v-model="firstName" /><br/>
	大名：<input type="text" v-model="lastName" /><br/>
	<p>全名：{{fullName}}p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在上面代码的基础上，希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。

    具体来说，所谓『侦听』就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用准备好的函数。

    2.12.2 Vue代码

    在watch属性中声明对firstName和lastName属性进行『侦听』的函数：

    var app = new Vue({
	"el":"#app",
	"data":{
		"firstName":"jim",
		"lastName":"green",
		"fullName":"jim green"
	},
	"watch":{
		"firstName":function(inputValue){
			this.fullName = inputValue + " " + this.lastName;
		},
		"lastName":function(inputValue){
			this.fullName = this.firstName + " " + inputValue;
		}
	}
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    2.13 案例练习
    2.13.1 功能效果演示

    在这里插入图片描述

    2.13.2 任务拆解
    • 第一步：显示表格
    • 第二步：显示四个文本框
    • 第三步：创建一个p标签用来显示用户在文本框中实时输入的内容
    • 第四步：点击添加记录按钮实现记录的添加
    2.13.3 第一步：显示表格

    HTML标签

    <table>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>年龄th>
        <th>专业th>
        <th>操作th>
    tr>
    <tr v-for="(emp,index) in employeeList">
        <td v-text="emp.empId">td>
        <td v-text="emp.empName">td>
        <td v-text="emp.empAge">td>
        <td v-text="emp.empSubject">td>
        <td>
            <button type="button">删除button>
        td>
    tr>
table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "employeeList":[
            {
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ]
    }  
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    2.13.4 第二步：点击删除按钮删除员工信息

    HTML标签

    <table>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>年龄th>
        <th>专业th>
        <th>操作th>
    tr>
    <tr v-for="(emp,index) in employeeList">
        <td v-text="emp.empId">td>
        <td v-text="emp.empName">td>
        <td v-text="emp.empAge">td>
        <td v-text="emp.empSubject">td>
        <td>
            <button type="button" @click="deleteEmployee(index)">删除button>
        td>
    tr>
table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "employeeList":[
            {
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ]
    },
    "methods":{
        deleteEmployee(i){
            //删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
            //在employeeList数组中要根据下标删除
            this.employeeList.splice(i,1)
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    2.13.5 第三步：绑定表单和员工信息

    HTML标签

    <div id="app">
    <table>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>年龄th>
            <th>专业th>
            <th>操作th>
        tr>
        <tr v-for="(emp,index) in employeeList">
            <td v-text="emp.empId">td>
            <td v-text="emp.empName">td>
            <td v-text="emp.empAge">td>
            <td v-text="emp.empSubject">td>
            <td>
                <button type="button" @click="deleteEmployee(index)">删除button>
            td>
        tr>
    table>

    <form>
        编号<input v-model="employee.empId" type="text"/><br/>
        姓名<input v-model="employee.empName" type="text"/><br/>
        年龄<input v-model="employee.empAge" type="text"/><br/>
        专业<input v-model="employee.empSubject" type="text"/><br/>
        <button type="button">添加员工信息button>
    form>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "employeeList":[
            {
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ],
        //数据模型绑定各个表单项的内容
        "employee":{
            "empId":"4",
            "empName":"赵六",
            "empAge":23,
            "empSubject":"Kotlin"
        }
    },
    "methods":{
        deleteEmployee(i){
            //删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
            //在employeeList数组中要根据下标删除
            this.employeeList.splice(i,1)
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    测试是否正确的方式是：在控制台尝试修改Vue对象的数据属性值：

    在这里插入图片描述

    2.13.6 点击添加记录按钮

    往表格中添加数据其实就是将表单上输入的数据this.employee加入到数组this.employeeList中

    添加完之后清空表单数据，其实就是设置this.employee= {}

    HTML标签

    <div id="app">
    <table>
        <tr>
            <th>编号th>
            <th>姓名th>
            <th>年龄th>
            <th>专业th>
            <th>操作th>
        tr>
        <tr v-for="(emp,index) in employeeList">
            <td v-text="emp.empId">td>
            <td v-text="emp.empName">td>
            <td v-text="emp.empAge">td>
            <td v-text="emp.empSubject">td>
            <td>
                <button type="button" @click="deleteEmployee(index)">删除button>
            td>
        tr>
    table>

    <form>
        编号<input v-model="employee.empId" type="text"/><br/>
        姓名<input v-model="employee.empName" type="text"/><br/>
        年龄<input v-model="employee.empAge" type="text"/><br/>
        专业<input v-model="employee.empSubject" type="text"/><br/>
        <button type="button" @click="insertEmployee()">添加员工信息button>
    form>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    Vue代码

    var vue = new Vue({
    "el":"#app",
    "data":{
        "employeeList":[
            {
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ],
        //数据模型绑定各个表单项的内容
        "employee":{
            "empId":"4",
            "empName":"赵六",
            "empAge":23,
            "empSubject":"Kotlin"
        }
    },
    "methods":{
        deleteEmployee(i){
            //删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
            //在employeeList数组中要根据下标删除
            this.employeeList.splice(i,1)
        },
        insertEmployee(){
            //1. 将表单的内容作为一行添加到表格中:就是将当前表单的数据加入到数组中作为employeeList数组的最后一个元素
            this.employeeList.push(this.employee)
            //2. 清空表单内容
            this.employee = {}
        }
    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    2.14 Vue的生命周期
    2.14.1 概念

    在各种语言的编程领域中，『生命周期』都是一个非常常见的概念。一个对象从创建、初始化、工作再到释放、清理和销毁，会经历很多环节的演变。比如在JavaSE阶段的过线程的生命周期，Vue对象的生命周期，将来还要学习Servlet、Filter等Web组件的生命周期。

    2.14.2 Vue对象的生命周期

    在这里插入图片描述

    2.14.3 生命周期钩子函数

    Vue允许在特定的生命周期环节中通过钩子函数来加入代码。

    <div id="app">
    <div id="d1">{{city}}div>
div>

    • 1
    • 2
    • 3
    var vue = new Vue({
    "el":"#app",
    "data":{
        "city":"武汉"
    },
    //Vue的钩子函数，其实就是可以在Vue的生命周期的特定阶段执行一些代码
    beforeCreate(){
        //输出数据模型city的值
        console.log("在beforeCreate钩子函数中获取city:"+this.city)
    },
    created(){
        //输出数据模型city的值
        console.log("在created钩子函数中获取city:"+this.city)
    },
    beforeMount(){
        //执行在虚拟视图替换真实视图之前,所以此时真实视图里面不会显示数据模型的数据
        console.log("在beforeMount钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
    },
    mounted(){
        //执行在虚拟视图替换真实视图之后,所以此时真实视图里面会显示数据模型的数据
        console.log("在mounted钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
  • 相关阅读:
    灵感乍现！造了个与众不同的Dubbo注册中心扩展轮子
    ARM64汇编06 - 基本整型运算指令
    入户的第一眼，玄关设计小技巧！福州中宅装饰，福州装修
    公司金融期末考试题
    解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
    【MySQL面试复习】谈一谈你对SQL的优化经验
    Service Worker cache 相比 HTTP cache 的一些优点
    2023.10.7 Java 创建线程的七种方法
    【人工智能】机器学习入门之监督学习（一）有监督学习
    上半年收入超耐克中国、大于两个李宁，安踏领跑背后的韧性
  • 原文地址：https://blog.csdn.net/LMY0210/article/details/126897956