P&G小站

# 第八模块：前端VUE2-常见指令

image-20220119122744465

关于vue.js的版本

  • vue2，经典版本，现在绝大部分的企业项目都是用vue2版本开发。
  • vue3，新版本，未来的趋势。

# 1.vue.js 初体验

基于vue.js框架来编写项目需要以下几个步骤：

  • 导入vue.js包（CDN）

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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">
    <title>Title</title>
    <!-- 1.引入vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
<div id="app">
    <h1>欢迎学习Vue.js</h1>
    <div>我叫{{name}}，微信{{wechat}}</div>
    
    <input type="button" value="点我" v-on:click="clickMe">
</div>


<script>
	// 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
        el: '#app',
        data: {
            name: 'linda',
            wechat: 'wx_linda'
        },
        methods: {
            clickMe: function () {
                // 获取值this.name
                // 修改值this.name = "xx"
                this.name = "linda";
                this.wechat = "wx_linda";
            }
        }
    })
</script>
</body>
</html>

# 2.vue常见指令

想要使用vue.js来进行开发，就必须学会vue.js中提供的指令，明白每个指令是什么意思，才能更灵活的让他去显示我们想要的效果。

# 2.1 插值表达式

一般在显示文本内容的标签中使用。

<!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>v2</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>我叫{{name}}, 我喜欢{{hobby}}, 邮箱:{{dataInfo.email}}</div>
        <ul>
            <li>{{"tom"}}</li>
            <li>{{"tom"+"linda"}}</li>
            <li>{{base+1+1}}</li>
            <li>{{1===1?"linda":"tom"}}</li>
        </ul>
        <ul>
            <li>{{condition?"linda":"tom"}}</li>
        </ul>

        <input type="button" value="点我" v-on:click="clickMe">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data:{
                name: "linda",
                hobby: "basketball",
                dataInfo: {
                    id: 1,
                    email: "linda@gmail.com"
                },
                condition: false,
                base: 1
            },
            methods:{
                "clickMe": function(){
                    this.name = "新名字";
                    this.condition = true;
                    this.dataInfo.email = "new@live.com";
                    this.base += 100;

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

# 2.2 v-bind指令

一般用于对标签中的属性进行操作。

<!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>v3</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="vue.js"></script>
    <style>
        .ig{
            border: 2px solid red;
        }
        .info {
            color: blue;
        }

        .danger {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <img src='satomi.png' class='c1' />
        <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

        <h1 v-bind:class="{info: v1, danger: v2}">新年快乐呀~</h1>
        <h1 v-bind:class="clsDict">新年快乐嘿~</h1>
        <h1 v-bind:class="[a1, a2]">新年快乐哦~</h1>
        <h1 v-bind:class="[1===1?a1:'y', a2]">新年快乐哇~</h1>

        <h2 v-bind:style="{color: clr, fontSize:size+'px'}">222</h2>
        <h2 style="color: red;font-size: 18px">333</h2>

        <input type="button" value="点我" v-on:click="clickMe">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data:{
                imageUrl: "satomi.png",
                cls: "ig",
                v1: true,
                v2: true,
                clsDict: {
                    info: false,
                    danger: true
                },
                a1: "info",
                a2: "danger",
                clr: "red",
                size: 18
            },
            methods: {
                clickMe: function(){
                    this.v1 = false;
                }
            }
        });
    </script>
</body>
</html>

v-bind注意：

  • 简写的格式::属性名=xxx，例如：

    <h1 v-bind:class="v1"></h1>
<h1 :class="v1"></h1>
<img :src="xx" />

  • v-bind属于单向绑定（ JS修改->HTML修改 )。

# 2.3 v-model指令

一般用于在交互的标签中使用，例如：input、select、textarea等。【双向绑定】

<!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>v4</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            用户名:<input type="text" v-model="user">
        </div>
        <div>
            密  码:<input type="text" v-model="pwd">
        </div>
        <input type="button" value="登录" v-on:click="login"/>
        <input type="button" value="重置" v-on:click="reset"/>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                user: "",
                pwd: ""
            },
            methods:{
                login: function(){
                    console.log("进行登录操作...")
                    console.log(this.user, this.pwd)
                },
                reset: function(){
                    console.log("进行重置操作...");
                    this.user = "";
                    this.pwd = "";
                }
            }  
        }
        );
    </script>
