Vue入门与实战：数据绑定与生命周期应用-CSDN博客

本文链接：https://blog.csdn.net/hariya/article/details/125280223

VUE&案例测试

学习目标
学习内容
学习产出
1 VUE
2 案例
- 2.1 查询所有
- 2.2 增加

学习目标

能够使用VUE中常用指令和插值表达式
能够使用VUE生命周期函数 mounted

学习内容

能够使用VUE中常用指令和插值表达式
能够使用VUE生命周期函数 mounted

学习产出

1 VUE

1.1 概述

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM Model-View-ViewModel思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网地址

这个图就是MVC思想图解，不能做到视图和模型相互的去绑定。当模型的数据产生变化时，视图的数据无法随着变化，必须修改视图的代码，相当于做的是一个展示而不是绑定。绑定后当模型发生改变，视图也会随着变化。

而MVVM则可以实现数据的双向绑定。

1.1 Vue快速入门

1.新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，进行数据绑定

   new Vue({
       el: "#app",
       data() {
           return {
               username: ""
           }
       }
   });

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：用来定义数据模型
methods ：用来定义函数。这个我们在后面就会用到

编写视图

   <div id="app">
       <input name="username" v-model="username" >
       {{username}}
   </div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){  // data() 是 ECMAScript 6 版本的新的写法
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

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

1.2 Vue常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用的指令有：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1.2.1 v-bind 指令

新建一个Vue-v-bind-demo2.html，来测试v-bind，div中

<div id="demo1">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input type="text" v-model="url">
</div>

javaScript中

<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo1",
    data(){
      return{
        username:"",
          url:"https://www.baidu.com"
      }
    }

/*    data:function (){
      return {
        username:""
      }
    }*/
  });
</script>

总体代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>zpd</title>
</head>
<body>
<div id="demo1">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input type="text" v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo1",
    data(){
      return{
        username:"",
          url:"https://www.baidu.com"
      }
    }

/*    data:function (){
      return {
        username:""
      }
    }*/
  });
</script>
</body>
</html>

结果演示

可以修改inout框中的网址，对应a标签的href也会发生改变。

1.2.2 v-on 指令

为HTML绑定事件，创建一个Vue-v-on-demo3.html，来测试v-on

div代码

<div id="demo">
    <input type="button" value="一个按钮" v-on:click="show()">
    <input type="button" value="一个按钮" @click="show()">
</div>

script代码

<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo",
    methods:{
        show(){
            alert("我是老六...");
        }
    }
  });
</script>

总体代码：

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>zpd</title>
</head>
<body>
<div id="demo">
    <input type="button" value="一个按钮" v-on:click="show()">
    <input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo",
    methods:{
        show(){
            alert("我是老六...");
        }
    }
  });
</script>
</body>
</html>

测试

当点击这两个按钮时，都会跳出弹框。

1.2.3 条件判断指令

v-if
v-else-if
v-else
v-show

创建文件，并编写对应的script代码。

<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo",
    data(){
        return{
            count:1
        }
    }
  });
</script>

现在要实现以下内容，

当count是1时，显示div1
当count是2时，显示div2
当count是3时，显示div3和v-show
当count是其他的时候显示的只有div3

div代码：

<div id="demo">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <br>
    <div v-show="count==3">v-show</div>
    <br>
    <input type="text" v-model="count">
</div>

总体代码：

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>zpd</title>
</head>
<body>
<div id="demo">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <br>
    <div v-show="count==3">v-show</div>
    <br>
    <input type="text" v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo",
    data(){
        return{
            count:1
        }
    }
  });
</script>
</body>
</html>

部分实现截图，可以修改input框中的count元素值的大小来修改div的内容

看出 v-show 不展示的原理是给对应的标签添加 display css属性，并将该属性值设置为 none ，这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。

1.2.4 v-for 指令

这个指令是用来遍历的，该指令使用的格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

注意：需要循环那个标签，v-for 指令就写在那个标签上。

如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

可以修改script中的数组值。
全部代码：

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>zpd</title>
</head>
<body>
<div id="demo">
    <div v-for="addr in addrs ">
        {{addr}} <br>
    </div>
    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
  //1.创建Vue的核心对象
  new Vue({
    el:"#demo",
    data(){
        return{
            addrs:["北京","杭州","深圳","广州"]
        }
    }
  });
