vue.js

最新推荐文章于 2024-10-09 10:13:02 发布

小七呐

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量433

点赞数 8

分类专栏： Java 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_52734332/article/details/136336042

版权

Java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.什么是vue？

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

2.vue快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{ message }}
    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{
         message:"Hello world",
     }
   })
</script>

</html>

3.vue的常用指令

1.v-bodel和v-model

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <a v-bind:href="url">连接一</a>
    <a :href="url">连接二</a>
</div>

</body>

<script>
    new Vue({
    el:"#app",
    data:{
        url:"https://www.baidu.com",
    }
    })
</script>

2.v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="button" value="btn1" v-on:click="handle()">
    <input type="button" value="btn2" @click="handle()">
</div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            handle:function () {
                alert("我被点击了一下");
            }
        }
    })
</script>
</html>

3.v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model = "age">经判定
    <span v-if="age <= 35">年轻人（35岁以下）</span>
    <span v-else-if="age>35 &&age<60">中年人</span>
    <span v-else>老年人</span>

    <br>
    <br>
    <input type="text" v-model = "age">经判定
    <span v-show="age <= 35">年轻人（35岁以下）</span>
    <span v-show="age>35 && age<60">中年人</span>
    <span v-show="age >= 60">老年人</span>

</div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
            age :20
        },
        methods:{

        }
    })
</script>
</html>