vue的事件绑定与表单绑定

 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

事件修饰可以链式调用

   <!-- 事件修饰可以连接使用 -->
       <!-- .stop 阻止单击事件继续传播  -->
       <!-- .prevent 提交事件不再重载页面 -->
       <div @click='outerClick'>
        <div v-on:click.stop='innerClick(1,$event)'>
            <input type="checkbox" @click.prevent.stop='inputClick'>
        </div>
    </div>

键盘事件

 <div>
            <!-- 键盘事件 -->
            <input type="text" @keyup.enter='add'>
        </div>

文本表单

  <!-- 文本表单 -->
        <input type="text" v-model='username' @input='inputHandle'>
        <textarea v-model="message"></textarea>

单选按钮

  <!-- 单选按钮 -->
        <div>请选择你的性别:</div>
        <input type="radio" value="1" v-model='person'>
        <label>男</label>
        <input type="radio" value="2" v-model='person'>
        <label>女</label>

复选框(单选)

 <!-- 复选框(单选) -->
        <input type="checkbox" v-model='checked'>
        <label>我已阅读此协议</label>

选框(多选)

 <!-- 复选框(多选) -->
        <div>请选择你的爱好:</div>
        <span v-for='item in favList'>
            <input type="checkbox" :value="item.id" v-model='favArr'>
            <label v-text='item.label'></label>
        </span>

下拉选框(单选)

   <!-- 下拉选框(单选) -->
        <div>请选择你的学历:</div>
        <select v-model='student'>
            <option v-for='item in studentList' :value="item.id" v-text='item.label'></option>
        </select>

下拉选框(多选)

  <!-- 下拉选框(多选) -->
        <div>请选择你的学历:</div>
        <select multiple v-model='studentArr'>
            <option v-for='item in studentList' :value="item.id" v-text='item.label'></option>
        </select>

单修饰符

  <!-- 表单修饰符 -->
        <div>
            <input type="text" v-model.number.lazy='aaa'><br>
            <input type="text" v-model.trim.lazy='bbb'><br>
            <input type="text" v-model.lazy='ccc'>
        </div>

绑定的全部代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 声明式（响应式数据操作）
        // 组件化（组件封装）
        var app = new Vue({
            el: '#app',
            data: {
                username: '',
                message: '',
                checked: false,
                favArr: [1],
                favList: [
                    { id: 1, label: '读书' },
                    { id: 2, label: '编程' },
                    { id: 3, label: '跑步' },
                    { id: 4, label: '打游戏' }
                ],
                person: '1',
                person2: '2',
                studentList: [
                    {id: 1, label: '博士'},
                    {id: 2, label: '硕士'},
                    {id: 3, label: '本科'},
                    {id: 4, label: '大专'},
                    {id: 5, label: '高中'}
                ],
                student: 5,
                studentArr: [],
                aaa: '',
                bbb: '',
                ccc: ''
            },
            methods: {
                innerClick: function(arg, e) {
                    console.log(arg)
                    console.log(e)
                },
                outerClick: function() {
                    console.log('外层div被点击了')
                },
                inputClick: function() {
                    console.log('input')
                },
                add: function() {
                    console.log('add')
                },
                inputHandle: function() {
                    console.log(this.username)
                }
            }
        })
    </script>