Vue.js快速入门

最新推荐文章于 2023-12-25 11:21:01 发布

钢铁小宝宝

最新推荐文章于 2023-12-25 11:21:01 发布

阅读量436

点赞数 1

文章标签： vue.js javascript java

本文链接：https://blog.csdn.net/m0_62051002/article/details/128045718

版权

Vue基础-1.简介

1、Vue是一个JavaScript框架，相比于JQuery这样的JS库，框架的功能更为强大，但是要使用它必须遵守一整套规则；
2、简化DOM操作
3、响应式的数据驱动。通俗讲就是页面是由数据来生成的，当数据改变以后，页面会同步的更新

Vue基础-2.第一个Vue程序

官方文档 :https://cn.vuejs.org
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--开发环境版本比较适合学习阶段使用，因为它有各种有意义的提示；-->

或者：
<!--生产版速度较快，代码是经过压缩的，但是那些帮助的提示信息就看不到了-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

我们学习阶段采用开发环境版本。

<!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>
</head>
<body>
    <!--第二步：添加div，设置id为app，里边两个"{{message}}""-->
<div id="app">
    {{ message }}   
 //"{{}}"将数据和页面结构关联起来,vue通过el属性的id选择器绑定id="app" 的元素
</div>

    <!--第一步：导入Vue.js,我们这里用的开发版本-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 第三步：添加script标签，通过var关键字，创建vue实例-->
    <script>
        var app = new Vue({
                el: '#app',
                data: {
    //data是vue实例中使用的数据
                    message: 'Hello Vue!'
                }
            })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue基础-3.el：挂载点

el属性是设置挂载点

1、Vue实例的作用范围是：Vue会管理el选项命中的元素及其内部的后代元素
2、是否可以使用其他的选择器：可以，但是建议使用id选择器
3、是否可以设置其他dom元素：可以设置其他的双标签，不能使用HTML和BODY

<!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>el挂载点</title>
</head>

<body>
    {{message}}
    <div id="app" class="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            //el: "#app",id选择器，以后推荐使用，因为id是唯一的
            //el:".app",类选择器
            el:"div",//标签选择器
            data: {
                message: "程序员"
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue基础-4.data：数据对象

1、Vue中用到的数据定义在data中
2、data中可以写复杂类型的数据
3、渲染复杂类型数据时，遵守js的语法即可

<!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>data数据对象</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school}}</h2>
        <h3>{{school.name}}</h3>
        <ul>
            <li>{{campus}}</li>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"人不行，别怪路不平",
                school:{
                    name:"齐齐哈尔大学",
                    mobile:"14323434567"
                },
                campus:["深圳","上海","北京"]
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue本地应用-1.v-text指令

1、v-text指令的作用是：设置标签的内容
2、默认语法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3、内部支持写表达式

<!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>v-text指令</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message">申申</h2>
        <h2 v-text="info">申申</h2>
        <!-- 只有这个显示出申申了 -->
        <h2>{{message}}申申</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"凡人修仙传",
                info:"斗罗大陆"
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue本地应用-2.v-html指令

1、v-html指令的作用：设置元素的innerHTML
2、内容中有html结构会被解析为标签
3、v-text指令无论内容是什么，只会解析为文本
4、解析文本使用v-text，需要解析html结构使用v-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>v-html指令</title>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                //content:"程序员"
                content:"<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue本地应用-3.v-on指令

