Day01-Vue

2023-12-27 06:25:48

一.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="js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- {{}}差值表达式 -->
        <!-- 差值表达式里面可以进行简单的运算 -->
        <!-- 浏览器能解析哪些东西 -->
        <!-- html css javascript -->
        {{msg}}
        {{flag?'我是true':'我是false'}}
        {{num*2}}
    </div>

    <script>

        let app = new Vue({
            el:"#app",//挂载点
            data:{//初始化数据
                msg:"hello world",
                flag:true,
                num:22
            }
        })

    </script>

</body>
</html>

二.v-cloak

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-cloak>
            {{msg}}
        </div>
       
    </div>

    <script src="js/vue.js"></script>

    <script>

        let app  = new Vue({
            el:"#app",
            data:{
                msg:"Hello world"
            }
        })

    </script>

</body>

</html>

三.v-text和v-html、v-pre、v-once

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

<body>

    <div id="app">
        <div>
            {{msg}}
        </div>  
       <div v-text="msg"></div>
       <div v-text="content"></div>
       <div>{{content}}</div>
       <!-- v-html接收富文本内容  -->
       <div v-html="content"></div>
       <!--  跳过编译过程-->
       <div v-pre>{{msg}}</div>
       <!-- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】 -->
       <div v-once>v-once{{msg}}</div>
    </div>

    <script>

        let app = new Vue({
            el:"#app",
            data:{
                msg:"我是文本内容",
                content:"<h2>我是H2标签</h2>"
            }

        })

    </script>

</body>
</html>

四.v-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="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model数据双向绑定 -->
        <!-- 数据双向绑定  -->
        <!-- 视图发生变化 数据也会发生变化 -->
        <!-- 数据发生变化 视图也会发生变化 -->
        <input type="text" placeholder="请输入你的姓名" v-model="msg">
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:""
            }
        })
    </script>
</body>
</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="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <!-- 点击事件 -->
        <!-- <div v-on:click="shijianming">点击事件触发按钮</div> -->
        <!-- v-on:简写@ -->
        <!-- 如果方法不需要传参的时候 加不加括弧都行 要传参必须加（）-->
        <button @click="shijianming">点击事件触发按钮</button>
        <!-- <button @click="fun()">点击事件进行传参--空</button> -->
        <button @click="fun">点击事件进行传参--空</button>
        <button @click="fun1(1,2,$event)">点击事件进行传参--有参</button>
        <button @click="changeMsg">修改msg</button>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"初始化数据"
            },
            // 方法写在methods里面
            methods:{
                // 
                shijianming(){
                    console.log('点击事件执行了嘛')
                },
                fun(e){
                    console.log('e我是事件对象',e)
                    console.log("我是fun方法")
                },
                fun1(a,b,e){
                    console.log('a',a)
                    console.log('b',b)
                    console.log('e',e)
                },
                changeMsg(){
                    // this代表当前页面的vue实例
                    console.log('this',this)
                    this.msg ='帅哥'
                }
            }
        })
    </script>
</body>
</html>

文章来源:https://blog.csdn.net/Spirs/article/details/135228971
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。