Vue的学习（二）

一、class及style的绑定

1.v-bind:class绑定类名绑定class为对象

编辑2. v-bind:class绑定类名绑定class为对象

3.v-bind:class绑定类名绑定class为数组

1) v-bind:class绑定类名绑定class为数组方法一：

2) v-bind:class绑定类名绑定class为数组方法二：

4.v-bind:class绑定类名绑定style为对象

5.v-bind:class绑定类名绑定style为数组

二、数据的单向绑定

1.介绍

2.单向绑定v-bind

3.双向绑定v-model

三、事件修饰符

1. .stop 阻止冒泡(event.stopPropagation())

2. .prevent阻止默认事件

3. .captrue 捕获

4. .self只触发自身

5..once只触发一次

四、结束语

一、class及style的绑定

1.v-bind:class绑定类名绑定class为对象

代码展示

这里我们定义了一个active的类名，一个bgColor的类名，并为其添加样式，使用v-bind绑定，在vue实例中让其为true，那么我们就可以看到我们写的样式添加到了div盒子上。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

        .active {
            color: aqua
        }

        .bgColor {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" v-bind:class="{active:a,bgColor:b}">
            <div>1 v-bind:class绑定类名 绑定class为对象</div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                a: true,
                b: true,
               
            }
        })
    </script>
</body>

</html>

运行结果如下

如果让其为false那么样式就不会再添加到div盒子上了。

2. v-bind:class绑定类名绑定class为对象

在这个案例中我们绑定一个class为对象，在vue实例中使用，这里我们让active为false让bgColor为true，那么大家可以想一下结果是什么样的。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

        .active {
            color: aqua
        }

        .bgColor {
            background-color: red;
        }
    </style>
</head>

<body>
    <d
        <div class="box" v-bind:class="objCls">
            <div>2 v-bind:class绑定类名 绑定class为对象</div>
        </div>
        
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
               
                objCls: {
                    active: false,
                    bgColor: true
                },
              
            }
        })
    </script>
</body>

</html>

运行结果：我们可以看到只有背景颜色添加上了，但是文字颜色没有添加上，是因为我们让active为false

3.v-bind:class绑定类名绑定class为数组

1) v-bind:class绑定类名绑定class为数组方法一：

第一种方法是将数组中的数据写在data()中

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

        .active {
            color: aqua
        }

        .bgColor {
            background-color: red;
        }
    </style>
</head>

<body>
    <di
        <div class="box" v-bind:class="[classA,classB]">
            <div>3 v-bind:class绑定类名 绑定class为数组</div>
        </div>
       
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
              
                classA: "active",
                classB: "bgColor",
               
            }
        })
    </script>
</body>

</html>

运行结果

2) v-bind:class绑定类名绑定class为数组方法二：

第二种子写法是直接将数组写在data()中，运行结果也是一样的。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

        .active {
            color: aqua
        }

        .bgColor {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
       
        <div class="box" v-bind:class="[classA,classB]">
            <div>4 v-bind:class绑定类名 绑定class为数组 {{[ classArr ]}}</div>
        </div>
       
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data(){
                classArr: ["active", "bgClor"],
                
            }
        })
    </script>
</body>

</html>

运行结果

4.v-bind:class绑定类名绑定style为对象

如下代码块，我们一种可以给css属性（代码中是color和fontsize）一个名字然后在data() 数据中使用，或者在div中直接写backgroundColor:'gray'。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

       
    </style>
</head>

<body>
    <div id="app">
        
        <div class="box" v-bind:style="{color:activeColor,fontSize:ftSize,backgroundColor:'gray' }">
            <div>5 v-bind:class绑定类名 绑定style为对象</div>
        </div>
     
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
               
                activeColor: "red",
                ftSize: "22px",
                
            }
        })
    </script>
</body>

</html>

运行结果如下

5.v-bind:class绑定类名绑定style为数组

同样的我们还可以绑定style为数组，在data()中将数据添加进去

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid green;
        }

       
    </style>
</head>

<body>
    <div id="app">
      
      <div class="box" v-bind:style="[styleA,styleB]">
            <div>6 v-bind:class绑定类名 绑定style为数组</div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                
                styleA: {
                  color: "red",
                  backgroundColor: "green"
                },
                styleB: {
                   fontsize: '22px'
             }
            }
        })
    </script>
</body>

</html>

运行结果

二、数据的单向绑定

1.介绍

数据发生变化会影响到视图而v-bind绑定的数据视图变化而数据不受影响这就是单向的数据

v-model 双向数据绑定数据改变则视图发生变化视图改变则数据响应发生变化

代码展示

2.单向绑定v-bind

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
</head>