1、v-on指令的作用是:为元素绑定事件
2、事件名不需要写on
3、指令可以简写为@
4、绑定的方法定义在methods属性中
5、方法内部通过this关键字可以访问定义在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>v-on指令</title>
</head>
<body>
    <div id="app">
        <!-- 两种绑定方式 v-on和@ -->
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西红柿炒鸡蛋"
            },
            methods:{
                doIt:function(){
                    alert('做IT！');
                },
                changeFood:function(){
                    // 拿到数据，通过this.food就可以拿到西红柿炒鸡蛋这个值
                    //console.log(this.food)
                    //点击一下多一个"好好吃"
                    this.food+='好好吃'
                }
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Vue本地应用-4.计数器案例

1、创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
2、v-on指令的作用是绑定事件，简写为@
3、方法中通过this关键字获取data中的数据
4、v-text指令的作用是设置元素的文本值，简写为：{{}}

4.1实现逻辑步骤如下：

1、1. data中定义数据:比如num
2、methods中添加两个方法:比如add(递增),sub(递减)
3、使用v-text将num设置给span标签
4、使用v-on将add,sub分别绑定给+,-按钮
5、累加的逻辑:小于10累加,否则提示
6、递减的逻辑:大于0递减,否则提示

<!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>计数器</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <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@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++
                    }else{
                        alert('别加了，已经最大了！')
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--
                    }else{
                        alert('别减了，已经最小了！')
                    }
                   
                }
            }
        })
    </script>
</body>
</html>

Vue本地应用-4.v-show指令

1、v-show指令的作用是:根据真假切换元素的显示状态
2、原理是修改元素的display,实现显示隐藏
3、指令后面的内容,最终都会解析为布尔值
4、值为true元素显示,值为false元素隐藏
5、数据改变之后,对应元素的显示状态会同步更新

<!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>v-show指令</title>
</head>
<body>
    <div id="app">
        <!-- 添加按钮触发方法 -->
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img src="./img/monkey.gif" alt="" v-show="isShow">
        <img src="./img/monkey.gif" alt="" v-show="age>=18">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,//默认是不显示图片的
                //测试表达式
                age:2
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow
                },
                addAge:function(){
                    this.age++
                }
            }
        })
    </script>
</body>
</html>

Vue本地应用-5.v-if指令

1、 v-if指令的作用是:根据表达式的真假切换元素的显示状态
2、本质是通过操纵dom元素来切换显示状态(标签里的内容)，而v-show是切换样式来改变显示状态的
3、表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4、频繁的切换v-show,反之使用v-if,前者的切换消耗小

<div id="app">
        <input type="button" value="切换显示状态"  @click="changeIsShow">
        <input type="button" value="累加年龄"  @click="addAge">
        <p v-if="isShow">"我喜欢你"</p>
        <p v-show="isShow">"我喜欢你"</p>
        <p v-if="age>39">好热啊！</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:35
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow
                },
                addAge:function(){
                    this.age++
                }
            }
        })
    </script>

Vue本地应用-6.v-bind指令

v-bind:属性名=表达式

1、v-bind指令的作用是:为元素绑定属性
2、完整写法是 v-bind:属性名
3、简写的话可以直接省略v-bind,只保留 :属性名
4、需要动态的增删class建议使用对象的方式

 <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt=""><br>
        <!-- 简写,这种更为常用 -->
        <img :src="imgSrc" alt="">
        <!-- 当鼠标停留在图片上时，"我是程序员"就显示出来了 -->
        <img :src="imgSrc" alt="" :title="imgTitle">
        <!-- 向加一些!!!符号 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''"
        @click="toggleActive">
        <!-- 简写 active是否生效取决于isActive的值-->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" 
        @click="toggleActive">
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://www.itheima.com/images/logo.png",
                imgTitle:"我是程序员",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

Vue本地应用-7.图片切换案例

用v-if会直接把这个元素从dom数中移除，性能的消耗相对而言会大一些；所以不是不能使用v-if，是不建议使用它

1、列表数据使用数组保存
2、v-bind指令可以设置元素属性,比如src
3、v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

<!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/css/index.css" />
</head>

