Vue学习第一天——双向绑定、绑定事件、绑定对象、绑定属性

于 2021-04-25 16:11:29 发布
阅读量271 收藏
点赞数
分类专栏： Vue 学习 javascript 文章标签： vue javascript js html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/116131713
版权 
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

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



</head>



<body>

    <div id="box">{{msg}}</div>

    <script>

​    new Vue({

​      el: "#box",

​      data: {

​        msg: "hi!Vue"

​      }

​    })



  </script>

</body>



</html>



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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 200px;
            height: 200px;
            background-color: firebrick;
        }

        #me {
            width: 100px;
            height: 100px;
            background-color: honeydew;
        }
    </style>
    <script src="../js/vue.js"></script>
    <!-- 双向绑定只用在表单中 -->
    <!-- e是时间对象 -->
    <!-- mvvm是vue的架构，m:数据层，v：视图层，vm:控制器，使数据层和视图层的数据同步 -->
</head>

<body>
    <div id="box">
        <!-- <input type="text" v-model="msg" v-on:keyup="func"> -->
        <!-- 函数有形参时，想要获取时间对象，在参数后面加上$event -->
        <!-- <button @click="fn(10,20,$event)">点我</button> -->
        <div id="app" @click="fn">
            <!-- .stop:阻止冒泡行为 -->
            <div id="me" @click.stop="func">我是一个div</div>
            <!-- 阻止a标签的默认跳转 -->
        </div>
        <a href="#" @click.prevent>跳转</a>
        <!-- 案件修饰符：点击回车键或者空格键之后会触发fn函数 -->
        <input type="text" @keyup.enter.space="fn" />
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                msg: "hi"
            },
            methods: {
                /* fn(num1, num2, e) {
                    // console.log("hi");
                    var res = num1 + num2;
                    console.log(res);
                    console.log(e.target.innerHTML);
                },
                func(e) {
                    console.log(e.keyCode);
                } */
                fn() {
                    console.log("我点击回车键了");
                },
                func(e) {
                    console.log("我的小的");
                    // 从上（大、父类）往下（小、子类）的是委托，从下（小、子类）往上（大、父类）的是冒泡
                    // 阻止冒泡行为：对不同的元素加同一类型的事件（父类和子类）
                    // e.stopPropagation();
                }
            }
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        <a href="https://www.baidu.com">百度</a>
        <a v-bind:href="href">百度
        </a>
        <button @click="fn">点我</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                href: "https://www.baidu.com",
                msg: "hi"
            },
            methods: {
                fn() {
                    this.href = "http://www.sohu.com"
                }
                // () => { }是一个匿名函数，赋予fn
                // 用这个去获取vue中的数据不可取，不能用这个方法
                // fn: () => {
                //     console.log(this);
                // }
            }
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }

        .cc {
            border: 1px solid goldenrod;
            padding: 10px;
        }

        .aa {
            font-size: 20px;
        }

        .bb {
            font-size: 12px;
        }

        .color {
            color: orange;
        }

        .size {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="cc" v-bind:class="{aa:aaIsTrue,bb:bbIsTrue}" :style="{color:pink}">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
        <button @click="fn">点我有惊喜</button>
        <h2 :class="[color,size]">
            好好学习，天天向上
        </h2>
        <p :style="[color1,size1]">微笑面对生活</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                // 都是键值对的方式，
                aaIsTrue: true,
                bbIsTrue: false,
                // indianred是颜色的代码，而不是变量名
                pink: "indianred",
                // 都是变量名
                color: 'color',
                size: 'size',
                color1: {
                    color: "orange"
                },
                size1: {
                    // 样式属性单词之间的-省略不写，首字母大写
                    FontSize: "20px"
                }
            },
            methods: {
                fn() {
                    this.bbIsTrue = !(this.bbIsTrue)
                }
            }
        })
    </script>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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-show和v-if的区别：v-show:是添加一个样式display；v-if:是这个元素是否存在 -->
        <!-- v-show="false"表示:display:block -->
        <!-- v-show="false"表示:display:none -->
        <h1 v-show="true">
            好好学习，天天向上
        </h1>
        <!-- v-if="true":表明此元素存在，若为false,若后面没有v-else，则表示子元素不存在，若有v-else则显示含有v-else的标签 -->
        <h1 v-if="false">
            好好学习，天天向上
        </h1>
        <h1 v-else>微笑面对生活</h1>
        <p v-if="sc>=90">优秀</p>
        <p v-else-if="sc>=75">良好</p>
        <p v-else-if="sc>=60">及格</p>
        <p v-else="60>sc">不及格</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                sc: 75
            }
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 使用v-for一定要和key配套，key:唯一标识 -->
            <!-- item是各项的值，i是索引 -->
            <li v-for="(item,i) in country" :key="i">{{i+1}}——{{item}}</li>
        </ul>
        <p v-for="(item,i) in items" :key="i">{{item.msg}}</p>
        <button @click="fn">点我</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                country: ["中国", "日本", "韩国", "泰国"],

                items: [{
                    msg: "中国的首都是北京"
                }, {
                    msg: "日本的首都是东京"
                }, {
                    msg: "韩国的首都是首尔"
                }, {
                    msg: "泰国的首都是曼谷"
                }]
            },
            methods: {
                fn() {
                    console.log(this.items[3].msg);
                }
            }
        })
    </script>
</body>

</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值