Vue.js+axios+案例+组件

ele597

已于 2023-09-10 23:43:16 修改

阅读量222

点赞数

文章标签： vue.js 前端

于 2023-09-04 14:00:55 首次发布

本文链接：https://blog.csdn.net/qq_72004660/article/details/132295208

版权

学前须知：Html，css，JavaScript，AJAX

第一章 vue概念理解

1.1初识

1.1.0Vue.js入门文档官网：

Vue.js - 渐进式 JavaScript 框架 | Vue.js

API — Vue.js

1.1.1什么是Vue.js

Vue（读音 /vjuː/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。

1.1.2为什么要使用Vue.js

颠覆了传统的前端开发模式，不需要频繁操作DOM元素，通过数据的双向绑定来更新页面，有更多的时间去思考业务逻辑。下面我们通过两段代码了比较传统开发模式和使用Vue.js开发的不同。

Vue.js主要特点：

1.轻量高效 2.组件化开发 3.前端路由 4.状态管理 5.虚拟DOM

1.2理解MVVM模式

图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。当View发生变化时，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；当Model中的数据更新时，Data Bindings工具会帮我们更新页面中的DOM元素。

1.3Vue.js的响应式应用

下面我们通过一个实例帮助我们进一步了解数据的双向绑定，在Vue.js中我们可以使用v-model指令在表单上创建双向数据绑定。

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p> 
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello',
  }
})
</script>

许多前端框架（如Angular,React,Vue）都有自己的响应式引擎。对于Vue响应式，官方文档的解释是：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。简单理解就是：修改 data 属性之后，Vue 立刻监听到，立刻渲染页面，更新页面。下面我们通过一个实例来具体理解以下Vue的响应式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>compute</title>
    <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <div>Price:￥{{ price }}</div>
    <div>Total:￥{{ price*quantity }}</div>
    <div>Taxes:￥{{ totalPriceWithTax }}</div>
    <button @click="changePrice">改变价格</button>
  </div>
  <script type="text/javascript">
    var app=new Vue({
      el:'#app',
      data(){
        return{
          price: 5.00,
          quantity:2
        };
      },
      computed:{
        totalPriceWithTax(){
          return this.price*this.quantity*1.03;
        }
      },
      methods:{
        changePrice(){
          this.price=10;
        }
      },
    })
  </script>
</body>
</html>

第2章第一个Vue.js应用

2.1使用Vue

使用Vue.js的方式有很多，本章节介绍最常用的三种方式：

1. 将vue.js放在项目里，再导入<script src="vue.js" type="text/javascript"></script>

2. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

开发环境版本? ：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

3.通过npm安装

提示：使用npm安装属于工程化的开发，在第8章Vue脚手架的时候再详细介绍。在第8章以前讲基础内容的时候，我们全部使用引入Vue.js 文件的形式，在讲大项目的时候，我们全部使用vue-cli的工程化开发。

快速入门：

2.2实例及选项

2.3数据绑定

2.4计算属性

2.5生命周期

用处：在指定的声明周期做指定的事情，主要学会mounted即可，如获取客户端数据；与methods平级

2.6章节案例

第3章 Vue.js的内置指令

绑定的变量要在数据模型data中定义

3.1.v-test v-html v-on

3.1.1.v-test：

无论标签里有什么内容都会被替换掉；部分替换用{{xxx}}

字符串拼接：表达式v-text=“msg + ‘！！’ ”

3.1.2.v-html：

设置元素的innerHTML；普通文本与v-text没区别；但内部有html结构会解析出来

3.1.3v-on：

为元素绑定事件，简写为@事件名=“方法”

更改页面显示：在事件中修改数据，在方法里用this将数据拿出来更改

3.1.4示例：计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="sub">-</button>
  <div>{{ counter }}</div>
  <button @click="add">+</button>
</div>
  <script type="text/javascript">
    new Vue({
      el:"#app",
      data(){
        return{
          counter:1,
        };
      },
      methods: {
        sub:function () {
          if (this.counter>0){
            this.counter--;
          }else {
            alert("别点了，最小了！")
          }
        },
        add:function (){
          this.counter++;
        }
      }
    })
  </script>

</body>
</html>

传递自定义参数、事件修饰符：看api文档

3.2 条件渲染指令v-show v-if v-for

3.2.1v-show:

根据表达值的真假，切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="button" @click="ChangeIsShow" value="切换显示">
    <img v-show="isShow" src="https://img1.baidu.com/it/u=3539595421,754041626&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
<!--    v-show="trie"/"表达式"-->

  </div>
  <script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        isShow:false,
      },
      methods:{
        ChangeIsShow: function () {
          this.isShow= !this.isShow;
        }
      }
    })
  </script>
</body>
</html>

3.2.2v-if、v-bind

v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）；性能消耗比v-show大

v-bind(:src/ :class):设置元素的属性如src，title，class；字符串拼接；{active：isActive}比三元表达式更常用

示例：图片切换

定义图片数组；添加图片索引；绑定src属性；图片切换逻辑；显示状态切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>咒术回战</title>
    <script src="vue.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
  <div id="mask">
    <div>咒术回战画册</div>

<!--      左箭头-->
    <!-- 设置图片大小、图片悬浮-->
    <a href="#" @click="prev" class="left" v-show="index!=0">
    <!-- <img src="./pho/left.jpg">-->上一张
    </a>

<!--      图册-->
      <img :src="imgArr[index]">

