02 vue框架内部的各种指令和axios操作的代码详解

前言

第一个完整的Vue程序

el：挂载点和 data：数据对象

前言

Vue框架数据交互的本质是：dom元素的定位与Vue对象内部el的关联，页面的变量与Vue对象内部data的交互，页面dom的js函数与Vue内部methods的关联

第一个完整的Vue程序

<!DOCTYPE heml>
<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>Vue基础</title>
    </head>
    <body>
        <div id="app">
            {
    
    { message }}
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app", 
                data:{
                    message:"Hello Vue"
                }
            })
        </script>
    </body>
</html>

注意：必须进行开发环境版本的声明

el：挂载点和 data：数据对象

el：挂载点是干什么的？就是声明new的Vue实例对象所管理的数据data在HTML页面中的哪一个dom，#代表id属性
data：数据对象，个人理解HTML中使用插值表达式{ {变量名}}，在Vue对象中，就是为变量赋值，然后值就渲染到页面了，可以通过 this在Vue对象的methods中访问到Vue对象中的data数据

<div id="app">
    {
    
    { message }}
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app", 
        data:{
            message:"Hello Vue"
        }
    })
</script>

可运行示例代码：

<!DOCTYPE heml>
<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>data数据对象</title>
    </head>
    <body>
        <div id="app"> <!--div是文本组件-->
            {
    
    { message }} <!--获取普通数据对象-->

            <h2> {
    
    { school }} </h2> <!--h2属于标题标签,获取school对象-->
            <h2> {
    
    { school.name }} {
    
    { school.mobile }}</h2> <!--获取school对象中的某个属性-->

            <ul> <!--ul标签属于无序列表标签，与li标签搭配使用，可以将多个li标签内容打印成一个列表-->
                <li> {
    
    { campus }} </li>
            </ul>
            <ul> <!--ul标签属于无序列表标签，与li标签搭配使用，可以将多个li标签内容打印成一个列表-->
                <li> {
    
    { campus[0] }} </li>
                <li> {
    
    { campus[1] }} </li>
                <li> {
    
    { campus[2] }} </li>
            </ul>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",  //el是选择挂载元素点
                data:{ //data是挂载元素点所需要渲染的内容
                    //不同属性之间需要用逗号隔开
                    message:"你好 小黑！",  //普通数据类型
                    school:{ //对象类型，可以理解为结构体
                        name:"黑马程序员",
                        mobile:"15538779937"
                    },
                    campus:["北京校区","上海校区","深圳校区"] //数组类型
                }
            })
        </script>

    </body>
</html>

v-text指令

v-text指令完成的任务就是将data中值，赋给html页面中挂载点所在的dom元素，有两种表现形式见下

<div id="app">
    <h2 v-text=" message+'!' "></h2> <!--形式1：data中变量的值会完全替换整个标签，不管原本存在什么-->
    <h2>深圳{
    
    {message + "!"}}</h2> <!--形式2：只会用变量值替换差值表达式，不会影响其他原来设定的值-->
</div>
var app = new Vue({
    el:#app,
    data:{
        message:"黑马程序员"
    }
})

可运行示例代码：

<!DOCTYPE heml>
<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-text指令</title>
    </head>
    <body>
        <div id="app">
            <h2 v-text="  message +'!!!!!' ">这几个字不会显示</h2> <!--空格没有影响-->
            <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:"v-text指令"
                }
            })
        </script>
    </body>
</html>

v-html指令

v-html起作用，是在声明变量值是html语句，比如下述的例子，p标签的内容被解析成为一个a标签

<div id="app">
    <p v-html="content"></p>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            content:"<a href='http://www.itheima.com'>黑马程序员</a>"
        }
    })
</script>

可运行示例代码：

<!DOCTYPE heml>
<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-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/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    content:"<a href='http://www.itheima.com'>黑马程序员</a>"
                }
            })
        </script>
    </body>
</html>

v-on指令

v-on指令，是为了给dom元素绑定对应的逻辑实践，下述例子是为button按钮绑定一个点击事件，有两种变现形式，效果相同

其中click是固定写法，代表点击事件，doIt为自定义函数名称

