Vue初学-第二天今天学的是一些关于vue指令的基础知识，啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

属性绑定指令

1.基本用法

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令
v-bind属性可简写为:

<body>
    <div id="app">
        <!-- 通过v-bind属性给p标签绑定一个title -->
        <p v-bind:title="title1">阿巴阿巴</p>
        <!-- 也可以简写成： -->
        <p :title="title2">学院刺yyds</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                title1: "啦啦啦,爱你呦",
                title2: "阿卡丽yyds"
            }
        })
    </script>
</body>

在这里插入图片描述

2.绑定class

对象语法：

<style>
    #app div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-top: 10px;
    }
    
    .blue {
        background-color: blue;
    }
    
    .pink {
        background-color: pink;
    }
</style>

<body>
    <div id="app">
        因为isBlue为true,所以blue这个类名存在，所以blue生效了，背景变成了blue色
        <div v-bind:class="{blue: isBlue}"></div>
        因为isPink为false,所以pink这个类名不存在，所以pink没有生效，背景颜色不变
        <div v-bind:class="{pink: isPink}"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isBlue: true,
                isPink: false
            }
        })
    </script>
</body>

在这里插入图片描述

数组语法：

<style>
    #app div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-top: 10px;
    }
    
    .pink {
        background-color: pink;
    }
    
    .circle {
        border-radius: 50%;
    }
</style>

<body>
    <div id="app">
        <!-- 通过v-bind属性给div盒子绑定多个类名 -->
        <!-- 只能绑定data里的数据,直接写css的类名会报错 -->
        <div v-bind:class="[oPink, oCircle]"></div>
        <!-- 渲染后就是这样 -->
        <div class="pink circle"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                oPink: 'pink',
                oCircle: 'circle'
            }
        })
    </script>
</body>

在这里插入图片描述 3.绑定内联样式

v-bind:style的对象语法非常直观，很像CSS,但其实是一个javascript对象。
CSS property名可以用驼峰式(userName)命名或短横线分割(user-name,记得用引号包起来)来命名。
对象语法

<body>
    <div id="app">
        <!-- 通过v-bind:style将data里定义的样式赋予给该div盒子 -->
        <div v-bind:style="divStyle"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                divStyle: {
                    width: '100px',
                    height: '100px',
                    // 驼峰式命名
                    backgroundColor: 'pink',
                    // 用短横线分割要用引号包起来
                    'border-radius': '50%'
                }
            }
        })
    </script>
</body>

数组语法使用起来和v-bind:class是一样的，这里就不多说了

事件绑定指令

1.基础用法

我们可以使用v-on指令 (通常缩写为@符号) 来监听DOM事件，并在触发事件时执行一些JavaScript

<body>
    <div id="app">
        <div v-bind:style="divStyle"></div>
        <!-- 将changeColor函数绑定到button点击事件上，点击一次就调用一次changeColor函数 -->
        <button @click='changeColor'>点击变蓝</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                divStyle: {
                    width: '100px',
                    height: '100px',
                    backgroundColor: 'pink',
                }
            },
            methods: {
                changeColor() {
                    var div = document.querySelector('#app').querySelector('div');
                    div.style.backgroundColor = 'blue';
                }
            }
        })
    </script>
</body>

在这里插入图片描述 2.事件传参

如果想要给事件传递参数，那么只需要在事件调用的小括号中传入即可
如果想要访问原始的DOM事件，可以用特殊变量$event把它传入方法

<body>
    <div id="app">
        <p>我是{{ message }},我最牛</p>
        <button @click='changeName("罗翔", $event)'>点击揭晓真面目</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: '张三'
            },
            methods: {
                changeName(name, event) {
                    this.message = name;
                    console.log(event);
                }
            }
        })
    </script>
</body>

在这里插入图片描述 3.事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节
为了解决这个问题，Vue.js 为v-on提供了事件修饰符

修饰符	作用
`.stop`	阻止单击事件继续传播
`.prevent`	提交事件不再重载页面
`.capture`	添加事件监听器时使用事件捕获模式 (内部元素触发的事件先在此处理，然后才交由内部元素进行处理)
`.self`	只当在`event.target` 是当前元素自身时触发处理函数
`.once`	事件将只会触发一次

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在event.target是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

4.按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。
Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。

<!-- 只有在key是Enter时调用vm.submit() -->
<input @keyup.enter="submit" />

双向绑定指令

1.概述和基础使用

vue 提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。
基础使用

<body>
    <div id="app">
        <p>{{ message }}</p>
        <!-- 将input输入框里的内容和data里的message通过v-model双向绑定 -->
        <!-- 其中一个内容变化，另外一个内容也跟着变化 -->
        <input type="text" v-model='message'>
        <!--  设置了一个点击事件，点击data里的message将改变 -->
        <button @click="btnText">给我开心</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: 'hello world!'
            },
            methods: {
                btnText() {
                    this.message = '开心快乐每一天'
                }
            }
        })
    </script>
</body>

在这里插入图片描述 2.修饰符

修饰符	作用	示例
`.number`	自动将用户输入的值转换为数值类型	`<input v-model.number="age">`
`.trim`	自动顾虑用户输入的首位空白字符	`<input v-model.trim="msg">`
`.lazy`	在`change`时而非`input`时更新	`<input v-model.lazy="msg">`

<body>
    <div id="app">
        <!-- 将数据转换为数字类型而不是字符串 -->
        <input type="text" v-model.number="n1" /> +
        <input type="text" v-model.number="n2" /> =
        <span>{{ n1 + n2 }}</span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                n1: '',
                n2: ''
            }
        })
    </script>
</body>

在这里插入图片描述

第二天学习结束，明天见