Day02-JavaScript, VUE

最新推荐文章于 2024-06-13 16:29:32 发布

jingwei1205

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量241

点赞数 3

分类专栏： JavaWeb从放弃到入门文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_43641535/article/details/139121909

版权

JavaWeb从放弃到入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

函数调用可以传任意值，但是后面的不能被传递的。不报错。

3. VUE

VUE是一套前端框架免除原生JavaScirpt中的DOM操作，简化书写
基于MVVM(Model-View-View-Model)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网
框架:是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id = "app">
    <input type="text" v-model="message">{{message}}
</div>
</body>
<script>
    new new Vue({
        el:"#app",//接管区域
        data:{
            message:"Hello Vue"
        }
    })
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id = "app">
    <a v-bind:href="url">链接1</a>
    <a :href="url">链接2</a>

    <input type="text" v-model="url">{{message}}

    <br><input type="button" value="click me1" v-on:click="clickMe()"><br>
    <input type="button" value="click me2" @click="clickMe()"><br>
    年龄
    <input type= "text" v-model= "age">经判定,为:
    <span v-if="age<=35">年轻人(35及以下)</span>
    <span v-else-if="age<60 && age>35">中年人(35-60)</span>
    <span v-else>老年人(60及以上)</span><br>
    <div v-for="addr in addrs">{{addr}}</div>
    <div v-for="(addr,index) in addrs">{{index+ 1}}:{{addr}}</div>
</div>
</body>
<script>
    new Vue({
        el:"#app",//接管区域
        data:{
            message:"Hello Vue",
            url:"https://www.baidu.com",
            age:20,
            addrs:["北京","西安","上海","成都","徐州"]
        },
        methods: {
            clickMe:function(){
                console.log("我被点了");
                alert("!");
            }
        }
    })
</script>
</html>

VUE案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
            <th>等级</th>
        </tr>
        <tr align="center" v-for="(usr, index) in users">
            <td>{{index+1}}</td>
            <td>{{usr.name}}</td>
            <td>{{usr.age}}</td>
            <td>
                <span v-if="usr.gender==1">男</span>
                <span v-if="usr.gender==2">女</span>
            </td>
            <td>{{usr.score}}</td>
            <td>
                <span v-if="usr.score>=90">优秀</span>
                <span v-else-if="usr.score>=80">良好</span>
                <span v-else-if="usr.score>=60">及格</span>
                <span v-else>不及格</span>
            </td>
        </tr> 
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender:2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender:1,
                score:52
            }]
    }
})
</script>