Javaweb学习笔记day04---Vue、XML

最新推荐文章于 2023-12-13 18:04:02 发布
最新推荐文章于 2023-12-13 18:04:02 发布
阅读量590 收藏
点赞数
分类专栏： java 笔记 文章标签： vue.js xml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wynb1020/article/details/121648900
版权
本文介绍了Vue.js的基础知识，包括条件渲染（v-if/v-show）、属性绑定、案例——计算器、表单操作和监听器。同时，详细探讨了XML的相关概念，如概述、组成、约束（DTD、Schema）以及使用Dom4j进行解析。通过实例代码，读者可以深入理解Vue的使用和XML的数据处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue条件渲染

概述

	使用v-if、v-show指令根据指定条件渲染元素

v-if

	根据条件渲染元素，满足元素直接消失

v-show

	根据条件渲染元素，满足调价display=none

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue条件渲染</title>
</head>
<body>

<div id="app">
    <span v-if="flag">
        这是一个span
    </span>
    <span v-show="flag">
        这是二个span
    </span>
</div>
</body>
<script src="js/vue.js"></script>
<script>

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

</script>
</html>

Vue属性绑定

概述

使用’v-bind:属性”指令给元素的属性赋值，也可简写成":属性名"

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue属性绑定</title>
</head>
<body>
<div id="app">
    <input type="text" v-bind:value="name"><br>
    <input type="text" :value="name"><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            name : "小李子"
        }
    })

</script>
</html>

Vue案例之计算器

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue案例之计算器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1">
    <select v-model="operate">
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="/">除</option>
    </select>
    <input type="text" v-model="num2">
    = <span v-text="result">结果</span><br>
    <button @click="fn1()">计算</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            num1: 1,
            operate: "+",
            num2: 1,
            result: 2
        },
        methods: {
            fn1() {
                console.log(this);
                var result = eval(this.num1 + this.operate + this.num2);
                console.log("result : " + result);
                this.result = result;
            }
        }
    })
</script>
</html>

Vue之表单操作

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue案例之表单操作</title>
</head>
<body>
<div id="app">
    <form @submit.prevent="fn1()">
        姓名:
        <input type="text" name="username" v-model="user.username"/><br><br>
        密码:
        <input type="text" name="password" v-model="user.password"/><br><br>
        性别:
        <input type="radio" name="sex" value="male" v-model="user.sex">男
        <input type="radio" name="sex" value="female" v-model="user.sex">女<br/><br>
        爱好:
        <input type="checkbox" value="java" name="hobbys" v-model="user.hobbys">javase
        <input type="checkbox" value="javame" name="hobbys" v-model="user.hobbys">javame
        <input type="checkbox" value="javaee" name="hobbys" v-model="user.hobbys">javaee<br/><br>
        职业:
        <select name="job" v-model="user.job">
            <option value="javase工程师">javase工程师</option>
            <option value="javame工程师">javame工程师</option>
            <option value="javaee工程师">javaee工程师</option>
        </select><br><br>
        个人简介
        <textarea name="introduce" v-model="user.introduce"></textarea> <br><br>
        <input type="submit" value="提交修改"/>
    </form>

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

    var vue = new Vue({
        el: "#app",
        data: {
            user: {
                username: "",
                password: "",
                sex: "female",
                hobbys: [],
                job: "javase工程师",
                introduce: ""
            }
        },
        methods: {
            fn1(){
                //使用正则表达式对表单中的数据格式进行校验
                var flag = true;
                if (flag) {
                    console.log(this.user)
                }
            }
        }
    })

</script>
</html>

Vue监听器

  • 概述
    • 用于监听Vue变量的改变
  • 分类
    • ①监听普通变量
    • ②监听对象变量
  • ①监听普通变量## Vue生命周期

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监听器</title>
    <!--普通变量-->
</head>
<body>
<div id="app">
    <input type="text" v-model="msg"><br>
    <span v-text="msg"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            msg: ""
        },
        watch: {
            /**
             * 监听变量msg的变化
             * @param newVal
             * @param oldVal
             */
            msg(newVal, oldVal) {
                console.log("新值 : " + newVal + " , 老值 : " + oldVal);
            }
        }
    })

