Axios-Nginx-Vue入门

最新推荐文章于 2024-08-10 21:29:51 发布

沃不鸡丢啊

最新推荐文章于 2024-08-10 21:29:51 发布

阅读量971

点赞数 2

分类专栏：前端文章标签： nginx vue.js okhttp

本文链接：https://blog.csdn.net/weixin_49023961/article/details/132012498

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax入门

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

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

1、Axios

Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。（axios本质上是原生XMLHttpRequest的封装）。

Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

1.1 Axios的基本使用

xios的使用比较简单，主要分为2步：

引入Axios文件

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

使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下
- 发送 get 请求
```
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
```
- 发送 post 请求
```
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
```
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：
- **method属性：**用来设置请求方式的。取值为 get 或者 post。
- **url属性：**用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
- **data属性：**作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

1.2 Axios快速入门

后端实现

查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：

1669108792555

然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求，完整代码如下：

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

    function post(){
        //通过axios发送异步请求-post
    }
</script>
</html>

然后分别使用Axios的方法，完整get请求和post请求的发送

get请求代码如下：

//通过axios发送异步请求-get
 axios({
     method: "get",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
 }).then(result => {
     console.log(result.data);
 })

post请求代码如下：

//通过axios发送异步请求-post
 axios({
     method: "post",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
     data: "id=1"
 }).then(result => {
     console.log(result.data);
 })

浏览器打开，f12抓包，然后分别点击2个按钮，查看控制台效果如下：

1669109382408

完整代码如下：

<!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
        axios({
            method: "get",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result => {
            console.log(result.data);
        })


    }

    function post(){
       // 通过axios发送异步请求-post
        axios({
            method: "post",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data: "id=1"
        }).then(result => {
            console.log(result.data);
        })

    }
</script>
</html>

1.3 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将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);
})

1.4 配置对象常用的配置项：

{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },
  
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',


	//响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

1.5 Axios的核心配置

url：请求URL网址
method：请求方法，GET可以省略(不区分大小写)
params：查询参数
data：提交数据

1.6 错误处理

目标

掌握接收 axios 响应错误信息的处理语法

讲解

如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：
在 axios 语法中要如何处理呢？
- 因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，语法如下：

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

需求：再次重复注册相同用户名，提示用户注册失败的原因

对应代码

document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
})

小结

axios 如何拿到请求响应失败的信息？
答案
- 通过 axios 函数调用后，在后面接着调用 .catch 方法捕获

1.7 form-serialize 插件

目标

使用 form-serialize 插件，快速收集目标表单范围内表单元素的值

讲解

我们前面收集表单元素的值，是一个个标签获取的
如果一套表单里有很多很多表单元素，如何一次性快速收集出来呢？
使用 form-serialize 插件提供的 serialize 函数就可以办到
form-serialize 插件语法：
1. 引入 form-serialize 插件到自己网页中
2. 使用 serialize 函数
  - 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
  - 参数2：配置对象
    - hash：
      - true - 收集出来的是一个 JS 对象结构
      - false - 收集出来的是一个查询字符串格式
    - empty：
      - true - 收集空值
      - false - 不收集空值
需求：收集登录表单里用户名和密码

对应代码：

<!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>form-serialize插件使用</title>
</head>

<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1. 把插件引入到自己网页中
  -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      /**
       * 2. 使用serialize函数，快速收集表单元素的值
       * 参数1：要获取哪个表单的数据
       *  表单元素设置name属性，值会作为对象的属性名
       *  建议name属性的值，最好和接口文档参数名一致
       * 参数2：配置对象
       *  hash 设置获取数据结构
       *    - true：JS对象（推荐）一般请求体里提交给服务器
       *    - false: 查询字符串
       *  empty 设置是否获取空值
       *    - true: 获取空值（推荐）数据结构和标签结构一致
       *    - false：不获取空值
      */
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      // const data = serialize(form, { hash: false, empty: true })
      // const data = serialize(form, { hash: true, empty: false })
      console.log(data)
    })
  </script>
</body>

</html>

小结

我们什么时候使用 form-serialize 插件？
答案
- 快速收集表单元素的值
如何使用 form-serialize 插件？
答案
- 1. 先引入插件到自己的网页中，2. 准备form和表单元素的name属性，3.使用serialize函数，传入form表单和配置对象
配置对象中 hash 和 empty 有什么用？
答案
- hash 决定是收集为 JS 对象还是查询参数字符串，empty 决定是否收集空值

1.8 案例-用户登录-form-serialize

目标

尝试通过 form-serialize 重新修改用户登录案例-收集用户名和密码

讲解

基于模板代码，使用 form-serialize 插件来收集用户名和密码

在原来的代码基础上修改即可

