JavaWeb?一篇足够！Vue和Ajax笔记整理

PsychoPass-1

已于 2024-04-25 16:19:34 修改

阅读量1.4k

点赞数 28

分类专栏： Java基础文章标签： vue.js ajax 笔记 java 前端

于 2024-04-18 10:44:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_63107550/article/details/137911743

版权

Java基础专栏收录该内容

8 篇文章

订阅专栏

声明

本文内容是笔者在学习黑马课程的笔记，可根据左边本文目录快速定位需要学习或者复习的点，如果零基础建议观看黑马课程

Vue

是什么

Vue是个前端框架，基于MVVM思想，用于免除原生JavaScript中的Dom操作，简化书写。

官网 Vue.js

快速入门

插值表达式 {{ }}

Vue对象属性

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

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值

data ：用来定义数据模型

methods ：用来定义函数。这个我们在后面就会用到

Vue常见指令

v-bind v-model

解决v-bind爆红问题，安装vue.js插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app" >
  <a v-bind:href="url">单击一下</a>
  <input  v-model="url">
</div>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        username:"",
        url:"https://www.baidu.com"
      }
    }
  })
</script>
</body>
</html>

v-on

用于绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="button" v-on:click="show()" value="一个按钮">
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        username:""
      }
    },
    methods:{
      show(){
        alert("我被点了")
      }
    }
  })
</script>
</body>
</html>

v-if

条件判断是否渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else="count==3">div3</div>
    <input type="text" v-model="count">
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                count:3,
            }
        },

    })
</script>
</body>
</html>

v-show也是一样效果，但是源码里面v-show的代码还在，只是display的属性设置为了none

v-for

基本格式

v-for="变量名 in 数组变量名"，用插值表达式{{变量名}}展示属性值

v-for="(变量名，索引变量名) in 数组变量名（集合数据模型）"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}}
    </div>
<br>
    <div v-for="(addr,i) in addrs">
       {{i+1}}--{{addr}}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
   addrs:["北京","上海","广东"]
      }
    }

  })
</script>
</body>
</html>

Vue生命周期

对象从创建到销毁的过程，分为八个阶段。

Ajax

概念和作用

作用：数据交换，通过Ajax给服务器发送请求，并获取服务器响应的数据

异步交互：在不重新加载整个页面的情况下，和服务器交换数据并更新部分网页的技术。

Axios

axios封装了原生的ajax

axios请求方式

案例

实际用的是axios

前端工程化

Yapi的使用

脚手架部署（Vue-cli）

环境准备，安装脚手架

控制台vue ui调起图形化界面

目录结构

启动项目的命令 npm run serve

开发流程

template版块，js版块控制数据来源和行为，方法，css部分

Vue组件库Element

是什么

是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

官网： Element - The world's most popular Vue UI framework

如何使用

在webapp下引入element的ui包，在html代码里引入element的css和js包，引入vue

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

创建vue核心对象，然后把element代码复制到<div>标签里面

<script>
new Vue({
el:"#app"
})
</script>

XML

简介

什么是XML

可扩展的标记性语言。

作用

：可自定义，具有自我描述性。作为项目的配置文件。作为网络传输数据的格式（现在JSON为主）

文档声明

<?xml version=" 版本号" encoding="编码"> 还有个属性 standalone="yes/no" 表示是否为独立的xmL文件，写在开头的对xml的说明

XML元素

指的是开始标签到结束标签的内容

命名规则和语法规则

命名规则

字母数字以及其他字符。不能以数字和标点符号开始，不能有空格。

XML属性

属性的值必须用引号括起来

语法规则

XML文档需要有根元素。对大小写敏感。需要正确的嵌套。根元素是没有父标签的顶级元素

特殊字符

> &gt,< &lt

文本区域（CDATA区）

CDATA语法可以告诉xml解析器，这里面的是文本，不需要xml解析

<![CDATA[这里输入文本]]>

dom4j解析技术

dom4jJava编程步骤

第一步：先加载 xml 文件创建 Document 对象，SAXReader对象的read（）方法获得

第二步：通过 Document 对象拿到根元素对象 getRootElement()方法

第三步：通过根元素.elelemts(标签名); 可以返回一个集合，这个集合里放着。所有你指定的标签名的元素对象

第四步：找到你想要修改、删除的子元素，进行相应在的操作

第五步，保存到硬盘上