<body>
    <div id="app">
        
        <input type="text" :value="msg">
    
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: 'hello Vue!!!'
            }
        })
    </script>
</body>

</html>

运行结果

在这个input框中我们添加上11111但是在vue中并没有发生数据的改变

3.双向绑定v-model

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: 'hello Vue!!!'
            }
        })
    </script>
</body>

</html>

运行结果

在这里我们可以清楚的看到数据会跟随着input的内容发生了变化，这就是单向绑定与双向绑定的不同之处。

三、事件修饰符

1. .stop 阻止冒泡(event.stopPropagation())

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid red;
        }

        .div {
            border: 1px solid red;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <div>1 .stop 阻止冒泡(event.stopPropagation())</div>
            <div class="div" @click="fn">
                <button @click="fn1">点我1</button>
                <button @click.stop="fn2">点我2</button>
            </div>
        </div>
        
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("我是外层div")
                },
                fn1() {
                    console.log("我是内部的button按钮1")
                },
                fn2() {
                    console.log("我是内部的button按钮2")
                },
               
            }
        })
    </script>
</body>

</html>

运行结果

当我们点击外部div时触发fn()事件在控制台显示，fn()函数中打印的内容，当我们点击点我1在控制台打印时，事件会进行冒泡打印出fn()以及fn1()的内容，但是我们为点我2按钮添加了stop事件修饰符，我们可以看到只打印了fn3()中的内容，防止事件进行了冒泡。

2. .prevent阻止默认事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid red;
        }

        .div {
            border: 1px solid red;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
     
        <div class="box">
            <div>2 .prevent阻止默认事件</div>
            <div class="div" @click="fn">
                <a href="https://www.baidu.com" @click="fn3">百度一下1</a>
                <a href="https://www.baidu.com" @click.prevent="fn3">百度一下2</a>
                <a href="https://www.baidu.com" @click.prevent.stop="fn3">百度一下3</a>
            </div>
        </div>

    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("我是外层div")
                },
                fn1() {
                    console.log("我是内部的button按钮1")
                },
                fn2() {
                    console.log("我是内部的button按钮2")
                },
                fn3() {
                    console.log("百度一下")
                }
            }
        })
    </script>
</body>

</html>

运行结果

点击外部的div盒子只触发了fn()事件并且打印到控制台
点击第一个百度一下会直接跳转到百度网页
点击第二个百度一下并不会跳转直接打印到了控制台，但是事件同时进行了冒泡打印出fn()事件中的内容
点击第三个被百度一下我们添加了 .prevent阻止默认事件以及stop修饰符，这时候就没有进行跳转并且阻止了冒泡。

3. .captrue 捕获

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid red;
        }

        .div {
            border: 1px solid red;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        
        <div class="box">
            <div>3 .captrue 捕获</div>
            <div class="div" @click="fn">
                <button @click="fn1">点我1</button>
            </div>
            <div class="div" @click.capture="fn">
                <button @click="fn2">点我2</button>
            </div>
        </div>
      
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("我是外层div")
                },
                fn1() {
                    console.log("我是内部的button按钮1")
                },
                fn2() {
                    console.log("我是内部的button按钮2")
                },
                fn3() {
                    console.log("百度一下")
                }
            }
        })
    </script>
</body>

</html>

运行结果

当我们点击外部div时，还是一样触发fn()事件，当我们点击点我1时事件发生冒泡，如果我们添加上 .captrue事件那么就会从外向内触发，就是捕获。

4. .self只触发自身

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid red;
        }

        .div {
            border: 1px solid red;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
      
        <div class="box">
            <div>4 .self只触发自身</div>
            <div class="div" @click.self="fn">
                <button @click="fn1">点我</button>
            </div>
        </div>
       
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("我是外层div")
                },
                fn1() {
                    console.log("我是内部的button按钮1")
                },
                fn2() {
                    console.log("我是内部的button按钮2")
                },
                fn3() {
                    console.log("百度一下")
                }
            }
        })
    </script>
</body>

</html>

运行结果

点击外部div还是一样只触发外部，当我们添加上self修饰符那么事件就只会触发自身不会进行冒泡

5..once只触发一次

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .box {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid red;
        }

        .div {
            border: 1px solid red;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
      
        <div class="box">
            <div>5 .once只触发一次</div>
            <button @click.once="fn1">点我</button>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("我是外层div")
                },
                fn1() {
                    console.log("我是内部的button按钮1")
                },
                fn2() {
                    console.log("我是内部的button按钮2")
                },
                fn3() {
                    console.log("百度一下")
                }
            }
        })
    </script>
</body>

</html>

运行结果

这里可以点击多次，但只触发了一次，这里没有办法进行展示，大家可以自行尝试一下。