<!--      右箭头，‘#’指页面不做其他变化？-->
    <a href="#" @click="next" class="right" v-show="index<7">下一张</a>
      <!-- <img src="right.jpeg">-->
  </div>
  <script type="text/javascript">
    new Vue({
      el:"#mask",
      data:{
        imgArr:[
            //图片数组！
           "./pho/1.jpg\n" ,
           "./pho/2.jpeg\n" ,
           "./pho/3.jpeg\n" ,
           "./pho/4.jpeg\n" ,
           "./pho/5.jpeg\n" ,
           "./pho/6.jpeg\n" ,
           "./pho/7.jpeg\n" ,
           "./pho/8.jpeg",
        //图片放在项目的目录下，复制时要补上图片的路径以及后面跟的是逗号不是加号
        ],
        index:0,
      },
      methods:{
        prev:function (){
          this.index--;
        },
        next:function (){
          this.index++;
        }
      },


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

3.2.3v-for:根据数据生成列表结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
      //列表打印
      <ul v-for="item in arrs">
        <li>地区：{{ item }}</li>
      </ul>

      <h2 v-for="ve in vegetables">{{ ve.name }}</h2>
      <input type="button" value="追加" @click="add"></input>
      <input type="button" value="移除" @click="remove"></input>
    </div>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      arrs:["上海","重庆","成都","北京","广州"],

    //   对象数组
      vegetables:[
        {name:"Flower"},{name:"Tree"}
      ]
    },
    methods:{
      add:function (){
        this.vegetables.push({name:"grass"});//追加
      },
      remove:function (){
        this.vegetables.shift();//移除最后一个
      }
    },
  })
</script>
</body>
</html>

示例：body里写一个成绩单表

user信息，1显示男，2显示女（v-if、v-else-if、v-show）

3.3 绑定：v-model：便捷获取和设置表单元素的值（双向数据绑定：同步更新）

案例：记事本

＜meta＞标签 name=“viewport“ 详解

第四章 Vue的网络应用

4.1axios网络请求（封装ajax）的基本使用

同步与异步

原生ajax比较繁琐，一般用封装的axios：1.映入js文件；2.使用axios发送请求并获取结果；重点掌握如何使用axios进行异步操作

axios：基本用例 | Axios 中文文档 | Axios 中文网

注意事项：

axios导入再用；

用get或post方法即可发送对应的请求；

then方法中的回调函数会在请求成功或失败是触发；

通过回调函数的形参可以获取响应内容，或错误信息；

简化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      /*接口一：随机笑话
      * 请求地址，请求方法，请求参数，响应内容*/
      document.querySelector(".get").onclick=function () {
        console.log("nihao");
        axios.get("https://autumnfish.cn/api/joke/list?num=3")
                .then(function (response) {
                  console.log(response);
        },function (err){
                  console.log(err);
                })
      }
      /*接口2：用户注册请求地址，请求方法，请求参数，响应内容：祖册成功或失败*/
      document.querySelector(".post").onclick=function () {
        console.log("buhao");
        axios.post("https://autumnfish.cn/api/user/reg",{username:"abc"})
                .then(function (response) {
                  console.log(response);
                },function (err) {
                  console.log(err);
                })
      }
    </script>
</body>
</html>

post:

4.2表格示例

4.3axios+vue=天气预报案例

1.回车查询

2.点击查询：点击热门城市（v-on自定义参数），查询数据，渲染数据

Vue综合应用：歌曲搜索+歌曲播放+封面+评论+播放动画+mv

1.歌曲搜索：按下回车；查询数据（axios接口 v-model）渲染数据（v-for数组列表 that ）

第五章 vue.js组件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> （搜索不到）

或者

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

https://blog.csdn.net/weixin_45630258/article/details/122443683

5.1组件的基本使用：组件化与根组件

组件是可复用的 Vue 实例，通过“<>” 包含组件名（如<button-counter>）在模板中使用。我们可以把组件作为自定义元素来使用。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

前端组件化开发是现在前端框架中一个非常重要的思想，将页面内容进行拆分之后，可独立开发独立维护，可复用性大大提高。哪个地方出问题，直接去修改的对应的组件即可。团队人员可以各自修改自己的组件，相互不影响，不冲突。

5.1.1全局组件

5.1.2局部组件

5.1.3data必须是一个函数，不是对象，才不会对其他实例有影响

5.2组件通信

5.3动态组件

5.4章节案例

计算器

<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
  <style>
    .calculator {
      width: 200px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .calculator input {
      width: 100%;
      margin-bottom: 10px;
    }
    .calculator button {
      width: 50%;
      padding: 5px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="num1" placeholder="输入第一个数字">
    <input type="text" id="num2" placeholder="输入第二个数字">
    <button onclick="add()">加</button>
    <button onclick="subtract()">减</button>
    <button onclick="multiply()">乘</button>
    <button onclick="divide()">除</button>
    <p id="result"></p>
  </div>

  <script>
    function add() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var result = num1 + num2;
      document.getElementById("result").innerHTML = "结果：" + result;
    }

    function subtract() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var result = num1 - num2;
      document.getElementById("result").innerHTML = "结果：" + result;
    }

    function multiply() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var result = num1 * num2;
      document.getElementById("result").innerHTML = "结果：" + result;
    }

    function divide() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
if (num2 === 0) {
document.getElementById(“result”).innerHTML = “除数不能为0”;
} else {
var result = num1 / num2;
document.getElementById(“result”).innerHTML = “结果：” + result;
}
}

ele597

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue.js+axios+案例+组件

Vue（读音 /vjuː/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。根据表达值的真假，切换元素的显示和隐藏
复制链接

扫一扫