学习笔记-JavaWeb-浅学Vue-CSDN博客

本文链接：https://blog.csdn.net/fixxxxxxx/article/details/132055836

Vue简介

Vue快速入门

演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</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",   //Vue接管的区域
        data: {
            message: "Hello Vue"
        }
    })

</script>

</html>

后面的文本会随输入框内输入的改变而改变，这就是双向数据绑定。

Vue常用指令

v-bind，v-model

演示：

<body>

    <div id="app">
        <a v-bind:href="url">链接</a>
        <input type="text" v-model="url">
    </div>

</body>
<script>    
    new Vue({
        el:"#app",   //Vue接管的区域
        data: {
           url:"https://www.4399.com"
        }
    })

</script>

文本框内输入的网页链接，即为点击进入的网页。

v-on

演示：

<body>

    <div id="app">
        <input type="button" value="按钮1" v-on:click="handle()">
        <input type="button" value="按钮2" @click="handle()">
        <input type="button" value="按钮3" onclick="on()">
        <input type="button" value="按钮4" id="btn">
    </div>

</body>
<script>
    new Vue({
        el: "#app", //Vue接管的区域
        data: {
            url: "https://www.4399.com"
        },
        methods: {
            handle:function(){
                alert("我被点击了！");
            }
        },
    })
    on=function(){
        alert("我被点击了！");
    }
    document.getElementById("btn").onclick=function(){
        alert("按钮4被点击了");
    }
</script>

演示了目前所有的学过的标签绑定方法，每次点击，都会弹出对应的文字描述。

v-if、v-show、v-for

演示：

<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">中年人（35-60）</span>
        <span v-else>老年人（60岁及以上）</span>
        <br><br>
        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age<=35">年轻人（35岁及以下）</span>
        <span v-show="age>35&&age<60">中年人（35-60）</span>
        <span v-show="age>=60">老年人（60岁及以上）</span>
    </div>

</body>
<script>
    new Vue({
        el: "#app", //Vue接管的区域
        data: {
            
            age:20
        },
        methods: {
            
        },
    })


</script>

show 只判定当前条件是否为true，若为true，则展示，否则不展示。

演示：

<body>

    <div id="app">   
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>

    </div>

</body>
<script>
    new Vue({
        el: "#app", //Vue接管的区域
        data: {
           
            addrs:["北京","上海","西安","成都","深圳"]
        },
        methods: {
           
        },
    })
 
</script>