看Vue入门代码

最新推荐文章于 2024-08-23 17:02:52 发布

听~宇

最新推荐文章于 2024-08-23 17:02:52 发布

阅读量324

点赞数

分类专栏：前端三件套文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47518713/article/details/127349750

版权

前端三件套专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js的基本用法，包括数据绑定、条件渲染、列表渲染、事件驱动、阻止默认行为及事件冒泡。通过示例展示了如何创建Vue实例、设置数据模型、使用`v-if`、`v-show`、`v-for`指令以及事件修饰符。此外，还涵盖了钩子函数的使用，如`beforeCreate`、`created`、`beforeMount`和`mounted`。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="button" value="获得div中的内容" @click="getText"/>
        <input type="button" value="设置div中的内容" @click="setText"/>
    </div>
    <script>
        new Vue({
            "el":"#app",//el是选择Vue可操作的区域
            "data":{
                "msg":"div的内容123"
            },//设置数据模型
            "methods":{
                "getText":function () {
                    alert(this.msg)
                },
                "setText":function () {
                    this.msg="Vue设置的新值"
                }
            }
        });
      
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <p>{{msg}}</p>
        <a :href="username">{{aMsg}}</a>
        <input type="text" v-model.trim="username"/><br/>
        <input type="button" value="操作文本框中的内容" @click="getValue"/>
    </div>
    <script>
        new Vue({
            "el":"#app",//el是选择Vue可操作的区域
            "data":{
                "msg":"div的内容123",
                "aMsg":"点我",
                "username":"admin"
            },//设置数据模型
            "methods":{
                "getValue":function () {
                    alert(this.username);
                    //this.username="root"
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .divs{
            border: 1px solid red;
            width: 200px;
            height: 200px
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="flag" class="divs">div1</div>
<!--        <div v-else="flag" class="divs">div2</div>-->
        <div v-show="flag" class="divs">div3</div>
        <input type="button" value="按钮" @click="changeDiv">
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                flag:true,
            },
            methods:{
                changeDiv:function () {
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="hobby in hobbys">{{hobby}}</li>
        </ul>
        <input type="button" value="按钮" @click="addHobby">
        <table>
            <tr>
                <th>索引</th>
                <th>编号</th>
                <th>品牌</th>
                <th>价钱</th>
            </tr>
            <tr v-for="(computer,index) in computers">
                <td>{{index+1}}</td>
                <td>{{computer.id}}</td>
                <td>{{computer.brand}}</td>
                <td>{{computer.price}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                hobbys:["java","抖音","大数据","前端","UI","快手"],
                computers:[
                    {
                        id:101,
                        brand:"联想",
                        price:5000
                    },{
                        id:102,
                        brand:"外星人",
                        price:15000
                    },{
                        id:103,
                        brand:"诺基亚",
                        price:6000
                    }]
            },
            methods:{
                addHobby:function () {
                    this.hobbys.push("看电影")
                }
            }
        })
    </script>
</body>
</html>

事件驱动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮" @click="clickTest(10,'java',true,false)"/><br/>
        <input type="text" @change="changeTest">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{},
            methods:{
                clickTest:function (a,b,c) {
                    alert("点击事件绑定成功"+a+b+c)
                },
                changeTest() {
                    alert("值改变事件绑定成功123")
                }
            }
        })
    </script>
</body>
</html>

取消控件的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="http://baidu.com" @click.prevent="clickTest">点击跳转至百度</a>
        <form action="01_HelloWorld.html" method="" @submit.prevent="subitTest">
            <input type="text" name="username"/><br/>
            <input type="submit" >
        </form>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{},
            methods:{
                clickTest:function () {
                    alert("点击了超链接");
                    //如果你不想让超链接进行跳转
                    //event.preventDefault();//取消控件的默认行为
                },
                subitTest:function () {
                    alert("表单即将被提交");
                    //event.preventDefault();//取消控件的默认行为
                }
            }
        })
    </script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        #div1{
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        #div2{
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="div1" @click="div1Test">
            <div id="div2" @click.stop="div2Test"></div>
        </div>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{},
            methods:{
                div1Test:function () {
                    alert("点击了大框");
                },
                div2Test:function () {
                    alert("点击了小框");
                    //event.stopPropagation();//阻止事件冒泡
                }
            }
        })
    </script>
</body>
</html>

钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div id="div1">{{msg}}</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"div的内容123"
        },
        methods:{
            fun01:function () {
                console.log("这是fun01函数")
            }
        },
        watch:{},
        beforeCreate:function () {
            console.log("Vue对象初始化前执行...");
            console.log(this.msg);
            this.fun01();
        },
        created:function () {
            console.log("Vue对象初始化后执行...");
            console.log(this.msg);
            this.fun01();
        },
        beforeMount:function () {
            console.log("Vue对象渲染前执行...");
            console.log(document.getElementById("div1").innerText);//{{msg}}
        },
        mounted:function () {
            console.log("Vue对象渲染后执行...");
            console.log(document.getElementById("div1").innerText);//div中的内容
        }
    });
</script>

</body>
</html>