学习笔记（4）vue指令、指令修饰符

1，vue指令

1.1，v-model

v-model：用于数据的双向绑定。可以将组件的数据绑定到模板中，也可以将页面对数据的修改绑定到组件数据中。

<input type="text" v-model="txt">

v-model指令工作原理

v-model指令的本质就是一个v-bind + 一个v-on，它会将绑定的数据通过value属性向下传递，并监听子组件发射的input事件，并当事件触发时，把事件附带的数据赋值给绑定的数据。

1.2，v-bind

v-bind：用于标签属性的数据绑定。

语法：xxx是要绑定的属性名，yyy是要绑定的组件中的数据.

<img v-bind:xxx="yyy" class="pic">
<!--  简写-->
<img :xxx="yyy" class="pic">

1.3，Class 与 Style 绑定

对于大部分属性，绑定的值都是字符串。而对于class属性，class属性可以绑定数组或者对象。

• class属性绑定数组时：vue会将数组中的字符串拼接成一个class字符串绑定到class属性上。
• class属性绑定对象时：对象的键表示class的名字，值是布尔值，表示是否添加这个class。
• style属性可以绑定一个对象。
  style属性绑定对象时，其中对象的键是样式名，值是样式值。

<template>
    <div>
        <h1>欢迎来到首页</h1>
        <div :class="classArr">对于class属性，可以绑定数组</div>
        <div :class="classObj">class属性还可以绑定对象</div>
    
        <div :style="styleObj">style属性可以绑定对象</div>
    </div>
</template>

<script>
export default {
    name: "home",
    data(){
        return {
            classArr:['青龙','白虎','朱雀','玄武'],
            classObj:{
                bold:true,
                red:false,
                border:false
            },
            styleObj:{
                fontSize:"30px",
                "background-color":"yellow"
            },
        }
    }
}
</script>

1.4，v-on

v-on：进行元素的事件绑定。
语法：xxx是绑定的事件类型，yyy是绑定的方法。v-on绑定的方法必须是组件中的方法。

<button v-on:xxx="yyy">按钮</button>
<!-- 简写-->
<button @xxx="yyy">按钮</button>

使用v-on进行事件绑定时，如果方法名不加()，则会自动传递事件对象e，如果添加()则可以进行自定义传参，事件对象是$event。

1.5，v-if，v-show(条件渲染)

v-if：用于条件渲染。v-if可以和v-else-if、v-else配套使用。
v-show：也用于条件渲染。
两者都是绑定一个布尔值，为true时显示，false不显示。

<div v-if="flag">v-if绑定的值为真，会显示</div>
<div v-show="flag">v-show绑定的值为真，会显示</div>

区别：
v-if的原理是根据判断条件，动态增删DOM元素，
v-show是根据判断条件，动态显示和隐藏元素。
$注意：v-for比v-if优先级高$

1.6，v-for(列表渲染)

格式：v-for=“(item, index) in arr”。
语法：item是当前遍历到的数组元素，index是当前遍历到的数组元素索引，books是需要遍历的数据。

<td v-for="(item,index) in books" :key="index"></td>

1.7，v-html

v-html指：用于将一段html字符串作为html内容解析显示到某个标签中。

<template>
    <div>
        <p v-html="txt"></p>
    </div>
</template>

<script>
export default {
    name: "home",
    data(){
        return {
            txt:"<b>你好</b>",
        }
    }
}
</script>

1.8，v-once

v-once：用于一次性数据绑定，当页面加载完毕之后，将数据的初始值渲染到元素内中，当数据发生变化时，不再进行重新渲染。

2，指令修饰符

2.1，.number

.number：用于修饰v-model指令，作用是将输入框中的内容转为数字之后再绑定的组件数据上。

2.2，.trim

.trim：将输入框中的内容进行trim(去除两端的空格)再绑定。

2.3，.lazy

.lazy：默认情况下v-model指令会在input事件中进行重新渲染，使用.lazy修饰符后则会在按下回车或者失去焦点时进行重新渲染 。

2.4，.prevent

.prevent：用于v-on指令，效果是阻止所监听的事件的默认行为，相当于e.preventDefault方法。

2.5，.stop

.stop：相当于e.stopPropergation(停止事件的传播)。
$注意：一个指令可以添加多个修饰符$

<a @click.stop.prevent="linkClick" >百度一下</a>

2.6，.{keyCode}

.{keyCode}：用于修饰键盘按键事件，只有按下keyCode为这个值的按键才会触发事件。

<input type="text" @keydown.13="keydown" v-model="t3">