1. vue 基础语法与使用

目录

Django vue 快速上手

1. 快速尝试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎光临 {{name}} {{age}}</h1>
    <h3>{{name}}, {{balance}}</h3>
    <input type="button" value="点击充值" @click="doCharge">

</div>

<script>

    var app = Vue.createApp({
        data: function (){
            return {
                name: "吴佩琦",
                age: 19,
                balance: 1000
            }
        },
        methods: {
            doCharge: function (){
                this.balance += 1000
            }
        }

    });

    app.mount("#app")

</script>

</body>
</html>

2. 选项式与组合式

组合式基础使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎光临 {{name}} {{age}}</h1>
    <h3>{{name}}, {{balance}}</h3>
    <input type="button" value="点击充值" @click="doCharge">

</div>

<script>

    var app = Vue.createApp({
        setup: function (){
            const name = "吴佩琦"
            var balance = Vue.ref(100)
            var age = Vue.ref(10)

            var doCharge = function (){
                balance.value += 100
            }

            return {name, balance, age, doCharge}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3. 解包和导包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎光临 {{name}} {{age}}</h1>
    <h3>{{name}}, {{balance}}</h3>
    <input type="button" value="点击充值" @click="doCharge">

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const name = "吴佩琦"
            var balance = ref(100)
            var age = ref(10)

            var doCharge = function (){
                balance.value += 100
            }

            return {name, balance, age, doCharge}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3. v-bind 指令

功能： 操作标签内属性

单个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .red{
            border: 5px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="url" alt="" v-bind:class="cls">
    <h3 v-bind:class="cls">你好</h3>
    <input type="button" @click="doChange" value="点击"></input>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var  url = "https://img1.baidu.com/it/u=2311880120,2509100540&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
            var cls = ref("")
            var doChange = function (){
                cls.value = "red"
            }
            return {url, doChange, cls}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .red{
            border: 5px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <h4 v-bind:class="[pink, green]">你好啊</h4>
    <input type="button" @click="doChange" value="点击"></input>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var pink = ref("pk")
            var green = ref("gr")
            var doChange = function (){
                pink.value = "pink"
                green.value = "green"
            }
            return {doChange, pink, green}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3. v-model 指令

作用： 用于用户交互标签 input/select/textarea

3.1 简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .red{
            border: 5px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" placeholder="请输入字符" v-model="user">
    <h3>{{user}}</h3>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var user = ref("wupeiqi")

            return {user}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3.2 案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <h3>用户登录</h3>
        <input type="text" placeholder="用户名" v-model="user">
        <input type="password" placeholder="密码" v-model="password">
        <p>
            <input type="button" value="提交" @click="onSubmit">
            <input type="button" value="重置" @click="onRest">
        </p>
    </div>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var user = ref("")
            var password = ref("")

            var onSubmit = function (){
                console.log(user.value, password.value)
            }

            var onRest = function (){
                user.value = ""
                password.value = ""
            }

            return {user, password, onSubmit, onRest}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3.3 另一种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <h3>用户登录</h3>
        <input type="text" placeholder="用户名" v-model="info.user">
        <input type="password" placeholder="密码" v-model="info.password">
        <p>
            <input type="button" value="提交" @click="onSubmit">
            <input type="button" value="重置" @click="onRest">
        </p>
    </div>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){

            const info = ref({
                user: "",
                password: ""
            })

            var onSubmit = function (){
                console.log(info.value.user, info.value.password)
            }

            var onRest = function (){
                info.value.user = ""
                info.value.password = ""
            }

            return {info, onSubmit, onRest}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3.4 单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <h3>用户登录</h3>
        <input type="text" placeholder="用户名" v-model="info.user">
        <input type="password" placeholder="密码" v-model="info.password">
        <p>
            <input type="radio" v-model="gender" value="1">男
            <input type="radio" v-model="gender" value="2">女
        </p>
        <p>
            <input type="button" value="提交" @click="onSubmit">
            <input type="button" value="重置" @click="onRest">
        </p>
    </div>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){

            var gender = ref("")

            const info = ref({
                user: "",
                password: ""
            })

            var onSubmit = function (){
                console.log(info.value.user, info.value.password, gender.value)
            }

            var onRest = function (){
                info.value.user = ""
                info.value.password = ""
            }

            return {info, onSubmit, onRest, gender}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3.5 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <h3>用户登录</h3>
        <input type="text" placeholder="用户名" v-model="info.user">
        <input type="password" placeholder="密码" v-model="info.password">
        <p>
            <input type="checkbox" v-model="info.hobby" value="1">篮球
            <input type="checkbox" v-model="info.hobby" value="2">足球
            <input type="checkbox" v-model="info.hobby" value="3">乒乓球

        </p>
        <p>
            <input type="button" value="提交" @click="onSubmit">
            <input type="button" value="重置" @click="onRest">
        </p>
    </div>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){

            var gender = ref("")

            const info = ref({
                user: "",
                password: "",
                hobby:[]
            })

            var onSubmit = function (){
                console.log(info.value.user, info.value.password, info.value.hobby, gender.value)
            }

            var onRest = function (){
                info.value.user = ""
                info.value.password = ""
            }

            return {info, onSubmit, onRest, gender}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

3.6 下拉框 select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <h3>用户登录</h3>
        <input type="text" placeholder="用户名" v-model="info.user">
        <input type="password" placeholder="密码" v-model="info.password">
        <p>
            城市：
            <select v-model="info.city">
                <option value="11">北京</option>
                <option value="22">上海</option>
                <option value="33">深圳</option>
            </select>
        </p>
        <p>
            <input type="button" value="提交" @click="onSubmit">
            <input type="button" value="重置" @click="onRest">
        </p>
    </div>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){

            var gender = ref("")

            const info = ref({
                user: "",
                password: "",
                hobby:[],
                city:[]
            })

            var onSubmit = function (){
                console.log(info.value.user, info.value.password, info.value.hobby,info.value.city, gender.value)
            }

            var onRest = function (){
                info.value.user = ""
                info.value.password = ""
            }

            return {info, onSubmit, onRest, gender}
        }

    });

    app.mount("#app")

</script>

</body>
</html>

4. v-for 指令

循环展示js数据

4.1 简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in citylist">{{item}}</li>
    </ul>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const citylist = ["北京", "上海", "深圳"]

            return {citylist}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

4.2 获取索引/计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in citylist">{{item}}</li>
        <li v-for="(item, idx) in citylist">{{idx+1}} {{item}}</li>
    </ul>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const citylist = ["北京", "上海", "深圳"]

            return {citylist}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

4.3 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <thead>
            <tr>
                <td>ID</td>
                <td>城市</td>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in citylist">
            <td>{{item}}</td>
            <td>{{idx+1}}</td>
        </tr>
        </tbody>

    </table>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const citylist = ["北京", "上海", "深圳"]

            return {citylist}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

4.3 增加展示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <thead>
            <tr>
                <td>ID</td>
                <td>城市</td>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in citylist">
            <td>{{item}}</td>
            <td>{{idx+1}}</td>
        </tr>
        </tbody>

    </table>

    <p>
        <input type="text" placeholder="请输入城市" v-model="addcity">
        <input type="button" @click="onAdd" value="新增">
    </p>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const addcity = ref("")
            const citylist = ref(["北京", "上海", "深圳"])

            var onAdd = function (){
                // console.log(addcity.value)
                citylist.value.push(addcity.value)
            }

            return {citylist, onAdd, addcity}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

4.4 删除展示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <thead>
            <tr>
                <th>ID</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in citylist">
            <td>{{item}}</td>
            <td>{{idx+1}}</td>
            <td>
                <button @click="onDel(idx)">删除</button>
                <button :data-nid="idx" @click="onDel1">删除1</button>
            </td>
        </tr>
        </tbody>

    </table>

    <p>
        <input type="text" placeholder="请输入城市" v-model="addcity">
        <input type="button" @click="onAdd" value="新增">
    </p>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const addcity = ref("")
            const citylist = ref(["北京", "上海", "深圳"])

            var onAdd = function (){
                // console.log(addcity.value)
                citylist.value.push(addcity.value)
            }

            var onDel = function (idx){
                citylist.value.splice(idx, 1)
            }

            var onDel1 = function (event){
                idx = event.target.dataset.nid
                citylist.value.splice(idx, 1)
            }

            return {citylist, onAdd, addcity, onDel, onDel1}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

5 练习

5.1 小练习 增加编辑功能 (v-show/v-if)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <thead>
            <tr>
                <th>城市</th>
                <th>ID</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in citylist">
            <td>{{item}}</td>
            <td>{{idx+1}}</td>
            <td>
                <button @click="onDel(idx)">删除</button>
                <button :data-nid="idx" @click="onDel1">删除1</button>
                <button @click="onEdit(idx)">编辑</button>
            </td>
        </tr>
        </tbody>

    </table>
    <p v-bind:class="hide">
        <input type="text" placeholder="编辑城市信息" v-model="editcity">
        <input type="button" @click="onEditSave" value="保存">
    </p>

    <p>
        <input type="text" placeholder="请输入城市" v-model="addcity">
        <input type="button" @click="onAdd" value="新增">
    </p>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const addcity = ref("")
            const citylist = ref(["北京", "上海", "深圳"])

            var onAdd = function (){
                // console.log(addcity.value)
                citylist.value.push(addcity.value)
            }

            var onDel = function (idx){
                citylist.value.splice(idx, 1)
            }

            var onDel1 = function (event){
                idx = event.target.dataset.nid
                citylist.value.splice(idx, 1)
            }

            var hide = ref("hide")

            var editcity = ref("")

            var editidx = ref("")

            var onEdit = function (idx){
                hide.value = ""
                editidx.value = idx
            }

            var onEditSave = function (){
                citylist.value.splice(editidx.value, 1, editcity.value)
                hide.value = "hide"
                editcity.value = ""

            }
            
            return {hide, onEdit, citylist, onAdd, addcity, onDel, onDel1, editcity, onEditSave}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

使用v-show或者v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="1px">
        <thead>
            <tr>
                <th>城市</th>
                <th>ID</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in citylist">
            <td>{{item}}</td>
            <td>{{idx+1}}</td>
            <td>
                <button @click="onDel(idx)">删除</button>
                <button :data-nid="idx" @click="onDel1">删除1</button>
                <button @click="onEdit(idx)">编辑</button>
            </td>
        </tr>
        </tbody>

    </table>
    <p v-if="editmodel">
        <input type="text" placeholder="编辑城市信息" v-model="editcity">
        <input type="button" @click="onEditSave" value="保存">
        <input type="button" @click="editmodel = False" value="取消">
    </p>

    <p>
        <input type="text" placeholder="请输入城市" v-model="addcity">
        <input type="button" @click="onAdd" value="新增">
    </p>

</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            const addcity = ref("")
            const citylist = ref(["北京", "上海", "深圳"])

            var editmodel = ref(false)

            var onAdd = function (){
                // console.log(addcity.value)
                citylist.value.push(addcity.value)
            }

            var onDel = function (idx){
                citylist.value.splice(idx, 1)
            }

            var onDel1 = function (event){
                idx = event.target.dataset.nid
                citylist.value.splice(idx, 1)
            }

            var hide = ref("hide")

            var editcity = ref("")

            var editidx = ref("")

            var onEdit = function (idx){
                editmodel.value = true
                editidx.value = idx
            }

            var onEditSave = function (){
                citylist.value.splice(editidx.value, 1, editcity.value)
                editmodel.value = false
                editcity.value = ""

            }

            return {hide, onEdit, citylist, onAdd, addcity, onDel, onDel1, editcity, onEditSave, editmodel}
        }
    });

    app.mount("#app")