</body>
</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>v5</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            Username<input type="text" v-model="user">
        </div>
        <div>
            Password<input type="passwod" v-model="pwd">
        </div>
        <div>
            Sex 
            <input type="radio" v-model="sex" value="1">男
            <input type="radio" v-model="sex" value="2">女
        </div>
        <div>
            Hobby
            <input type="checkbox" v-model="hobby" value="11">足球
            <input type="checkbox" v-model="hobby" value="22">篮球
            <input type="checkbox" v-model="hobby" value="33">羽毛球
        </div>
        <div>
            City
            <select v-model="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            擅长领域
            <select v-model="tech" multiple>
                <option value="11">Python</option>
                <option value="22">Golang</option>
                <option value="33">MySQL</option>
                <option value="44">JavaScript</option>
            </select>
        </div>
        <div>
            其他
            <textarea v-model="other"></textarea>
        </div>
        <input type="button" value="注册" v-on:click="register"/>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                user: "",
                pwd: "",
                sex: "1",
                hobby: ["11"],
                city: ["bj"],
                tech: ["11", "22"],
                other: ""
            },
            methods:{
                register: function(){
                    console.log("进行注册操作...")
                    console.log("use=" + this.user);
                    console.log("pwd=" + this.pwd);
                    console.log("sex=" + this.sex);
                    console.log("hobby=" + this.hobby);
                    console.log("city=" + this.city);
                    console.log("tech=" + this.tech);
                    console.log("other=" + this.other);
                }
            }
            
        }
        );
    </script>
</body>
</html>

# 2.4 v-for指令

用户数据进行循环并展示。

示例1：

<div id="app">
    <ul>
        <li v-for="item in dataList">{{ item }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: ["吃饭", "睡觉", "打豆豆"],
        }
    })
</script>

示例2：

<div id="app">
    <ul>
        <li v-for="(item,idx) in dataList">{{idx}} - {{ item }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: ["吃饭", "睡觉", "打豆豆"],
        }
    })
</script>

示例3：

<div id="app">
    <ul>
        <li v-for="(value,key) in dataDict">{{key}} - {{ value }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataDict: {
                id: 1,
                age: 18,
                name: "linda"
            }
        }
    })
</script>

示例4：

<div id="app">
    <ul>
        <li v-for="(item,idx) in cityList">{{item.id}} - {{ item.text }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cityList: [
                {id: 11, text: "上海"},
                {id: 12, text: "北京"},
                {id: 13, text: "深圳"},
            ]
        }
    })
</script>

示例5：

<ul>
	<li> <span>id 11</span>  <span>text 上海</span> </li>
	。。
	。。
</ul>

<div id="app">
    <ul>
        <li v-for="(item,idx) in cityList">
        	<span v-for="(v,k) in item">{{k}} {{v}}</span>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cityList: [
                {id: 11, text: "上海"},
                {id: 12, text: "北京"},
                {id: 13, text: "深圳"},
            ]
        }
    })
</script>

# 2.5 v-on指令

事件相关的指令，例如：

v-on:click
v-on:dblclick
v-on:mouseover，
v-on:mouseout，
v-on:change
v-on:focus
...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-on:click="clickMe">点击</li>
        <li @click="clickMe">点击</li>
        <li v-on:dblclick="doSomething('双击')">双击</li>
        <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            clickMe: function () {
                alert("点击了")
            },
            doSomething: function (msg) {
                console.log(msg);
            }
        }
    })
</script>
</body>
</html>

注意：事件可以简写为 <div @click="xx">点击</div>

# 案例：数据管理

数据的管理包括对数据：展示、动态添加、删除、修改。

  • 数据列表展示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [
                {name: "linda", age: 18},
                {name: "tom", age: 22},
            ]
        }
    })
</script>
</body>
</html>

  • 数据添加

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" value="新建" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            age: "",
            dataList: [
                {name: "linda", age: 19},
                {name: "tom", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                let row = {name: this.user, age: this.age};
                this.dataList.push(row);
                this.user = "";
                this.age = "";
            }
        }
    })
</script>
</body>
</html>

  • 删除数据

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" value="新建" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <input type="button" value="删除" @click="deleteRow" :data-idx="idx"/>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            age: "",
            dataList: [
                {name: "linda", age: 19},
                {name: "tom", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                let row = {name: this.user, age: this.age};
                this.dataList.push(row);
                this.user = "";
                this.age = "";
            },
            deleteRow: function (event) {
                // 根据索引删除dataList中的值
                let idx = event.target.dataset.idx;
                this.dataList.splice(idx, 1);
            }
        }
    })
