【JavaWeb】Vue上篇

最新推荐文章于 2024-06-06 13:54:53 发布

程序喵正在路上

最新推荐文章于 2024-06-06 13:54:53 发布

阅读量962

点赞数 25

分类专栏： JavaWeb开发文章标签： vue.js 前端 ajax

本文链接：https://blog.csdn.net/weixin_62511863/article/details/135736572

版权

JavaWeb开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

🔥 本文由程序喵正在路上原创，CSDN首发！
💖 系列专栏：JavaWeb开发
🌠 首发时间：2024年2月2日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

Vue

Vue介绍

什么是Vue？

Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效
基于 MVVM (Model-View-ViewModel) 思想，实现数据的双向绑定，将编程的关注点放在数据上
官网： https://v2.cn.vuejs.org/

在这里插入图片描述

Vue快速入门

下载 vue.js 文件，点击此处进入，再点击开发版本下载
新建HTML页面，引入 vue.js 文件
在 Vscode 当前文件夹下，再创建一个名为 JS 的文件夹，将刚刚下载的 vue.js 文件放入文件夹中，后面我们将使用命令 <script src="js/vue.js"></script> 引入

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

编写视图

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

插值表达式

形式：{{ 表达式 }}
表达式的内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算

入门代码演示

15. Vue-快速入门.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <!-- 引入 vue.js 文件 -->
    <script src="js/vue.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

</html>

效果图：

在这里插入图片描述

由于 Vue 实现了数据的双向绑定，所以我们修改了文本框中 message 的内容，另一个 message 的内容也会改变：

在这里插入图片描述

Vue常用指令

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

v-bind

完整写法：<a v-bind:href="url">百度</a>
简化写法：<a :href="url">百度</a>

v-model

写法：<input type="text" v-model="url">

注意：通过 v-bind 或者 v-model 绑定的变量，必须在数据模型中声明

v-bind 和 v-model 运用示例

16. Vue-指令-v-bind和v-model.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
		<br>
        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

</html>

执行结果：

在这里插入图片描述

因为文本框实现了双向数据绑定，所以当我们修改文本框中的内容时，其他标签绑定的内容也会改变：

在这里插入图片描述

v-on

完整写法：<input type="button" value="按钮" v-on:click="handle()">
简化写法：<input type="button" value="按钮" @click="handle()">

v-on 运用示例

17. Vue-指令-v-on.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {

        },
        methods: {
            handle: function () {
                alert("你点了我一下");
            }
        }
    })
</script>

</html>

执行结果如下：

在这里插入图片描述

v-if 和 v-show 运用示例

18. Vue-指令-v-if和v-show.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <hr>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

</html>

执行结果如下：

在这里插入图片描述

将 age 改为 50 后：

在这里插入图片描述

v-for

写法一，不需要用到索引：<div v-for="addr in addrs">{{addr}}</div>
写法二，有索引：<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
其中，addr 和 index 可以改变名称

v-if 运用示例

19. Vue-指令-v-for.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {
            addrs: ["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {

        }
    })
</script>

</html>

执行结果如下：

在这里插入图片描述

Vue案例

通过 Vue 完成表格数据的渲染展示，如下图所示

在这里插入图片描述

20. Vue-指令-案例.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>

<body>

    <div id="app">

        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            }, {
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {

        },
    })
</script>

</html>

执行结果如下：

在这里插入图片描述

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
每个阶段在 Vue 中都有自己的方法

在这里插入图片描述

对于 Java 开发人员来说，我们主要学习 mounted 这个阶段，后面我们会通过这个方法发送请求到服务端，加载数据

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功

注意：mounted() 会自动调用，不需要我们手动调用

21. Vue-生命周期.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {

        },
        methods: {

        },
        mounted() {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

</html>

执行结果如下：

在这里插入图片描述

Ajax

原生Ajax

什么是Ajax

概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

同步与异步

在这里插入图片描述

原生Ajax（了解）

步骤：

准备数据地址
创建 XMLHttpRequest 对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

示例代码：

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

Axios

什么是Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发
官网：https://www.axios-http.cn/，内有使用方法

Axios入门

点击此处免费下载 axios-0.18.0.js 文件，并将其放入项目的js文件夹下

引入 Axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

使用 Axios 发送请求，并获取响应结果

Axios请求方式别名

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});

发送POST请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

注意：上述网址皆为演示所用，具体应用时应填入要请求数据的地址

运用示例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>

    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get() {
        axios.get("https://jsonplaceholder.typicode.com/posts/1/comments").then(result => {
            console.log(result.data);
        })
    }

    function post() {
        axios.post("https://jsonplaceholder.typicode.com/posts/1/comments").then(result => {
            console.log(result.data);
        })
    }
</script>

</html>

Axios应用案例

基于Vue及Axios完成数据的动态加载展示

数据准备的url： https://jsonplaceholder.typicode.com/users
在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面，大概如下，你也可以将页面的所有信息都展示出来

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>用户名</th>
                <th>电子邮件</th>
                <th>地址</th>
            </tr>

            <tr align="center" v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.address.city}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            users: []
        },
        mounted() {
            //发送异步请求,加载数据
            axios.get("https://jsonplaceholder.typicode.com/users").then(result => {
                this.users = result.data;
            })
        }
    });
</script>

</html>

执行结果

前后端分离开发

当前最为主流的开发模式：前后端分离

在这里插入图片描述

开发流程：

在这里插入图片描述

前端工程化

在这里插入图片描述

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

环境准备

Vue-cli

介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS

安装Node.js

访问 http://www.nodejs.com.cn/，下载最新稳定版本的 node.js

在这里插入图片描述

下载完是这样一个文件：

在这里插入图片描述

