vue--事件处理、表单输入绑定

目录

事件处理

事件处理方法

事件修饰符

按键修饰符

表单输入绑定

单行文本

多行文本

复选框

单选按钮

选择框

修饰符

---

事件处理

        使用v-on指令可以监听DOM事件，并且在触发时运行一些JavaScript代码。

计数器示例：

    <div id="exam">
        <button v-on:click="counter += 1">加1</button>
        <p>点击了{{ counter }}次</p>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                counter:0
            }
        })
    </script>

实现效果：

事件处理方法

        许多事件处理逻辑较为复杂，不适合直接将JavaScript代码写在v-on指令中，故v-on可以接收一个需要调用的方法名称：

        示例：

    <div id="exam">
        <button v-on:click="way">点击</button>
        <div id="test"></div>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                name:'vue.js'
            },
            methods:{
                way:function(e){
                    alert(this.name)
                    if(e){
                        document.getElementById('test').innerHTML = e.target.tagName;
                    }
                }
            }
        })
    </script>

        上例中给按钮传递一个way方法，当方法调用时，弹窗显示数据name，并在网页写入调用事件的tagName。

        实现效果：

        我们还可以用内联JavaScript语句：

    <div id="exam">
        <button v-on:click="show('hey')">show hey</button>
        <button v-on:click="show('hello')">show hello</button>
    </div>
    <script>
        new Vue({
            el:'#exam',
            methods:{
                show:function(e){
                    alert(e)
                }
            }
        })
    </script>

        实现效果： 

事件修饰符

        Vue.js为v-on提供事件修饰符来处理DOM事件细节，通过由点.表示的指令后缀来调用修饰符。

● 阻止冒泡：.stop

● 阻止默认事件：.prevent

● 阻止捕获：.capture

● 只监听触发该元素的事件：.self

● 只触发一次：.once

● 左键事件：.left

● 右键事件：.right

● 中间滚轮事件：.middle

        示例：

        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doStop"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSub"></form>
        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doLink"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis"></div>
        <!-- 只当在 event.target 是当前元素自身时触发处理函数 事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat"></div>
        <!-- 2.1.4新增 -->
        <!-- 点击事件仅触发一次 -->
        <a v-on:click.once="doOnce"></a>

        使用修饰符的顺序很重要，响应代码会以相同顺序产生。故v-on:click.prevent.self是阻止所有点击，v-on:click.self.prevent是阻止对元素自身的点击。

按键修饰符

        Vue.js为v-on在监听键盘事件时添加按键修饰符

        示例：

        <!-- 'key'='enter'调用'vm.submit()' -->
        <input v-on:keyup.enter = "submit" />

表单输入绑定

        在表单控件元素上创建双向数据绑定可以使用v-model指令，它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单的value、checked等，属性的初始值总是将Vue实例的数据作为数据来源，故需要在组件的data选项中声明初始值。

单行文本

        单行文本使用<input>示例：

    <div id="exam">
        <!-- 单行文本 -->
        <input v-model="msg" placeholder="请输入">
        <p>输入文本：{{ msg }}</p>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                msg:''
            }
        })
    </script>

        实现效果:

 

多行文本

        多行文本使用方式与单行文本不一样，但多行文本输入回车时显示空格，示例：

    <div id="exam">
        <!-- 多行文本 -->
        <textarea v-model="msg" placeholder="请输入"></textarea>
        <p>输入文本：{{ msg }}</p>
    </div>

        实现效果：

         需要注意的是，在文本区域插值<textarea>{{text}}</textarea>不能生效，需要用v-model来代替。

复选框

        若是单个复选框，绑定一个元素即可，若是多个复选框，绑定到同一数组：

    <div id="exam">
        <!-- 单个复选框 绑定到布尔值 -->
        <input type="checkbox" id="checkbox" v-model="cb">
        <label for="checkbox">{{ cb }}</label><br/>
        <!-- 多个复选框 绑定到同一数组 -->
        <input type="checkbox" id="more" value="1" v-model="cbs">
        <label for="1">选项1</label>
        <input type="checkbox" id="more" value="2" v-model="cbs">
        <label for="2">选项2</label>
        <input type="checkbox" id="more" value="3" v-model="cbs">
        <label for="3">选项3</label><br/>
        <span>选项：{{cbs}}</span>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                cb:false,
                cbs:[]
            }
        })
    </script>

        实现效果：

单选按钮

        单选按钮绑定到一个空串即可：

    <div id="exam">
        <!-- 单选按钮 -->
        <input type="radio" id="1" value="1" v-model="one">
        <label for="1">选项1</label>
        <input type="radio" id="2" value="2" v-model="one">
        <label for="2">选项2</label><br/>
        <span>选项:{{one}}</span>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                one:''
            }
        })
    </script>

        实现效果：

选择框

        选择框绑定到一个空串即可，可以添加multiple实现多选：

        <select v-model="choose" >
            <option disabled value="">请选择</option>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
        </select><br/>
        <span>选项：{{choose}}</span>

        单选实现效果：

         多选实现效果：

修饰符

        修饰符可以帮助我们实现不同的效果：

.lazy

        默认情况下v-model在每次单行文本input事件触发后，除了输入法组合文字时输入框的值与数据进行同步，添加.lazy修饰符后转为在change事件中同步

        示例：

        <input v-model.lazy="msg" placeholder="请输入">
        <p>输入文本：{{ msg }}</p>

        实现效果：

 

.number

        该修饰符可以将用户的输入值转为Number类型，若原型的转换结果为NaN则返回原型值：

        示例：

        <input v-model.number="msg" type="number" placeholder="请输入">
        <p>输入文本：{{ msg }}</p>

        实现效果：

.trim

        该属性可以自动过滤用户输入的首尾空格，这在表单用户名与密码应用中非常实用：

        示例：

        <input v-model.trim="msg" placeholder="请输入">
        <p>输入文本：{{ msg }} 输入文本长度：{{msg.length}}</p>

        实现效果：