【按键修饰符】

1.按键修饰符

例子：

    <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">

//当触发esc键时，清空文本内容并在终端打印指令；当触发enter键，触发ajax指令

    methods: {

        clearInput(e) {

          console.log('触发了 clearInput 方法')

          e.target.value = ''

        },

        commitAjax() {

          console.log('触发了 commitAjax 方法')

        }

      }

2.双向（数据）绑定指令——v-model

        1)对比：v-bind是单向绑定，数据源到页面的绑定

        2)辅助开发者在不触及dom情况下，获取表单数据。

        3)原数据源数据是zhangsan，当操作输入框时，被赋予v-model指令的部分，数据源会随着输入框内容直接发生变化。即操作输入框直接采集最终数据。

  <div id="app">

    <p>用户的名字是：{{ username }}</p>

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

（不用再写value,因为它直接监听输入框的内容)

注意：1.只有表单元素用v-model指令才有意义，其他的无意义，例如div

            2.常用表单元素：input输入框，textarea，select

select的例子：

   <select v-model="city">

      <option value="">请选择城市</option>

      <option value="1">北京</option>

      <option value="2">上海</option>

      <option value="3">广州</option>

    </select>

        4）v-model专用修饰符：

（1）

.number：把采集到的数据转成数值类型

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>
（字符串+数字，是拼接）

（2）trim：（只删除首尾的空格)

   <input type="text" v-model.trim="username">

    <button @click="showName">获取用户名</button>

(3)lazy:(只随着输入框更新最后的结果，不会实时变化）

<input type="text" v-model.lazy="username">