Vue.js 简单demo

最新推荐文章于 2023-02-01 11:43:51 发布

如果我来了6

最新推荐文章于 2023-02-01 11:43:51 发布

阅读量419

点赞数

分类专栏：前端文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_29821795/article/details/119987181

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

demo1

<!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>Document</title>
    <!-- Source -->
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="indexPage">
        <p v-for="post in posts">{{post}}</p>
        <button @click="getValue">获取后端数据</button>
    </div>

    <script>
        var vm = new Vue({
            el: document.getElementById("indexPage"),
            mounted() {
                this.getValue();
            },
            data:{
                posts:[]
            },
            methods:{
                getValue:function(){
                    var that = this;
                    axios.get("https://localhost:5001/Post/GetPost").then(function(res){
                        that.posts =res.data;
                    })
                }
            }
        });
    </script>
</body>
</html>

demo2

<!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>Document</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id='loginPage'>
        <div class="login-pad">
            <h3>BBS论坛登录</h3>
            <p>
                <!-- 事件的绑定，在触发事件前面加 @ -->
                <!-- 属性的绑定，在需要绑定的属性前面加 : -->
                <!-- 注意！属性绑定是单向的，只能从vue对象绑定到标签 -->
                <!-- 如果要双向就要用 v-model ，但是v-model只是作用在value上，当然这样说不严谨，但是目前请这么记忆-->
                <input type="text" placeholder="请输入用户账号" v-model="userNo">
            </p>
            <p>
                <input type="password" placeholder="请输入用户密码" v-model="password">
            </p>
            <p class="error-box">{{errorMsg}}</p>
            <p>
                <button @click="login">登录</button>
            </p>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#loginPage",//document.getElementById("loginPage")
            data:{
                userNo:"2251610468",
                password:"123456",
                errorMsg:""
            },
            methods: {
                login:function(){
                    var that = this;
                    axios.get("https://localhost:5001/Login/CheckLogin?userNo="+this.userNo+"&password="+this.password).then(function (res) {
                       if(res.data == true){
                           location.href = "/index.html"
                       }else{
                           that.errorMsg = "用户名或密码错误";
                        //    alert("用户名或密码错误")
                       }
                    })
                }
            },
        })
    </script>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .login-pad{
            width: 566px;
            height: 260px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10%;
            border: 1px solid #ccc;
            box-shadow: 10px 10px 10px rgb(100, 100, 100);
            border-radius: 4px;
        }
        h3{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        p{
            text-align: center;
            margin-bottom: 20px;
        }
        .error-box{
            width: 300px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
            color:red;
            font-size: 12px;
        }
        input{
            width: 300px;
            height: 30px;
        }
        button{
            height: 30px;
            width: 300px;
        }
    </style>
</body>

</html>

如果我来了6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 简单demo

demo1<!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&
复制链接

扫一扫