先引入插件

<!-- 3.1 引入插件 -->
<script src="./lib/form-serialize.js"></script>

然后修改代码

// 3.2 使用serialize函数，收集登录表单里用户名和密码
const form = document.querySelector('.login-form')
const data = serialize(form, { hash: true, empty: true })
console.log(data)
// {username: 'itheima007', password: '7654321'}
const { username, password } = data

小结

如何把一个第三方插件使用在已完成的案例中？
答案
- 引入后，只需要使用在要修改的地方，修改一点就要确认测试一下

1.9 案例

需求：基于Vue及Axios完成数据的动态加载展示，如下图所示

其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
分析：

前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。那么拿到数据了，我们该怎么将数据显示表格中呢？这里就得借助v-for指令来遍历数据，展示数据。
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在<tr>标签上通过v-for指令遍历数据，展示数据

代码实现：

首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

1669140682300

提供初始代码如下：

<!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>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" >
                <td>1</td>
                <td>Tom</td>
                <td>
                    <img src="" width="70px" height="50px">
                </td>
                <td>
                    <span>男</span>
                   <!-- <span>女</span>-->
                </td>
                <td>班主任</td>
                <td>2009-08-09</td>
                <td>2009-08-09 12:00:00</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
        
       }
    });
</script>
</html>

在vue的mounted钩子函数，编写Ajax请求，请求数据，代码如下：

mounted () {
    //发送异步请求,加载数据
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        
    })
}

ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：

因为服务器响应的json中的data属性才是我们需要展示的信息，所以我们应该将员工列表信息赋值给vue的data属性，代码如下：
```
 //发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    this.emps = result.data.data;
})
```
其中，data中生命emps变量，代码如下：
```
data: {
    emps:[]
},
```

在<tr>标签上通过v-for指令遍历数据，展示数据，其中需要注意的是图片的值，需要使用vue的属性绑定，男女的展示需要使用条件判断，其代码如下：

<tr align="center" v-for="(emp,index) in emps">
    <td>{{index + 1}}</td>
    <td>{{emp.name}}</td>
    <td>
        <img :src="emp.image" width="70px" height="50px">
    </td>
    <td>
        <span v-if="emp.gender == 1">男</span>
        <span v-if="emp.gender == 2">女</span>
    </td>
    <td>{{emp.job}}</td>
    <td>{{emp.entrydate}}</td>
    <td>{{emp.updatetime}}</td>
</tr>

完整代码如下：

<!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>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

nginx打包部署

1、前端工程打包

我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：

1669389052906

然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：

1669389147027

2、部署前端工程

2.1 nginx介绍

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。

其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

将我们需要部署的文件，放到nginx目录下的html文件当中。

2.2 部署

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：

1669389950696

然后我们通过双击nginx下得nginx.exe文件来启动nginx，如下图所示：

1669390029156

nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略，其浏览器展示效果如图所示：

1669390177896

到此，我们的前端工程发布成功。

PS: 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：

1669390312206

Vue

前言

**概述：**Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：Vue通过MVVM模式，能够实现视图与模型的双向绑定。

简单来说，就是数据变化的时候，页面会自动刷新，页面变化的时候，数据也会自动变化。

Vue开发流程：

导入开发版本的Vue.js
创建Vue实例对象，设置el属性和data属性。
使用简介的模版语法把数据渲染到页面上。

Vue.js三种安装方式

此处引荐下大佬的文章讲的非常详细

Vue.js三种方式安装

1、Vue的导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

语法

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

Vue第一个案例

<div id="app">
    <h1>用户名:<input type="text" v-model="name"/></h1> <br/>
    <h1>您输入的用户名是: {{name}}</h1>
</div>

<script type="text/javascript">
    //创建一个Vue对象
    var app = new Vue({
        //指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理
        el: "#app",
        //定义vue中的数据
        data: {
            name: ""
        }
    });
</script>

2、Vue的基本语法

2.1 el:挂载点

el挂载点只能有一个。

2.2 生命周期

2.2.1 钩子函数

钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法。

语法：

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        //钩子函数created,该方法在页面显示之后,自动执行
        created() {
            console.log("created...");
        }
    });
</script>

2.2.2 Vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

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

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
`mounted`	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

在这里插入图片描述

其中我们需要重点关注的是**mounted,**其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

1668867458156

总结：

（1）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发beforeCreate, created, beforeMount, mounted 这几个钩子

（2）DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

2.3 插值表达式

概述：插值表达式用户把Vue中所定义的数据，显示在页面上，插值表达式允许用户输入"JS代码片段"。