<div id="app">
    <input type="button" value="按钮事件" v-on:click="doIt"><!--表现形式1-->
    <input type="button" value="按钮事件" @click="doIt"><!--表现形式2-->
</div>

var app = new Vue({
    el:#app,
    methods:{
        doIt:function(){
            //函数的实现逻辑
        }
    }
})

可运行示例代码：

<!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-on指令基础</title>
  </head>

  <body>
    <div id="app">
      <input type="button" value="v-on指令" v-on:click="doIt">
      <input type="button" value="v-on简写" @click="doIt">
      <h2 @click="changeFood">{
    
    { food }}</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          food: "西蓝花"
        },
        methods:{
          doIt:function(){
            alert("做这个");
          },
          changeFood:function(){
            this.food += "很好吃";
          }
        }
      })
    </script>
  </body>
</html>

v-show指令

v-show指令可根据表达式的真假，切换元素的显示和隐藏

<div id="app">
    <img src="地址" v-show="true">
    <img src="地址" v-show="isShow">
    <img src="地址" v-show="age>=18">
</div>

var app = new Vue({
    el:#app,
    data:{
        isShow:false,
        age:16
    }
})

可运行示例代码：

<!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-show指令</title>
  </head>
  <body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    </div>

    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    </script>
  </body>
</html>

v-if指令

根据表达式的真假，切换和隐藏dom元素

<div id="app">
    <p v-if="true">我是一个p标签</p>
    <p v-if="isShow">我是一个p标签</p>
    <p v-if="表达式">我是一个p标签</p>
</div>

var app = new Vue({
    el:#app,
    data:{
        isShow:false
    }
})

可运行示例代码：

<!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-if指令</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="切换显示" @click="toggleIsShow">
            <p v-if="isShow">黑马程序员</p>
            <p v-show="isShow">黑马程序员 - v-show修饰</p>
            <h2 v-if="temperature>=35">热死啦</h2>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    isShow:false,
                    temperature:20
                },
                methods: {
                    toggleIsShow:function(){
                        this.isShow = !this.isShow;
                    }
                },
            })
        </script>
    </body>

</html>

v-bind指令

用于dom元素属性值的动态设置，有两种表现形式，见下

<div id="app">
    <!--形式1-->
    <img v-bind:src="imgSrc"> 
    <img v-bind:title="imgtitle">
    <img v-bind:class="{ isActive?'active':'' }"> <!--如果isActive的属性为真，class属性的值为active中的值，否则为空：''-->
    <img v-binde:class="{ active:isActive }"> <!--效果与上句相同-->

    <!--形式2-->
    <img :src="imgSrc">
    <img :title="imgSrc">
    <img :class="imgSrc">
</div>

var app = new Vue({
    el:#app,
    data:{
        imgSrc:"图片地址",
        imgTitle:"黑马程序员",
        isActive:false
    }
})

可运行示例代码：

<!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">
            <img v-bind:src="imgSrc" alt="">
            <br>
            <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
            <br>
            <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>

v-for指令

用于根据数据生成dom列表结构，可以理解为是数组方式生成dom元素

<div id="app">
    <ul>
        <li v-for="(item, index) in arr" :title="item"> <!--item是基本的数据类型-->
            {
    
    { index }} {
    
    { item }}
        </li>
        <li v-for="(item, index) in objArr"> <!--item是诸如字典的复杂数据类型-->
            {
    
    { item.name }}
        </li>
    </ul>
</div>

var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5],
        objArr:[
            {name:"Jack"},
            {name:"Rose"}
        ]
    }
})

可运行示例代码：

<!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-for指令</title>
    </head>

    <body>
        <div id="app">
            <input type="button" value="添加数据" @click="add">
            <input type="button" value="移除数据" @click="remove">

            <ul>
                <li v-for="(it,index) in arr">
                    {
    
    { index+1 }}黑马程序员校区:{
    
    { it }}
                </li>
            </ul>
            <h2 v-for="item in vegetables" v-bind:title="item.name">
                {
    
    { item.name }}
            </h2>
        </div>
        <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    arr:["北京","上海","广州","深圳"],
                    vegetables:[
                        {name:"西兰花炒蛋"},
                        {name:"蛋炒西蓝花"}
                    ]
                },
                methods: {
                    add:function(){
                        this.vegetables.push({ name:"花菜炒蛋" });
                    },
                    remove:function(){
                        this.vegetables.shift();
                    }
                },
            })
        </script>
    </body>