<body>
 <div id="mask">
   <div class="center">
     <h2 class="title">
       <img src="./img/logo.png" alt="">
       深圳创维校区环境
     </h2>
     <!-- 图片 -->
     <img :src="imgArr[index]" alt="" />
     <!-- 左箭头 -->
     <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
       <img src="./img/prev.png" alt="" />
     </a>
     <!-- <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
         <img src="./img/prev.png" alt="" />
       </a> -->
     <!-- 右箭头 -->
     <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
       <img src="./img/next.png" alt="" />
     </a>
   </div>
 </div>

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

 <script>
   var app = new Vue({
     el: "#mask",
     data: {
       imgArr: [
         "./img/00.jpg",
         "./img/01.jpg",
         "./img/02.jpg",
         "./img/03.jpg",
         "./img/04.jpg",
         "./img/05.jpg",
         "./img/06.jpg",
         "./img/07.jpg",
         "./img/08.jpg",
         "./img/09.jpg",
         "./img/10.jpg",
       ],
       index: 0
     },
     methods: {
       prev:function(){
         this.index--;
       },
       next:function(){
         this.index++;
       }
     },
   })
 </script>
</body>
</html>

Vue本地应用-8.v-for指令

1、v-for指令的作用是:根据数据生成列表结构
2、数组经常和v-for结合使用
3、语法是( item,index ) in 数据
4、tem 和 index 可以结合其他指令一起使用
5、数组长度的更新会同步到页面上,是响应式的

<!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>v-for指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="添加元素" @click="add">
        <input type="button" value="移除元素" @click="remove">
        <ul>
            <li v-for="item in arr">
            城市:   {{item}} 
            </li>
        </ul>
        <ul>
            <li v-for="(index,item) in arr">
                index城市: {{item}}
            </li>
        </ul>
        <h2 v-for="it in vagetables">
            蔬菜：{{it}}
        </h2>
        <h2 v-for="it in vagetables" :title="it.name">
            蔬菜：{{it.name}}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","天津","上海","重庆"],
                vagetables:[
                    {name:"西红柿"},
                    {name:"马铃薯"}
                ]
            },
            methods:{
                add:function(){
                    this.vagetables.push({name:"大倭瓜"})
                },
                remove:function(){
                    // 移除最左边的元素
                    this.vagetables.shift()
                }
            }
        })
    </script>
</body>
</html>

Vue本地应用-9.v-on指令补充

1、事件绑定的方法写成函数调用的形式，可以传入自定义参数
2、定义方法时需要定义形参来接收传入的实参
3、事件的后面跟上 .修饰符 可以对事件进行限制
4、.enter 可以限制触发的按键为回车
5、事件修饰符有多种，具体看下面文档

查看文档： https://cn.vuejs.org/v2/api/#v-on

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <!-- 这种情况就是输入一个字就弹出"吃了没"弹窗-->
        <input type="text" @keyup="sayHi">
        <!-- 这种情况是随便输入字符，点击"回车"之后才出现弹窗 -->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <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('make up')
                    console.log(p1,p2)
                },
                sayHi:function(){
                    alert('吃了没？')
                }
            }
        })
    </script>
</body>

Vue本地应用-10.v-model指令

1、v-model指令的作用是便捷的设置和获取表单元素的值
2、绑定的数据会和表单元素值相关联
3、绑定的数据←→表单元素的值