</script>

</body>
</html>

5.2 登录案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="isSMS=true">短信登录</button>
    <button @click="isSMS=false">密码登录</button>

    <div v-show="!isSMS">
        <p>用户名: <input type="text" placeholder="Username" v-model="userinfo.user"></p>
        <p>密码: <input type="text" placeholder="Password" v-model="userinfo.pwd"></p>
    </div>
    <div v-show="isSMS">
        <p>手机号: <input type="text" placeholder="Phone number" v-model="phoneinfo.phone"></p>
        <p>验证码：<input type="text" placeholder="SMS" v-model="phoneinfo.sms"></p>
    </div>

    <div>
        <button @click="onLogin">登录</button>
    </div>


</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var isSMS = ref("")

            var userinfo = ref({
                "user": "",
                "pwd": ""
            })

            var phoneinfo = ref({
                "phone": "",
                "sms": ""
            })

            var onLogin = function (){
                var logindata;
                var url;

                if (isSMS.value) {
                    logindata = phoneinfo
                    url = "https://phonelogin"
                } else {
                    logindata = userinfo
                    url = "https://mobillogin"
                }

                console.log(logindata.value)
            }

            return {isSMS, onLogin, userinfo, phoneinfo}
            }
        }
     );

    app.mount("#app")

</script>