</html>

v-on指令补充

v-on所规定的函数是可以进行自定义参数，并且v-on绑定的事件是通过事件修饰符指定，比如回车事件

各种事件的表达方式：https://cn.vuejs.org/v2/api/#v-on

<div id="app">
    <input type="button" @click="doIt(p1,p2)"> <!--绑定点击事件-->>
    <input type="text" @keyup.enter="sayHei"> <!--绑定回车事件-->
</div>

var app = new Vue({
    el:"#app",
    methods:{
        doIt:function(p1, p2){

        },
        sayHi:function(){
            
        }
    }
})

可运行示例代码：

<!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-on补充</title>
    </head>

    <body>
        <div id="app">
            <input type="button" value="点击" v-on:click="doIt(p1, p2, '哈哈哈', 180)"> <!--带参数的方法-->
            <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",
                data:{
                    p1:"老铁",
                    p2:"666"
                },
                methods: {
                    doIt:function(p1, p2, p3, p4){
                        console.log(p1 + p2 + p3 + p4);
                        console.log(p1);
                        console.log(p2);
                        console.log(p3);
                        console.log(p4);
                    },
                    sayHi:function(){
                        alert("吃了没");
                    }
                },
            })
        </script>
    </body>

</html>

v-model指令：

v-model指令可以实现双向数据绑定，通俗点的说，就是当页面dom元素的值发生改变，那么对应data中的数据也会发生改变，反之亦然

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

var app = new Vue({
    el:"#app",
    data:{
        message:"黑马程序员"
    }
})

<h1></h1>

可运行示例代码：

<!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-model指令</title>
    </head>

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

</html>

axios网络请求库

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

/*
当后端有请求params的情况，即：currentPage={当前页号}&pageSize={页面大小}
axios的写法如下
*/
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.get(地址,{
                params:{
                    key1:value1,
                    key2:value2
                }
               }).then(function(response){},function(err){})

axios.post(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{
                params:{
                    key1:value1,
                    key2:value2
                }
               }).then(function(response){},function(err){})

/*
当后端没有请求params的情况，即request内部只有一个body，例如
{
    "planAbstract": {
        "innerId": 1603960398793,
        "outerId": null,
        "planName": "观测计划2",
        "createUser": null,
        "startTime": null,
        "planDays": null,
    },
    "planDetails": [
        {
            "satelliteId":1,
            "detailBand": 0,
            "detailPolar": 1,
            "sequence": 1
        }
    ]
}
*/
axios的写法为：
var params = {
    "planAbstract": {
        "innerId": 1603960398793,
        "outerId": null,
        "planName": "观测计划2",
        "createUser": null,
        "startTime": null,
        "planDays": null,
    },
    "planDetails": [
        {
            "satelliteId":1,
            "detailBand": 0,
            "detailPolar": 1,
            "sequence": 1
        }
    ]
}
axios.post(地址,params).then(function(response){},function(err){})

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取相应的内容，或者错误信息

可运行示例代码：

<!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=6")
                // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
                .then(function (response) {
                    console.log(response);
                },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>

axios应用于vue的注意事项

axios回调函数中的this已经改变，无法通过this访问到data当中的数据
解决：将this保存起来，回调函数中直接保存的this即可

可运行示例代码：

<!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+vue</title>
    </head>

    <body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p> {
    
    { joke }}</p>
        </div>
        <!-- 官网提供的 axios 在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            /*
                接口:随机获取一条笑话
                请求地址:https://autumnfish.cn/api/joke
                请求方法:get
                请求参数:无
                响应内容:随机笑话
            */
            var app = new Vue({
                el:"#app",
                data:{
                    joke:"很好笑的笑话"
                },
                methods: {
                    getJoke:function(){
                        // console.log(this.joke);
                        var that = this;
                        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) {  })
                    }
                },
            })

        </script>
    </body>

</html>