013-Vue-尚硅谷2022：前端框架概述，准备环境、绑定文本、单项/双向/按条件绑定属性、遍历、点击事件：字符串反转鼠标移动、监听属性、练习、生命周期

清风微凉 aaa

已于 2024-01-18 01:27:51 修改

阅读量500

点赞数

分类专栏：三、JavaWEB阶段文章标签： javascript 前端开发语言

于 2023-03-14 19:54:23 首次发布

本文链接：https://blog.csdn.net/aa35434/article/details/129530252

版权

三、JavaWEB阶段专栏收录该内容

17 篇文章 3 订阅

订阅专栏

本文介绍了Vue.js的基本概念和语法，包括常见的前端框架、Vue.js的声明式渲染、数据绑定、双向数据绑定、条件渲染、列表渲染和事件驱动。还详细讲解了Vue对象的生命周期及其生命周期钩子函数的使用，展示了如何在不同阶段执行特定任务。此外，文章通过实例演示了如何创建Vue对象、操作数据以及监听属性变化，帮助读者深入理解Vue.js的工作原理和开发实践。

摘要由CSDN通过智能技术生成

前端框架概述

1、常见的js框架

说明：js框架底层封装的都是js。

在这里插入图片描述

2、常见的ui框架

概述：

ui是用户界面的英文简称，那么ui框架又是什么呢?框架又可以理解为模板，ui框架也就是ui模板。这和编程里的封装有些类似，就是说一些ui设计的常用效果已经被别人封装成了ui框架，你想实现哪个效果只要直接调用就行，不需要太纠结于底层实现。

第一节 Vue.js简介

1、框架

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

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

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

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

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

用洗衣服来类比框架：
典型应用场景：洗衣服
输入数据：衣服、洗衣液、水
不使用框架：手洗
使用框架：使用洗衣机，对人来说，只需要按键，具体操作是洗衣机完成的。人只是告诉洗衣机做什么，具体的操作是洗衣机完成的。

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

2、Vue.js

2.1、Vue.js的作者

在为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、Vue.js的官网介绍

Vue.js官网网址：https://cn.vuejs.org/

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

总结：

Vue是一套前端框架，免除原生JavaScript（js）中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
单向展示：只能把模型中的数据取出来放到视图中单向展示
- 缺点1：只能单方向的把数据从模型中取出放到视图层展示
- 缺点2：只能实现展示而不是绑定（之前使用js或jquery需要先获取Dom对象，在通过对象获取属性值来展示数据，一旦模型数据发生改变那么js代码也会发生变化。现在使用Vue可以实现绑定，将来模型数据发生变化视图中的数据也会跟着变化，不需要修改任何代码）
双向绑定：通过View提供的一个对象(ViewModel)将View(html元素)和Model(数据)实现双向绑定，对象(ViewModel)是框架提供的功能不需要我们自己实现。
- 即：模型变了视图跟着变，视图变了模型跟着变。而且这些变化都是自动完成的。

在这里插入图片描述

第二节准备Vue.js环境

1、开发中的最佳实践

『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。

Java语言的程序包：jar包
JavaScript语言的程序包：外部js文件

对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。

2、Vue框架的js文件获取

官网提供的下载地:1：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
说明：这种方式直接打开的是vue.js里面的内容，可以先创建一个vue.js文件，之后把内容复制到这个创建的文件中。
官网提供的下载地址2：https://v2.cn.vuejs.org/v2/guide/installation.html

分别点击下载：

3、本地创建vue.js文件

说明1：使用HBuilderX编写vue.js

第一步：在HBuilderX中创建工程
第二步：在工程目录下创建script目录用来存放vue.js文件
第三步：创建空vue.js文件
第四步：将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

说明2：使用idea编写vue.js

第一步：在idea中创建java-web工程
第二步：在web目录下创建script目录用来存放vue.js文件
第三步：将官网提供的vue.js文件复制粘贴到本地的script目录中

4、创建HTML文档并引入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>

第三节基本语法：声明式渲染

1、概念

1.1、声明式

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

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

1.2、渲染

在这里插入图片描述
上图含义解释：

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

2、demo

2.1、定义js对象的2种方式

说明：可以看到js有2种创建对象方式，写的是js代码不用引入vue.js文件，这是为了对比下面创建Vue对象的方式。
在这里插入图片描述

<!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(){ //冒号以及之后的function可以省略
            alert("HELLO world");
        }
    };
</script>
<div id="div0">
    <span>HELLO</span>
    <input type="button" value="打招呼" onclick="hello()"/>
</div>
</body>
</html>

2.2、vue声明式渲染（创建vue对象，绑定文本）

在这里插入图片描述

<!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>

说明：

通过el属性指定选择器"#app"，来绑定属性值id="app"的div标签。
通过data设置属性message和标签中的{{message}}进行绑定。

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

运行测试：
在这里插入图片描述

在这里插入图片描述
修改msg属性的值：

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

第四节基本语法：绑定元素属性

1、基本语法

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、小结