语法：{{ 变量名/对象.属性名 }}

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue插值表达式</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>欢迎来到-->{{ name }}</h1>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //让vue接管div标签
            el:"#app",
            //定义数据,里边包含一个属性name,值为"白大锅"
            data:{
                name:"白大锅"
            }
        });
    </script>
</body>
</html>

3、Vue指令

3.1 显示数据(v-text和v-html)

v-text

v-text指令的作用是：设置标签的内容(textContent)。

默认写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容。

v-html

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

语法：

v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

区别：

v-text：把数据当作纯文本显示。
v-html：遇到html标签,会正常解析。

3.2 事件绑定(v-on)

常见事件列表：

事件属性名	说明
`onclick`	鼠标单击事件
`ondblclick`	鼠标双击事件
`onblur`	元素失去焦点
`onfocus`	元素获得焦点
`onload`	某个页面或图像被完成加载
`onsubmit`	当表单提交时触发该事件
`onmouseover`	鼠标被移到某元素之上
`onmouseout`	鼠标从某元素移开

**概述：**v-on指令的作用是：为元素绑定事件。

事件名不需要写on。

指令可以简化为@。

绑定的方法定义在methods属性中。

语法：

<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我触发事件</button>

<!--简化写法-->
<button @事件名="函数名/vue表达式">点我触发事件</button>

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue事件处理</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="show">点我</button>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
            el:"#app",
            //定义vue的方法
            methods:{
                //定义show方法,弹出提示框
                show() {
                    alert("Hello Vue!!!");
                }
            }
        });
    </script>
</body>
</html>

3.2.1 v-on拓展

代码：

 <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">//敲击回车触发事件
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没");
                }
            },
        })
    </script>

案例：计数器

黑马程序员计数器案例视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>计数器</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- html结构 -->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div class="input-num">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
      </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 编码 -->
    <script>
      // 创建Vue实例
      var app = new Vue({
        el: "#app",
        data: {
          num: 1,
        },
        methods: {
          add: function () {
            // console.log('add');
            if (this.num < 10) {
              this.num++;
            } else {
              alert("别点啦,最大啦!");
            }
          },
          sub: function () {
            // console.log('sub');
            if (this.num > 0) {
              this.num--;
            } else {
              alert("别点啦,最小啦!");
            }
          },
        },
      });
    </script>
  </body>
</html>

3.3 判断语法(v-if和v-show)

v-show

v-if

区别：

v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

v-if: 条件不满足时, 元素不会存在.

v-show: 条件不满足时, 元素不会显示(但仍然存在).

案例：

<div id="app">
	<button @click="show = !show">点我</button>
	<h1 v-if="show">Hello v-if.</h1>
    <h1 v-show="show">Hello v-show.</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
        	show:true
        }
    });
</script>

3.4 显示数据(v-bind)

概述：

v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

语法：

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        //使用v-bind指令来引入src的属性值
        <img v-bind:src="imgSrc" alt="">
        <br>
        //使用v-bind指令简写方式来引入title属性值，并拼接上字符串，使用三元表达式来设置class属性，使其css样式生效，@click绑定单击事件
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        //使用v-bind指令简写方式来引入title属性值，并拼接上字符串，class属性值使用key-vluer形式，判断vluer真假进行赋值，使其css样式生效，@click绑定单击事件
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

案例：图片切换

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片切换</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="mask">
      <div class="center">
        <h2 class="title">
          <img src="./images/logo.png" alt="" />
          深圳创维校区环境
        </h2>
        <!-- 图片 -->
        <img :src="imgArr[index]" alt="" />
        <!-- 左箭头 -->
        <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a> -->
        <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a
          href="javascript:void(0)"
          v-show="index<imgArr.length-1"
          @click="next"
          class="right"
        >
          <img src="./images/next.png" alt="" />
        </a>
      </div>
    </div>
    <!-- 引入Vue组件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      var app = new Vue({
        el: "#mask",
        data: {
          imgArr: [
            "./images/00.jpg" /* 把所有图片放到一个数组当中 */,
            "./images/01.jpg",
            "./images/02.jpg",
            "./images/03.jpg",
            "./images/04.jpg",
            "./images/05.jpg",
            "./images/06.jpg",
            "./images/07.jpg",
            "./images/08.jpg",
            "./images/09.jpg",
            "./images/10.jpg",
          ],
          index: 0,
        },
        methods: {
          /* 左箭头点击事件 */
          prev: function () {
            this.index--;
          },
          /* 右箭头点击事件 */
          next: function () {
            this.index++;
          },
        },
      });
    </script>
  </body>
</html>

3.5 循环遍历(v-for)

3.5.1 遍历数组

语法：

v-for="item in items"
v-for="(item,index) in items"
items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始

代码：