<body>
    <div id="app">
        <input type="button" value="改变message" @click="setMethods">
        <h2>{{message}}</h2>
        <input type="text" v-model="message" @keyup.enter="getMethods">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"我是程序员"
            },
            methods:{
                getMethods:function(){
                    alert(this.message)
                },
                setMethods:function(){
                    this.message = '他是架构师'
                }
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述

Vue本地应用-11.小黑记事本

11.1、如图所示功能：

在这里插入图片描述

11.2 新增功能

在这里插入图片描述

注意：

1、v-for指令的作用：根据一个数组生成列表结构
2、v-model指令的作用：双向绑定数据，可以把表单元素中的内容和data数据关联起来
3、v-on指令，事件修饰符：绑定事件，结合事件修饰符可以做一些限制，这里使用的是.enter触发的按键
4、通过审查元素快速定位：

11.3删除功能：

本质是利用索引和事件的传参

在这里插入图片描述

11.4统计功能

在这里插入图片描述

11.5清空功能

在这里插入图片描述

11.5清空功能

在这里插入图片描述

整个功能实现：

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

Vue网络应用-1.axios基本使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

在这里插入图片描述

axios作为一个功能强大的网络请求库，使用它首先应该导包，如下：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
导入之后，会在页面上注册一个全局的axios对象，通过它可以发送请求了。

在这里插入图片描述

1、axios必须先导入才可以使用
2、使用get或post方法即可发送对应的请求
3、then方法中的回调函数会在请求成功或失败时触发
4、通过回调函数的形参可以获取响应内

文档地址：https://github.com/axios/axios

<!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>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(笑话条数,数字)
                响应内容:随机笑话
            */
        // 先看get
        document.querySelector(".get").onclick = function(){
            //axios.get("https://autumnfish.cn/api/joke/list?num=3")
            // 这个是测试错误的地址，报404
            axios.get("https://autumnfish.cn/api/joke/list1?num=3")
            .then(function(response){
                console.log(response)
            },function(error){
                console.log(error)
            })
        }
         /*
                接口2:用户注册
                请求地址:https://autumnfish.cn/api/user/reg
                请求方法:post
                请求参数:username(用户名,字符串)
                响应内容:注册成功或失败
            */
        document.querySelector(".post").onclick = function () {
            //axios.post("https://autumnfish.cn/api/user/reg",
            // 这个是错误的地址，报404
            axios.post("https://autumnfish.cn/api/user/1reg",
            {username:"jack"})
            .then(function(response){
                console.log(response)
            })
        }
    </script>
</body>
</html>

Vue网络应用-2.axios+vue

网络应用的核心是：data中定义的数据一部分是通过网络获取到的，所以在方法中发送网络请求，在响应回来之后把服务器返回的数据设置给data中对应的值

this会变每次取到的数据不同，怎么办？把他存起来

methods: {
                getJokes: function () {
                    var that = this
                    //console.log(this.joke)
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            //console.log(response);
                            console.log(response.data)
                            //console.log(this.joke)
                            that.joke = response.data
                //这样就实现了在页面上点一下变一个的效果
                        }, function (err) {

                        })
                }
            },

注意：

1、axios回调函数中的this已经改变,无法访问到data中数据
2、把this保存起来,回调函数中直接使用保存的this即可
3、和本地应用的最大区别就是改变了数据来源

<!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>axios+vue结合使用</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJokes">
        <p>{{joke}}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        /*
        接口1:随机笑话
        请求地址:https://autumnfish.cn/api/joke
        请求方法:get
        请求参数:num(笑话条数,数字)
        响应内容:随机笑话
        */
        var app = new Vue({ 
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJokes: function () {
                //通过that将this保存起来
                    var that = this
                    //console.log(this.joke)
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            //console.log(response);
                            console.log(response.data)
                            //console.log(this.joke)
                            //将页面返回的数据传给this
                            that.joke = response.data
                        }, function (err) { })
                }
            },
        })
    </script>
</body>
</html>

钢铁小宝宝

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js快速入门

Vue快速入门，适合新手
复制链接

扫一扫

Vue.js快速入门

Vue基础-1.简介

Vue基础-2.第一个Vue程序

Vue基础-3.el：挂载点

Vue基础-4.data：数据对象

Vue本地应用-1.v-text指令

Vue本地应用-2.v-html指令

Vue本地应用-3.v-on指令

Vue本地应用-4.计数器案例

4.1实现逻辑步骤如下：

Vue本地应用-4.v-show指令

Vue本地应用-5.v-if指令

Vue本地应用-6.v-bind指令

Vue本地应用-7.图片切换案例

Vue本地应用-8.v-for指令

Vue本地应用-9.v-on指令补充

Vue本地应用-10.v-model指令

Vue本地应用-11.小黑记事本

11.1、如图所示功能：

11.2 新增功能

11.3删除功能：

11.4统计功能

11.5清空功能

11.5清空功能

Vue网络应用-1.axios基本使用

Vue网络应用-2.axios+vue

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