本质上，v-bind:属性名="表达式"和{{}}它们都是用Vue对象来渲染页面。只不过：

文本标签体：使用{{}}形式
属性：使用v-bind:属性名="表达式"形式

第五节基本语法：双向数据绑定

1、提出问题

在这里插入图片描述

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

2、demo

2.1、页面代码

在这里插入图片描述

<!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、页面效果

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

input 标签内的msg绑定了Vue对象中的msg属性，msg属性又绑定了span标签内的{{msg}}值，所以在页面修改标签中的值span标签中的{{msg}}值也跟着变化。

在这里插入图片描述

3、去除前后空格

3.1、trim修饰符

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

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

Vue会帮助我们在文本框失去焦点时自动去除前后空格。
没加之前：
在这里插入图片描述
加了之后：

第六节基本语法：条件渲染

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

1、v-if

1.1、页面代码

在这里插入图片描述

<!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、运行测试

说明：由于num同时绑定了input标签的v-model="num"属性和div标签的v-if="num%2==0"属性，所以在文本框输入奇数、偶数，显示效果也跟着变化。

在这里插入图片描述

2、v-if和v-else

2.1、页面代码

在这里插入图片描述

<!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、运行测试

在这里插入图片描述

3、v-show

3.1、页面代码

在这里插入图片描述


<!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、运行测试

在这里插入图片描述

第七节基本语法：列表渲染

1、迭代一个简单的数组

1.1、页面代码

在这里插入图片描述

<!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>

        <hr>
        <!-- 使用v-for语法遍历数组：方式二 -->
        <!-- fruit：遍历出的元素
             index：每次遍历的索引，索引从0开始。
                  {{index}}：可以获取到当前遍历的索引
            fruitList：需要遍历的数组-->
        <li v-for="(fruit,index) in fruitList">{{index}}:{{fruit}}</li>

        <hr>

        <!--插值表达式可以进行算术计算：
           {{index+1}}：默认索引从0开始。加上1表示显示的索引值从1开始，但还是从0开始遍历-->
        <li v-for="(fruit,index) in fruitList">{{index+1}}:{{fruit}}</li>
    </ul>
</div>
</body>
</html>

1.2、运行测试

在这里插入图片描述

2、迭代一个对象数组

2.1、页面代码

在这里插入图片描述

<!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>-->

        <!-- 方式二(可以拿到索引)：v-for表示迭代：循环迭代fruitList数组，把每个值赋值给fruit-->
        <tr align="center" v-for="(fruit,index) 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、运行测试

在这里插入图片描述

第八节基本语法：事件驱动

1、demo：字符串顺序反转

1.1、页面代码（方法属性methods）

在这里插入图片描述

<!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、运行测试

在这里插入图片描述

2、demo：获取鼠标移动时的坐标信息

2.1、页面代码

在这里插入图片描述

<!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、运行测试

在这里插入图片描述

第九节基本语法：侦听属性

1、页面代码

在这里插入图片描述

<!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、运行测试

在这里插入图片描述

第十节练习

1、功能效果演示

在这里插入图片描述

2、任务拆解

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

3、第一步：显示表格

3.1、HTML标签

<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代码

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、第二步：显示四个文本框

4.1、HTML标签

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个元素中 -->
<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代码

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

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

./images

5、第三步：创建一个p标签

HTML标签：

<!-- 四个文本框、显示收集到的文本框数据的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、第四步：点击添加记录按钮

6.1、第一小步：给按钮设置事件驱动

[1]HTML标签

<!-- 四个文本框、显示收集到的文本框数据的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代码

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

./images

6.2、第二小步：打印一下文本框输入的数据

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);
		}
	}
});

./images

6.3、第三小步：将收集到的数据添加到表格中

"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);
}

./images

第十一节 Vue对象生命周期

1、概念

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

2、Vue对象的生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子方法)。
知道Vue的生命周期后，可以干些什么？？？
- 知道Vue的生命周期后，就可以在指定的声明周期内来做指定的事情。我们主要掌握的就是mounted，通常会在这个方法中发送请求到服务端，来获取服务端的数据。
- mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
  - 总结：mounted钩子函数和之前学习的文档就绪时间函数一样，在页面加载完成执行，可以在此方法中发送axios请求到服务端，来获取服务端的数据。
官方执行流程：

3、生命周期钩子函数

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

钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。

特点：

是个函数，在系统消息触发时被系统调用
不是用户自己触发的
使用时直接编写函数体
钩子函数的名称是确定的，当系统消息触发，自动会调用。

在这里插入图片描述

<!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>

访问测试：
在这里插入图片描述

清风微凉 aaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
013-Vue-尚硅谷2022：前端框架概述，准备环境、绑定文本、单项/双向/按条件绑定属性、遍历、点击事件：字符串反转鼠标移动、监听属性、练习、生命周期

Vue.js官网网址Vue (读音 /vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。总结Vue是一套前端框架，免除原生JavaScript（js）中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的。
复制链接

扫一扫