双击进行安装，安装过程如果需要修改安装路径可以自行修改，安装路径建议不要有中文字符，其它没有什么需要注意的，一直点击 “Next” 即可

在这里插入图片描述

验证NodeJS环境变量

win + R 打开控制台，输入指令 node -v 查看，如果显示刚刚安装的版本，说明安装成功了

在这里插入图片描述

配置npm的全局安装路径

在电脑搜索 “命令提示符”，以管理员身份运行

在这里插入图片描述

输入下面的指令，注意 D:\soft\NodeJS 这个目录要修改为你刚刚安装 node.js 的目录

npm config set prefix "D:\soft\NodeJS"

配置完，再输入下面的指令查看是否配置成功：

npm config get prefix

在这里插入图片描述

切换npm的淘宝镜像

切换国内的镜像，后面我们要下载东西的时候更快

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com/

然后再输入下面的指令，查看是否切换成功：

npm config get registry

在这里插入图片描述

安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

然后耐心等待系统联网下载：

在这里插入图片描述

安装成功（我这里是第二次安装）：

在这里插入图片描述

然后输入下面的指令查看是否安装成功，在结果中有 vue-cli 即为成功：

npm list -global

在这里插入图片描述

Vue项目简介

Vue项目创建方式

命令行方式：vue create vue-project01
图形化界面：vue ui

这里，我们来讲解一下图形化界面如何创建 Vue 项目

首先，新建一个文件夹 vue，进入 vue 文件夹，在目录的位置输入 cmd，然后回车：

在这里插入图片描述

来到这个界面，请注意，在下列过程中，请不要关闭控制台窗口：

在这里插入图片描述

点击创建：

在这里插入图片描述

下面按照图片上的操作进行：

在这里插入图片描述

耐心等待：

在这里插入图片描述

点击完创建项目后，我们来到控制台界面，可以看到进度条，稍等一会项目即可创建成功，我们可以看到在 vue 文件夹下多了一个 vue-project 文件夹，而刚刚的界面也变成下面这样：

在这里插入图片描述

Vue项目-目录结构

我们来介绍一下刚刚用脚手架创建出来的这个文件夹

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

在这里插入图片描述

Vue项目-启动方式

启动工程的方式有以下两种：
在这里插入图片描述

下面我们详细说一下方式一如何启动

首先，在 Vscode 中打开 Vue 脚手架创建的工程，然后按照下图进行操作：

在这里插入图片描述

操作完成后，我们会发现在左下角多了一个 NPM 脚本，点击 serve 处的启动按钮即可启动工程：

在这里插入图片描述

启动完成，按住 Ctrl 键并点击图中的网址即可来到界面：

在这里插入图片描述

其实，这个界面就是 src 文件夹下的 App.vue 对应的界面

在这里插入图片描述

我们尝试一下修改 App.vue 中的内容：

在这里插入图片描述

然后保存，回到浏览器页面，发现界面已经改变，但是我们并没有刷新浏览器

在这里插入图片描述

其实，这个就是 vue-cli 的热部署功能

Vue项目-自行配置端口

刚刚的项目占用的默认端口是 8080，如果我们想修改端口，非常简单，只要在 vue.config.js 文件中添加几行代码即可：
在这里插入图片描述

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7000
  }
})

注意上一行代码后面需要添加逗号，再次启动，可以发现已经修改成功：

在这里插入图片描述

Vue项目开发流程

在这里插入图片描述

上面这个页面是 Vue 项目的默认首页 index.html，其位置是在 public 文件夹下，index.html 是默认引入 src 文件夹下的 main.js 文件的

在 main.js 文件中，其导入了很多模块

在这里插入图片描述

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

new Vue({
  el: "#app",
  router: router,
  render: h => h(App)
})

上面这两种新建对象的方式的作用是一样的，前者里面的 router 的 ES6 的写法，当冒号前后内容一致时，冒号及其后面的内容可以省略

Vue的组件文件

以 .vue 结尾的文件都是 Vue 的组件文件，每个组件由三个部分组成：<template> 、<script>、<style>

在这里插入图片描述

在 Vscode 中安装一个插件 vuter：

在这里插入图片描述

接下来，我们自己来写 App.vue 里面的东西，首先，将 App.vue 原有的大部分东西删去，只留下框架：

在这里插入图片描述

写入 script 标签，记住选择 javascript.vue 选项：

在这里插入图片描述

选择后是这样的：

在这里插入图片描述

这部分代码是保证我们后面可以将 App.vue 导入其他文件

之前我们是直接声明了一个对象，然后在里面有一个 data 来存放数据，但是我们现在是要指定一个函数，然后在函数内声明一个对象并返回：

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue"
    }
  }
}
</script>

简写形式：

<script>
export default {
  data() {
    return {
      message: "Hello Vue"
    }
  }
}
</script>

其实这一部分代码是可以自动生成的，我们只需要安装一个插件 Vue 2 Snippets，然后输入 data，选择有一个方框标记的选项即可：

在这里插入图片描述

同样地，我们还可以在后面写一些方法：

<script>
export default {
  data() {
    return {
      message: "Hello Vue",
    };
  },
  methods: {
    
  },
}
</script>

当我们定义好数据后，我们就可以在 template 部分，也就是视图部分，通过插值表达式来展示数据模型中的数据：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

在这里插入图片描述

注意：在 Vue 工程中，我们主要操作的都是一些组件文件

程序喵正在路上

关注

25
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaWeb】Vue上篇

什么是Vue？Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。
复制链接

扫一扫

专栏目录

【JavaWeb】Vue上篇

目录

Vue

Vue介绍

Vue快速入门

Vue常用指令

Vue生命周期

Ajax

原生Ajax

Axios

前后端分离开发

前端工程化

环境准备

Vue项目简介

Vue项目开发流程

“相关推荐”对你有帮助么？