</body>
</html>

5.3 登录案例添加网络请求

  1. 找到axios并导入

查找链接
https://www.bootcdn.cn/

axios 代码示例

                axios({
                    method: "post",
                    url: 'https://api.luf...ord/login/',
                    params: {
            		v1:123,
                        v2:456
                    },
                    data: {
                        name:"武沛齐",
                        pwd:"123"
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
            		console.log(error);
                })

路飞学城登录案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="isSMS=true">短信登录</button>
    <button @click="isSMS=false">密码登录</button>

    <div v-show="!isSMS">
        <p>用户名: <input type="text" placeholder="Username" v-model="userinfo.username"></p>
        <p>密码: <input type="text" placeholder="Password" v-model="userinfo.password"></p>
    </div>
    <div v-show="isSMS">
        <p>手机号: <input type="text" placeholder="Phone number" v-model="phoneinfo.mobile"></p>
        <p>验证码：<input type="text" placeholder="SMS" v-model="phoneinfo.code"></p>
    </div>

    <div>
        <button @click="onLogin">登录</button>
    </div>


</div>

<script>

    const {createApp, ref} = Vue
    var app = createApp({
        setup: function (){
            var isSMS = ref("")

            var userinfo = ref({
                "username": "",
                "password": ""
            })

            var phoneinfo = ref({
                "mobile": "",
                "code": ""
            })

            var onLogin = function (){
                var logindata;
                var url;

                if (isSMS.value) {
                    logindata = phoneinfo
                    url = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile"
                } else {
                    logindata = userinfo
                    url = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password"
                }

                axios({
                    method: "post",
                    url: url,
                    params: {
                    },
                    data: logindata,
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
            		console.log(error);
                })
            }

            return {isSMS, onLogin, userinfo, phoneinfo}
            }
        }
     );

    app.mount("#app")

</script>

</body>
</html>

5.4 挂载和加载页面 (onMounted)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>种类</h3>
    <ul>
        <li  v-for="item in datalist">{{item.id}} {{item.name}}</li>
    </ul>



</div>

<script>

    const {createApp, ref, onMounted} = Vue
    var app = createApp({
        setup: function (){
            var datalist = ref([]);
            var getinfo = function (){
                
                axios({
                    method: "get",
                    url: 'https://api.luffycity.com/api/v1/course/roadmap/',
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (res) {
                    console.log(res.data.data);
                    datalist.value = res.data.data
                }).catch(function (error) {
            		console.log(error);
                })
            }

            console.log(123, datalist)

            onMounted(getinfo)
            return {datalist}
            }
        }
     );

    app.mount("#app")

</script>

</body>
</html>
posted @ 2024-07-31 13:30  khalil12138  阅读(5)  评论(0)  编辑  收藏  举报