Vue - Event Handlers & Forms

The event handler

1. Event listeners can use the v-oncommand

	<div id='app'>
        <button @click="counter += 1">增加1</button>
        <p>按钮被点击了{
    
    {
    
    counter}}次</p>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            counter: 0
        }
    })

2. v-onA directive can accept a defined method to call

	<div id='app'>
        <button v-on:click="greet">Greet</button>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
    
    
            greet: function(event){
    
    
                // `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if(event){
    
    
                    alert(event.target.tagName)
                }
            }
        } 
    })

3. Instead of binding to a method, you can also use inline JavaScript statements

    <div id='app'>
        <button v-on:click="say('hi')">Say hi</button>
        <button @click="say('hello')">Say hello</button>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
    
    
           say: function(msg){
    
    
                alert(msg)
           }
        } 
    })

Second, the event modifier

Vue.js v-onprovides event modifiers to handle DOM event details like: event.preventDefault()or event.stopPropagation().

Vue.js invokes the modifier with a directive suffix .represented .

	<!-- 阻止单击事件冒泡 -->
	<a v-on:click.stop="doThis"></a>

	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent="onSubmit"></form>

	<!-- 添加事件侦听器时使用事件捕获模式 -->
	<div v-on:click.capture="doThis">...</div>

	<!-- click 事件只能点击一次，2.1.4版本新增 -->
	<a v-on:click.once="doThis"></a>

	<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
	<div v-on:click.self="doThat">...</div>

3. Button Modifiers

Vue allows adding key modifiers for v-on when listening to keyboard events

	<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
	<input v-on:keyup.13="submit">

	<!-- 同上 -->
	<input v-on:keyup.enter="submit">
	<!-- 缩写语法 -->
	<input @keyup.enter="submit">

4. Form

The v-model directive creates two-way data binding on form control elements.

v-model automatically picks the correct method to update the element based on the control type.

1. Use in inputand textareaelements to v-modelimplement two-way data binding

	<div id='app'>
        <p>input 元素：</p>
        <input v-model="message" placeholder="编辑我...">
        <p>消息是：{
    
    {
    
    message}}</p>
        <hr/>
        <p>texrarea 元素：</p>
        <p>{
    
    {
    
    message2}}</p>
        <textarea v-model="message2" placeholder="多行文本输入..."></textarea>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            message: 'Hello vue!',
            message2: '什么是 vue ?'
        }
    })

2. Checkboxes: One checkbox uses a logical value, multiple are bound to the same array

	// 单个复选框
	<div id='app'>
        <p>单个复选框</p>
        <input type="checkbox" v-model="checked">
        <label for="checkbox">{
    
    {
    
    checked}}</label>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            checked: false
        }
    })

	// 多个复选框
	<div id='app'>
        <p>多个复选框</p>
        <input type="checkbox" id='demo1' value="Google" v-model="checkedNames">
        <label for="demo1">Google</label>

        <input type="checkbox" id='demo2' value="Baidu" v-model="checkedNames">
        <label for="demo2">Baidu</label>

        <input type="checkbox" id='demo3' value="IE" v-model="checkedNames">
        <label for="demo3">IE</label>
        <br/>
        <span>选择的值为：{
    
    {
    
    checkedNames}}</span>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            checkedNames: []
        }
    })

3. Two-way data binding for radio buttons

	<div id='app'>
        <input type="radio" id="baidu" value="Baidu" v-model="picked">
        <label for="baidu">Baidu</label>
        <br>
        <input type="radio" id="google" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>选中的值为：{
    
    {
    
    picked}}</span>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            picked:'Baidu'
        }
    })

4. select list: two-way data binding for drop-down tables

    <div id='app'>
        <select v-model="selected">
            <option value="">选择一个网站</option>
            <option value="www.baidu.com">Baidu</option>
            <option value="www.google.com">Google</option>
        </select>

        <div id="output">
            选择的网站是：{
    
    {
    
    selected}}
        </div>
    </div>

	var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            selected: ''
        }
    })

5. Modifiers

1. .lazy: By default, v-model synchronizes the value and data of the input box in the input event, but you can add a modifier lazy to synchronize it in the change event

	<!-- 在 "change" 而不是 "input" 事件中更新 -->
	<input v-model.lazy="msg" >

2. .number: If you want to automatically convert the user's input value to the Number type (if the conversion result of the original value is NaN, the original value will be returned), you can add a modifier number to v-model to process the input value

	<input v-model.number="age" type="number">

3. .trim: If you want to automatically filter the leading and trailing spaces entered by the user, you can add the trim modifier to v-model to filter the input

	<input v-model.trim="msg">

不积跬步无以至千里 不积小流无以成江海