</script>
</body>
</html>

演示结果：

1.3 Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

  new Vue({
     el:"#demo",
     mounted(){
         alert("Vue挂在完毕，发送异步请求~");
     }
  });

测试：

2 案例

2.1 查询所有

要求在进入brand.html页面就可以直接显示全部的数据，brand.html页面中采用html+ajax+vue的方式来获取内容。

用div包住table表格方便使用vue，并将div的id设置为table
标题不需要改变，内容需要v-for遍历
下面写script代码
页面加载完成后，发送异步请求，访问selectAllServlet
对数据进行v-for遍历
在前面写brands数组，用来存储多个对象
[ ]用来放多个对象，{ }用来放单个对象
将resp.data获取到的数据存储到数组中
在v-for循环时，在td标签中来获取循环的数据内容
brand.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="table">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <!--v-for循环-->
    <tr  v-for="(brand,i) in brands" align="center">
        <td>{{i+1}}</td>
        <td>{{brand.brandName}}</td>
        <td>{{brand.companyName}}</td>
        <td>{{brand.ordered}}</td>
        <td>{{brand.description}}</td>
        <td>{{brand.statusStr}}</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>
</div>
<!--
    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库，服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>-->

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#table",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            var _this = this;
            //页面加载完成之后,发送异步请求
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet",
            }).then(function (resp) {
               /* _this.brands = resp.data;
             let s = JSON.stringify(resp.data);
                alert(s);
                /*alert(resp.data);//测试的时候可以用这些代码进行测试
                */
                _this.brands = resp.data;
            })
        }
    });
</script>
</body>
</html>

当使用alert(resp.data);时发现弹出的是

输出的内容都是Object，需要用JSON.stringfiy(对象)来输出一下。
当代码变为时输出的是正常的数据，可以利用这个方法来查看前端和后端的交互，看后端是否将正确的数据传送到前端这里来。

_this.brands = resp.data;
let s = JSON.stringify(resp.data);
alert(s);

Servlet代码

调用service的 selectAll() 方法查询所有的品牌数据，并接口返回结果
将返回的结果转换为 json 数据
响应 json 数据

代码如下：

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {

    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用service查询
        List<Brand> brands = brandService.selectAll();
        //2. 转为JSON
        String jsonString = JSON.toJSONString(brands);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
        response.getWriter().write("jsonString");//发送JSON数据
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2.2 增加

当点击提交按钮时，调用submitForm方法，submitForm方法在vue中
在vue的submitForm方法中发送ajax请求完成添加的功能
在Servlet中添加成功后会发送success字符串，接收到Servlet发送的数据是success时，说明添加成功，跳转到brand.html。
利用v-model在input中输入需要添加的数据内容
需要有个模型绑定axios中的data数据，在前面加个data(){return{brand:{}}}
提交数据时提交的是一个brand对象

addBrand.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
    企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
    排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" v-model="brand.description" id="description" name="description"></textarea><br>
    状态：
    <input type="radio" name="status" v-model="brand.status" value="0">禁用
    <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

    <input type="button" id="btn" value="提交" @click="submitForm">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
          return{
              brand:{}
          }
        },
        methods: {
            submitForm() {
                var _this = this;
                //发送ajax请求完成添加的功能
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-demo/addServlet",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    })

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

AddServlet代码

package com.zpd.web; /**
 * @Description
 * @Author zpd
 * @Date 2022/6/13
 */

import com.alibaba.fastjson.JSON;
import com.zpd.pojo.Brand;
import com.zpd.service.BrandService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService brandService = new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收数据  用request.getParameter获取下方出现的是null，说明无法获取
        /*String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/
        //获取请求体数据
        BufferedReader reader = request.getReader();
        String s = reader.readLine();
        //将JSON字符串转为java对象
        Brand brand = JSON.parseObject(s, Brand.class);
        //2、调用service添加
        brandService.add(brand);
        //3、响应成功标识  添加未完成则不会执行
        response.getWriter().write("success");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}