</script>
</html>

②监听对象变量
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监听器</title>
    <!--对象变量-->
</head>
<body>
<div id="app">
    <input type="text" v-model="user.username"><br>
    <span v-text="user.username"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            user: {
                username: ""
            }
        },
        methods: {},
        watch: {
            "user.username": {
                handler: function (newVal, oldVal) {
                    console.log("新值 : " + newVal + " , 老值 : " + oldVal);
                }
            }
        }

    })

</script>
</html>

Vue生命周期

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
</head>
<body>
<div id="app">
    <span id="spn">{{msg}}</span><br>
    <button @click="updateMsg()">修改msg</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods:{
            show(){
                console.log("show show show");
            },
            updateMsg(){
                this.msg = "fuck";
            }
        },
        beforeCreate(){//data和methods还没有初始化
            console.log("----------------------beforeCreate----------------------");
            console.log(this.msg);
            this.show();
        },
        created(){//data和methods已经初始化
            console.log("----------------------created----------------------");
            console.log(this.msg);
            this.show();
        },
        beforeMount(){//生成虚拟dom树
            console.log("----------------------beforeMount----------------------");
            var spanEle = document.getElementById("spn");
            console.log(spanEle.innerText);
        },
        mounted(){//生成真实dom树
            console.log("----------------------mounted----------------------");
            var spanEle = document.getElementById("spn");
            console.log(spanEle.innerText);

        },
        beforeUpdate(){//修改后，生成虚拟dom树
            console.log("----------------------beforeUpdate----------------------");
            //发生修改之前，已经有真实dom树(hello)，发生修改之后，生成虚拟dom树(fuck)
            var spanEle = document.getElementById("spn");
            console.log(spanEle.innerText);
        },
        updated(){//修改后，生成真实dom树
            console.log("----------------------updated----------------------");
            var spanEle = document.getElementById("spn");
            //虚拟dom树(fuck) 变成了 真实dom树(fuck)
            console.log(spanEle.innerText);
        }
    })

</script>
</html>

Xml

Xml概述

  • 概述

    • extensive markup language : 可扩展标签语言
    • html文件中的标签是预设好的，而xml文件中的标签是可以随意写的。

  • 作用

    • 用于传输数据，但是因为结构过于复杂，所以已经被json代替
    • 用于存储数据（配置文件），这个还在使用

  • 代码实现

<?xml version="1.0" encoding="UTF-8" ?><!--声明xml文档-->
<bookstore>
    <book category="magic">
        <title lang="english">Harry Potter</title>
        <author>J K.Rowling</author>
        <year>2005</year>
        <price>29.9</price>
    </book>
</bookstore>

Xml组成

组成

  • 元素
  • 属性
  • 文本
  • xml文档声明

Xml约束概述

  • 概述

    • 在xml文件中，可以随意写任何标签，会导致解析出现问题，从而导致数据出现问题。可以使用xml约束来规定xml文件中可以使用哪些标签、属性等等。

  • 分类

    • dtd约束 : 可以写哪些标签、哪些属性
    • schema约束 : 可以写哪些标签、哪些属性，可以规定标签内容、属性值