<div id="app">
	<ul>
        <li v-for="(user, index) in users">
        	{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
                {"name":"白卓冉","age":8,"gender":"男"},
                {"name":"白大锅","age":12,"gender":"女"},
                {"name":"白仙女","age":4,"gender":"男"}
            ]
        }
    });
</script>

3.5.2 遍历对象

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
123
value，对象的值
key， 对象的键
index, 索引，从0开始

代码：

<div id="app">
	<ul>
        <li v-for="(value,key,index) in person">
        	{{index}}--{{key}}--{{value}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            person:{"name":"白大锅", "age":3, "address":"中国"}
        }
    });
</script>

3.5.2 key

概述：

key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

案例:

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <li v-for="name in list">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: ["孙悟空", "猪八戒", "沙和尚"]
        },
        methods: {
            add() {
                //注意这里是unshift,向数组的头部添加一个元素
                this.list.unshift("唐僧");
            }
        }
    });
</script>

效果:

在这里插入图片描述

解决方案：

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <!-- 添加:key即可. 注意,key中的值必须是唯一且不会改变的值-->
        <li v-for="name in list" :key="name">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>

3.6 数据双向绑定数据(v-model)

概述：

Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组

案例：

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="酷丁鱼";
                }
            },
        })
    </script>
</body>

3.6.1form表单数据提交

例子:传json格式跟formData格式的两种情况

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="请输入昵称" v-model="formMess.account">
      <input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
      <input type="text" placeholder="请输入手机号" v-model="formMess.phone">
    </form>
    <span class="but" @click="onSubmit()">提交</span>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: "from",
  data() {
    return {
    	formMess:{
	    "account":"",
	    "act_pwd":"",
	    "phone":""
	}
    };
  },
  methods: {
    onSubmit() {
      /* json格式提交： */
      // let formData = JSON.stringify(this.formMess);
 
      /* formData格式提交： */
      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }
 
        axios({
	    method:"post",
	    url:"xxxxxxx",
	    headers: {
		  "Content-Type": "multipart/form-data"
	    },
	    withCredentials:true,
	    data:formData
	}).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{
  form{
    width:90%;
    margin: auto;
    border:.01rem solid gray;
    display: flex;
    flex-wrap: wrap;
    input{
      width:80%;
      height:.5rem;
      margin-bottom: .2rem;
      border:.01rem solid black;
      height:.5rem;
    }
  }
  .but{
    font-size: .14rem;
    margin-left:5%;
  }
}
</style>

3.7 Vue页面跳转(两种方法)

3.7.1 方法一(标签实现)

<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
             :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
              <span class="tabNav-txt">书 架</span>

</router-link>

3.7.2 方法二(this.$router.push()实现)

当this.$router.push()只有一个参数时默认为跳转地址最多可传两个参数第二个参数为地址参数

<a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 页</span>

</a>

toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));

}

案例：小黑记事本

小黑记事本教程

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1 }}.</span>
            <label>{{ item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{ list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        list: ["写代码", "吃饭饭", "睡觉觉"],
        inputValue: "好好学习,天天向上"
      },
      methods: {
        add: function () {
          this.list.push(this.inputValue);
        },
        remove: function (index) {
          console.log("删除");
          console.log(index);
          this.list.splice(index, 1);
        },
        clear: function () {
          this.list = [];
        }
      },
    })
  </script>
</body>

</html>

4、Axios的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios基本使用</title>
  </head>

  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
      document.querySelector(".get").onclick = function () {
        axios
          .get("https://autumnfish.cn/api/joke/list?num=3")
          // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
          .then(
            function (response) {
              console.log(response);
              alert(response.data.data);
            },
            function (err) {
              console.log(err);
            }
          );
      };
      /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
      document.querySelector(".post").onclick = function () {
        axios
          .post("https://autumnfish.cn/api/user/reg", {
            username: "盐焗西兰花",
          })
          .then(
            function (response) {
              console.log(response);
              console.log(this.skill);
            },
            function (err) {
              console.log(err);
            }
          );
      };
    </script>
  </body>
</html>

726370107)]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios基本使用</title>
  </head>

  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
      document.querySelector(".get").onclick = function () {
        axios
          .get("https://autumnfish.cn/api/joke/list?num=3")
          // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
          .then(
            function (response) {
              console.log(response);
              alert(response.data.data);
            },
            function (err) {
              console.log(err);
            }
          );
      };
      /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
      document.querySelector(".post").onclick = function () {
        axios
          .post("https://autumnfish.cn/api/user/reg", {
            username: "盐焗西兰花",
          })
          .then(
            function (response) {
              console.log(response);
              console.log(this.skill);
            },
            function (err) {
              console.log(err);
            }
          );
      };
    </script>
  </body>
</html>