</script>
</body>
</html>

  • 编辑修改数据

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" :value="title" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <input type="button" value="删除" @click="deleteRow" :data-idx="idx"/>
                <input type="button" value="编辑" @click="editRow" :data-idx="idx"/>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            editIndex: undefined,
            title: "新建",
            user: "",
            age: "",
            dataList: [
                {name: "linda", age: 19},
                {name: "tom", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                if (this.editIndex != undefined) {
                    // 修改
                    this.dataList[this.editIndex].name = this.user;
                    this.dataList[this.editIndex].age = this.age;
                } else {
                    let row = {name: this.user, age: this.age};
                    this.dataList.push(row);
                }
                this.user = "";
                this.age = "";
                this.editIndex = undefined;
                this.title = "新建";
            },
            deleteRow: function (event) {
                // 根据索引删除dataList中的值
                let idx = event.target.dataset.idx;
                this.dataList.splice(idx, 1);
            },
            editRow: function (event) {
                let idx = event.target.dataset.idx;
                // let name = this.dataList[idx].name;
                // let age = this.dataList[idx].age;
                // let {id, name} = {id: 1, name: "linda"};
                // console.log(id, name);
                let {name, age} = this.dataList[idx];
                this.user = name;
                this.age = age;
                this.title = "编辑";
                this.editIndex = idx;
            }
        }
    })
</script>
</body>
</html>

# 2.6 v-if指令

条件判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a v-if="isLogin">{{user}}</a>
    <a v-else>登录</a>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isLogin: false,
            user: "linda"
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="v1">阿里无人区</h1>

    
    <h1 v-if="v2">去西藏</h1>
    <h1 v-else>去新疆</h1>

    
    <div v-if="v3 === '北京'">
        <h1>天安门</h1>
    </div>
    <div v-else-if="v3 === '新疆'">
        <h1>乌鲁木齐</h1>
    </div>
    <div v-else-if="v3 ==='西藏'">
        <h1>拉萨</h1>
    </div>
    <div v-else>
        <h1>大理</h1>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            v1: true,
            v2: true,
            v3: "新疆"
        }
    })
</script>
</body>
</html>

# 2.7 v-show指令

根据条件显示或隐藏（标签都会渲染到页面）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="v1">可可西里</h1>
    <h1 v-show="!v1">罗布泊</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            v1: false,
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        label {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="密码登录" @click="isSms=false"/>
    <input type="button" value="短信登录" @click="isSms=true"/>
    
    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <label>密码</label>
            <input type="password" placeholder="密码">
        </p>
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isSms: false,
        }
    })
</script>
</body>
</html>

# 案例：用户登录

在编写案例之前，现在来学下axios，他是一个HTTP 库，可以发送Http请求。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        method: "post",
        url: 'https://api./login/',
        params: {
			v1:123,
            v2:456
        },
        data: {
            name:"linda",
            pwd:"123"
        },
        headers: {
            "Content-Type": "application/json"
        }
    }).then(function (res) {
        console.log(res.data);
    }).catch(function (error) {
		console.log(error);
    })
</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>day02v6</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <style>
        label {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="密码登录" @click="isSms=false"/>
        <input type="button" value="短信登录" @click="isSms=true"/>
        <div v-show="isSms">
            <p>
                <label>手机号</label>
                <input type="text" placeholder="手机号" v-model="sms.mobile">
            </p>
            <p>
                <label>验证码</label>
                <input type="text" placeholder="验证码" v-model="sms.code">
            </p>
        </div>
        <div v-show="!isSms">
            <p>
                <label>用户名</label>
                <input type="text" placeholder="用户名" v-model="info.username">
            </p>
            <p>
                <label>密码</label>
                <input type="text" placeholder="密码" v-model="info.password">
            </p>
        </div>
        <input type="button" value="登录" @click="login"> 
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            isSms: false,
            info:{
                username: "",
                password: ""
            },
            sms: {
                mobile: "",
                code: ""
            }
        },
        methods:{
            login: function(){
                let dataDict = this.isSms ? this.sms : this.info;

                let url;
                if (this.isSms) {
                    url = "http://127.0.0.1:8090/api/v1/login";
                } else {
                    url = "http://127.0.0.1:8090/api/v1/login";
                }

                axios({
                    method: "post",
                    url: url,
                    data: dataDict,
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function(res){
                    if (res.data.code !== 99999999) {
                        alert(res.msg);
                        return;
                    }
                    // 登录成功后跳转
                    window.location.href = "https://www.baidu.com"
                }).catch(function(error){
                    alert("请求异常，请重新操作。")
                })
            }
        }
    });
</script>
</html>
上次更新: 1/5/2023, 5:29:59 PM

← 第八模块：前端VUE2-组件化开发 →