DTD约束

  • 概述

    • 规定xml文件中，可以写哪些标签，可以写哪些属性

  • ①内部结合

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE students [
        <!ELEMENT students (student*)>
        <!ELEMENT student (name,age,sex)>
        <!ELEMENT name (#PCDATA)>
        <!ELEMENT age (#PCDATA)>
        <!ELEMENT sex (#PCDATA)>
        <!ATTLIST student id CDATA #REQUIRED>
        <!ATTLIST student classname CDATA #IMPLIED>
        ]>
<students>

    <student id="1">
        <name>张三</name>
        <age>18</age>
        <sex>男</sex>
    </student>

</students>

②外部结合

<?xml version="1.0" encoding="UTF-8"?>
<!-- xml文件中有一个根节点students,students下可以有n个student子节点(包括0个) -->
<!ELEMENT students (student*)>
<!-- student节点下,可以有name节点、age节点和sex节点,且name节点、age节点和sex节点是按照先后顺序出现 -->
<!ELEMENT student (name,age,sex)>
<!-- 定义name节点,且节点内容的类型为字符  -->
<!ELEMENT name (#PCDATA)>
<!-- 定义age节点,且节点内容的类型为字符 -->
<!ELEMENT age (#PCDATA)>
<!-- 定义sex节点,且节点内容的类型为字符 -->
<!ELEMENT sex (#PCDATA)>
<!-- 给节点student设置属性,属性名称为id,属性的类型为CDATA(字符), #REQUIRED指本属性是必须的  #IMPLIED指属性是可选的 -->
<!ATTLIST student id CDATA #REQUIRED>
<!-- 给节点student设置属性,属性名称为classname,属性的类型为CDATA(字符), #REQUIRED指本属性是必须的  #IMPLIED指属性是可选的 -->
<!ATTLIST student classname CDATA #IMPLIED>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE students SYSTEM "students.dtd">
<students>

   <student id="-1">
       <name>张三</name>
       <age>-18</age>
       <sex>男</sex>
   </student>

</students>

Schema约束

  • 概述

    • 可以规定xml文件：哪些标签可以写、哪些属性可以写、标签内容可以是什么、属性值可以是什么.

  • 代码实现

<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema"
        targetNamespace="http://www.example.org/students"
        elementFormDefault="qualified">
    <!-- element:申明元素,包括根元素和子元素 这里就是申明根元素class -->
    <element name="students">
        <!-- 复杂元素 -->
        <complexType>
            <!-- squence:子元素按照顺序 1,子元素如果只有一种,那么就写一个,比如student元素 2,子元素如果有多种,那么就按想要的顺序写,比如:name,age,sex -->
            <sequence>
                <!-- 申明子元素student minOccurs:最少出现次数 maxOccurs:最大出现次数,数值或unbounded(无限大) -->
                <element name="student" minOccurs="0" maxOccurs="unbounded">
                    <!--复杂元素-->
                    <complexType>
                        <sequence>
                            <!-- 申明子元素name -->
                            <element name="name" type="string"></element>
                            <!-- 申明子元素age simpleType:元素age是一个简单元素 restriction:age的取值范围在1~150之间 -->
                            <element name="age">
                                <!--简单元素-->
                                <simpleType>
                                    <restriction base="integer">
                                        <minInclusive value="0"></minInclusive>
                                        <maxInclusive value="150"></maxInclusive>
                                    </restriction>
                                </simpleType>
                            </element>

                            <!-- 申明子元素 sex restriction:取值范围在"男"和"女" -->
                            <element name="sex">
                                <simpleType>
                                    <restriction base="string">
                                        <enumeration value="男"></enumeration>
                                        <enumeration value="女"></enumeration>
                                    </restriction>
                                </simpleType>
                            </element>
                        </sequence>
                        <!--
                            定义了一个属性id
                            use="required":属性是必须的
                            <pattern value="java_\d{4}"></pattern>:id的值必须满足这个正则表达式:以java_开头,后面跟四个数字
                         -->
                        <attribute name="id" use="required">
                            <simpleType>
                                <restriction base="string">
                                    <pattern value="java_\d{4}"></pattern>
                                </restriction>
                            </simpleType>
                        </attribute>
                    </complexType>
                </element>
            </sequence>
        </complexType>
    </element>
</schema>

<?xml version="1.0" encoding="UTF-8" ?>
<students xmlns="http://www.example.org/students">

   <student id="java_1234">
       <name>张三</name>
       <age>18</age>
       <sex>男</sex>
   </student>


</students>

总结

  • dtd : mybatis框架
  • schema : spring框架

Dom4j解析

  • 概述

    • 用于获取xml文件中的配置信息

  • 开发步骤

    • ①创建核心解析对象SAXReader
    • ②读取xml文件，并获取文档对象Document
    • ③获取根节点
    • ④获取根节点下所有子节点
    • ⑤获取所有子节点的信息(属性信息、标签信息)，并将信息封装到java对象中

  • 代码实现

  • `/**

  • 解析spring.xml
    */
    public class Demo01 {

    public static void main(String[] args) throws Exception {
    //1,创建核心解析对象
    SAXReader saxReader = new SAXReader();
    //2,读取spring.xml，获取document对象
    Document document = saxReader.read(“spring.xml”);
    //3,获取根节点
    Element rootElement = document.getRootElement();
    //4,获取根节点下的所有子节点对象
    List beanEles = rootElement.elements(“bean”);

     List<User> userList = new ArrayList<>();
 for (Element beanEle : beanEles) {
     //获取id属性值
     String id = beanEle.attributeValue("id");
     //获取name标签内容
     String name = beanEle.elementText("name");
     //获取age标签内容
     String age = beanEle.elementText("age");

     User user = new User();
     user.setId(id);
     user.setName(name);
     user.setAge(Integer.parseInt(age));
     userList.add(user);
 }

 System.out.println("userList = " + userList);

    }

}`

vue2实现xml数据解析，转成对象或者数组
weixin_52115201的博客
01-09 1083
接口返回的xml编码。
B站---【狂神说Java】JavaWeb入门到实战---笔记
热门推荐
bell_love的博客
04-23 18万+
JavaWebJava Web 1、基本概念web开发： ·web，网页的意思，www.baidu.com· 静态web 。html,sss 。提供给所有人看的数据始终不会发生变化！ 动态web 。淘宝，几乎是所有的网站； 。提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 。技术栈：Servlet/ISP，ASP，PHP ...
XML editor 编辑器
08-23
xml编辑器很好用，有利于编辑xml文件，可输出树状图，良心软件。
vue 读取xml文件，记录
cscscssjsp的博客
12-27 8107
1.项目需求，后台响应的是xml文件，故在前端先做测试，解析本地xml文件 test.xml <?xml version="1.0" encoding="UTF-8"?> <root> <lbs> <lb> <label>合同编号</label> <text>123456</te...
vue实现xml在线编辑功能
weixin_45966674的博客
02-19 4938
先看效果 避免误会 这是一个在线编辑器 我们可以在这上面随意的编写xml代码格式我们修改上面的内容之后 就可以在控制台输出内容 如果这正是您想要的东西 那就可以先创建一个vue项目我们先引入依赖 然后在src 目录 下新建文件夹 就叫 components 在components下再创建一个文件 叫 editor然后 在下面创建一个js文件 叫 data_format_utilsdata_format_utils.js 参考代码如下 然后在 editor目录下创建一个
vue使用x2js对xml数据进行转换处理
leva的博客
12-13 1419
为了以一种简单易用的方式访问XML数据，你可能不想编译一个C解析器，而是想寻找一个更方便的解决方案。xml2js是一个简单的XML到JavaScript对象转换器，支持双向转换。最简单的安装xml2js的方式是使用npm。只需执行npm install xml2js，npm将会下载xml2js及其所有依赖。xml2js也可以通过Bower进行安装，只需执行bower install xml2js，Bower将会下载xml2js及其所有依赖。#解析XML数据：使用xml2js库轻松进行XML解析。
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
崔希凡javaweb笔记day18-day23
11-09
崔希凡老师的JavaWeb笔记涵盖了从day18到day23的关键内容，这些知识点是学习JavaWeb开发过程中不可或缺的部分。以下是对这些知识点的详细解析： 1. **Servlet基础**（day18）：Servlet是Java Web应用的核心组件，...
配套学习资料：Java开发 - 尚硅谷JavaWeb学习笔记
最新发布
06-22
Java开发 - 尚硅谷JavaWeb学习笔记 - Part1： https://blog.csdn.net/qq_63317769/article/details/139883728 Java开发 - 尚硅谷JavaWeb学习笔记 - Part2： Java开发 - 尚硅谷JavaWeb学习笔记 - Part3： Java开发 ...
vue 怎么解析xml
weixin_45093753的博客
06-30 4556
用vue请求接口的时候有时会遇到xml格式的返回数据，例如 <id>1111</id><name>lucy</name> 这样的格式用正则表达式或者截取的话都会很麻烦的，那怎么做呢？？？ 就使用x2js来解析xml数据 第一步（安装）： 1.npm //使用npm安装 npm i x2js 下载完成后打开main.js,加入以下代码： import x2js from 'x2js' //xml数据处理插件 Vue.prototype.$x2js = new
vue中渲染对象中属性时显示未定义_Vue全解
weixin_39928480的博客
11-20 5684
一.Vue实例内存图：1.把Vue的实例命名为vm，vm对象封装了对视图的所有操作包括数据读写、事件绑定、DOM更新2.vm的构造函数是Vue，按照ES6的说法vm所属的类是Vue3.options是new Vue的参数一般称为选项或构造选项1.options里面有什么英文文档搜options中文文档搜选项即可得相关所有文档options的五类属性★数据：data,props,propsData,...
vue3前端解析xml格式文件为js对象数据，最终解析成Tree数据结构。实现Tree数据增删改节点，然后导出xml格式数据！
weixin_68397463的博客
10-12 3728
vue3前端解析xml格式文件为js对象数据，最终解析成Tree数据结构。实现Tree数据增删改节点，然后导出xml格式数据
Vue 项目中高亮格式化 xml 代码
柯晓楠
01-12 1839
效果演示 安装插件 $ npm install highlight.js --save 代码实现 xml原文如下： <?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<licenses>\n <license-group embed=\"true\" format=\"1.0\" productFamily=\"esb\" release=\"8.0\">\n <lic
Web.xml配置详解
一只闭着眼睛念经的猫
12-02 1969
1 定义头和根元素 　　部署描述符文件就像所有XML文件一样，必须以一个XML头开始。这个头声明可以使用的XML版本并给出文件的字符编码。 DOCYTPE声明必须立即出现在此头之后。这个声明告诉服务器适用的servlet规范的版本（如2.2或2.3）并指定管理此文件其余部分内容的语法的DTD(Document Type Definition，文档类型定义)。 所有部署描述符文件的顶层（根
一篇关于web.xml配置的详细说明
gdsy的专栏
06-27 1810
1 定义头和根元素部署描述符文件就像所有XML文件一样，必须以一个XML头开始。这个头声明可以使用的XML版本并给出文件的字符编码。DOCYTPE声明必须立即出现在此头之后。这个声明告诉服务器适用的servlet规范的版本（如2.2或2.3）并指定管理此文件其余部分内容的语法的DTD(Document Type Definition，文档类型定义)。所有部署描述符文件的顶层（根）元素为web-ap
vue如何解析xml文件 x2js
anmizhan5851的博客
11-23 1289
好久没来写东西了，主要是一直在加班，哼哼，不开心 项目中会用到将xml文件解析成json文件在页面中显示出来，以前jq的时候用到的方法行不通了，故在这边介绍一种我觉得还不错的插件 1. npm安装 npm i x2js 2.在main.js中引用 import x2js from 'x2js' //xml数据处理插件 Vue.prototype.$x2js = new ...
javascript前端XML格式正确性验证方法
danhuang
03-19 5555
一、原理： 鉴于最近要做一个前端xml的数据验证，查找了一些资料，并且自我做了一些总结，写了一个简单的xml字符串验证函数，其实现的过程主要是通过用xml解析器去解析xml字符串，如果解析错误，会报出相应的解析错误，使用该思想去验证xml格式的正确性。 在IE和非IE浏览器解析xml是不同的，因此需要两种方法去解析，在IE中有ActiveXObject("Microsoft.XMLDOM")对
如何在vue中的xml中做条件判断？
qq_40513296的博客
07-19 1258
后端返回的数据通常要进行过滤，那么有哪些条件做判断呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值