在拉钩的学习笔记（二十八）Vue.js事件与表单处理

1、事件处理 v-on 指令
    用于进行元素的事件绑定
        <p>{{ content }}</p>
        <button v-on:click="content='新内容'">按钮</button>
        简写： <button @click="content='新内容'">按钮</button>
    事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序
        <button v-on:click="content='新内容'">按钮</button>
        data:{
            content: "内容"
        },
        methods: {
            fn() {
                this.content = '新内容'
            }
        }
    在视图中恶意通过 $event 访问事件对象
2、表单输入绑定 m-model 指令 双向绑定
    用于给<input>、<textarea>及<select>元素设置双向数据绑定
    <p>输入：{{ value }}</p>
    <input type="text" v-model="value">
    输入框分为单行输入框 input 与多行输入框 textarea
3、表单输入绑定 单选按钮绑定
    单选按钮的双向数据绑定方式如下：
        <p>选中的是：{{ value3 }}</p>
        <input type="radio" id="aa" value="1" v-model="value3">
        <label for="aa">选项一</label>
        <input type="radio" id="bb" value="2" v-model="value3">
        <label for="bb">选项二</label>
4、表单输入绑定 复选框绑定
    复选框绑定分为单个选项与多个选项两种情况，书写方式不同
        单个复选框：
        <p>选中内容： {{ value3 }}</p>
        <input type="checkbox" value="1" id="one" v-model="value3">
        <label for="one">选中</label>
        多个复选框：
        <p>选中内容： {{ value4 }}</p>
        <input type="checkbox" value="1" id="one" v-model="value4">
        <label for="one">选项一</label>
        <input type="checkbox" value="2" id="tow" v-model="value4">
        <label for="tow">选项二</label>
5、表单数据绑定  选择框绑定
    选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同
        <p>单选选择的内容： {{ value5 }}</p>
        <select v-model="value5">
            <option value="">请选择</option>
            <option value="1">选项一</option>
            <option value="2">选项二</option>
            <option value="3">选项三</option>
        </select>

        <p>多选选择的内容： {{ value6 }}</p>
        <select v-model="value6" multiple>
            <option value="1">选项一</option>
            <option value="2">选项二</option>
            <option value="3">选项三</option>
        </select>
        data: {
            value5: '',
            value6: []
        }
*6、v-model 指令小结
    input 输入框： 绑定字符串值
    textarea 输入框： 绑定字符串值
    radio ：绑定字符串值
    checkbox ： 单个绑定布尔值，多个绑定数组
    select ： 单选绑定字符串，多选绑定数组
7、修饰符
    修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作
    - 事件修饰符
        * .prevent 修饰符： 用于阻止默认事件行为，相当于 event.preventDefault()
            <a @click.prevent="fn" href="http://www.baidu.com">不跳转</a>
        * .stop 修饰符： 用于阻止事件传播，相当于 event.stopPropagation()
            <a @click.prevent.stop="fn" href="http://www.baidu.com">不跳转，不冒泡</a>
        * .once 修饰符： 用于设置事件只会触发一次
            <button @click.once="fn">按钮</button>
    - 按键修饰符
        按键码： 指的是将按键的按键码作为修饰符使用以标识按键的操作方式
            <input type="text" @keyup.49="fn">
            <input type="text" @keyup.a.b.c="fn">
        特殊按键： 指的是键盘中类似esc、enter、delete等功能按键，为了更好的兼容性，应首选内置别名
    - 系统修饰符
        系统按键指的是 Ctrl、 alt 、shift 等按键：单独点击系统操作符无效；系统按键通常与其他按键组合使用
        * .ctrl 修饰符
        * .alt 修饰符
        * .shift 修饰符
    - 鼠标修饰符
        用于设置点击事件由鼠标哪个按键来完成
    - v-model 修饰符
        * .trim 修饰符
            用于自动过滤用户输入内容首尾两端的空格
        * .lazy 修饰符
            用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发
        * .number 修饰符
            用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容