指令补充

指令修饰符

通过.指明一些指令后缀，不同的后最封装了不同的处理操作 简化代码

① 按键修饰符

​ @keyup.enter

​ → 键盘回车监听

② v-model修饰符

​ v-model.trim → 去除首尾空格

​ v-model.number → 转数字

③ 事件修饰符

​ @事件名.stop → 阻止冒泡

​ @事件名.prevent → 阻止默认行为

例：@keyup.enter 回车触发 fn 函数

    <input @keyup.enter="fn" v-model="username" type="text">

例：四个修饰符的用法：.trim .number .stop .prevent

  <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>

    <h3>@事件名.stop → 阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent → 阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn() {
          alert('老父亲被点击了')
        },
        sonFn() {
          alert('儿子被点击了')
        }
      }
    })
  </script>

v-bind对于样式操作的增强

语法：class="对象/数据"

1、对象 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box":class="{类名1: 布尔值，类名2: 布尔值}"></div>

适用场景：一个类名来回切换

2、数组 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box":class="[类名1,类名2,类名3]"></div>

适用场景：批量添加或删除类

例：

  <div id="app">
    <div class="box" :class=" {pink:true,big:false}">黑马程序员</div>
    <div class="box" :class="['pink','big']">黑马程序员</div>
  </div>

v-bind对于样式style的控制

语法 :style = "样式对象"

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

适用场景：某个具体属性的动态设置

例：

<div class="box" :style="{width:'',height:'',backgroundColor:'pink'}"></div>

v-model 应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框 input:text → value

文本域 textarea → checked

复选框 input:checkbox → value

单选框 input:radio → value

下拉菜单 select → checked

例：

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
    <input type="text" v-model="username">
    <br><br>

    是否单身：
    <input type="checkbox" v-model="isSingle">
    <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别:
    <input v-model="gender" type="radio" name="gender" value="1" v-model="">男
    <input v-model="gender" type="radio" name="gender" value="2" v-model="">女
    <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
      <option v-model="" value="101">北京</option>
      <option v-model="" value="102">上海</option>
      <option v-model="" value="103">成都</option>
      <option v-model="" value="104">南京</option>
    </select>
    <br><br>

    自我描述：
    <textarea v-model="desc"></textarea>

    <button>立即注册</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: true,
        gender: '1',
        cityId: '101',
        desc: '',
      }
    })
  </script>