vuejs 指令之 v-on

v-on

绑定事件监听器。事件类型由参数指定
形式：v-on:事件类型（不要加前缀）=“ 方法名称 ”
方法名称的命名：事件类型 + Handler
也就是设置一个事件（比如点击事件，提交事件等）

我们在视图上不做逻辑业务的操作，和 mvc 一样，逻辑业务的操作放在控制器里，在里面有一个属性 methods ,专门用来放方法的，所以如果视图上有复杂逻辑操作的话，我们一般是设置一个对象函数，使用的时候直接用它的属性，而不是直接在视图上操作

<div id="box">
//绑定一个点击事件，然后调用函数
    <button v-on:click="clickHandler">点击事件 v-on</button>
    <!--简写-->
    <button @click="clickHandler">点击事件二</button>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"
        },
        //方法统一写在methods里面
        methods: {
            clickHandler: function(){
                console.log(this.name);

            }
        }
    })
</script>

上面我们简单知道了如何去用 v-on ，下面我们用 click 事件来看一下这个指令的特性
1：回调函数（写在 methods 里的）
1）： 不能使用箭头函数，如果使用 this 代表Window全局
2）：建议使用 es6 的简化写法
2：vuejs 里面的事件的回调函数可以增加括号，也可以不增加，增加和不增加有什么区别
不加括号的时候， vuejs 会自动给回调函数传递 event 事件源，不能传参
如果加上括号，需要传递 $event,是vuejs帮我们封装的事件源，还可以传参，这里传参我们可以用剩余运算符（…rest：在参数列表里我们这么叫，其他时候是扩展运算符）,我们就可以传入多个参数了

<div id="box">
<!--1. vuejs 里面的事件的回调函数可以增加括号，也可以不增加，增加和不增加有什么区别？-->
    <!--如果不增加 括号的时候， vuejs 会自动给回调函数传递 event 事件源；如果加上括号，需要传递 $event,是vuejs帮我们封装的事件源-->
    <!--加上括号，除了可以传递 $event 还可以传递用户自定义的参数-->
    <button v-on:click="clickHandler">vuejs 点击事件</button>
    <!--简写-->
    <button @click="clickHandler">vuejs 点击事件</button>
    <button @click="clickDataHandler($event, 1, 'abc')">有event的点击事件</button>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili",
        },
        methods: {
            // 回调函数，1. 不能使用箭头函数，如果使用 this 代表Window全局
            // 2. 建议使用 es6 的简化写法
            //...rest  如果是函数的参数列表，则被称为 剩余运算符，只能放置在最后的一个参数
            // es6 尽可能写代码的速度，方便程序员
            clickHandler: function(){
                alert("我被点击了");
            },
            clickDataHandler (event, ...rest) {
                console.log(event.target);
            }
        }
    })
</script>

除了 click 事件比较常见外，submit 事件我们也会常常用到
在提交事件中，我们如果不想跳转页面，就要进行阻止默认行为的操作，除了 event.preventDefault();这个方法外，vuejs 框架里也有他的方法，那就是修饰符

	v-on:click.prevent 事件的修饰符一种，代表阻止表单的默认的行为
	用法：在事件类型后面加上即可，如@submit.prevent="submitHandler"，
	这样阻止了表单默认提交的行为，注意，一定要加载 form 标签上
	
	除了事件修饰符，还有其他的类型修饰符，例如 v-model 修饰符
	v-on:"v-model".trim：出去空白字符
	.number：只保留数字
	
	事件修饰符 按键 代表只有用户按下 回车的时候，触发事件
	v-on:keyup.enter="keyupHandler"
	v-on:keyup.13="keyupHandler"

<div id="box">
    <!--@submit.prev  .prevent 称为事件的修饰符，代表阻止表单的默认的行为-->
    <!--prevent 阻止的意思-->
    <!--除了 prevent 事件修饰符，还有其他的修饰符-->
    <!--除了事件修饰符，还有其他的类型修饰符，例如 v-model 修饰符-->
    <form action="#" @submit.prevent="submitHandler">
        <!--去掉空字符串-->
        username:<input type="text" v-model.trim="username" />
        <!--设置里面的内容为数字-->
        password:<input type="text" v-model.number="password" />
        <input type="submit" value="提交">

        <!--事件修饰符 按键 代表只有用户按下 回车的时候，触发事件-->
        <input type="text" v-on:keyup.enter="keyupHandler" />
        <input type="text" v-on:keyup.13="keyupHandler" />
        <input type="text" v-on:keyup.up="keyupHandler" />
        <input type="text" v-on:keyup.down="keyupHandler" />
    </form>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
           username: '',
            password: '',
        },
        methods: {
            submitHandler ( event ){
                //阻止默认行为
                //vuejs 作者也考虑到阻止表单的默认行为是很常见的需求，封装一个事件修饰符，我们只要用这个修饰符就可以阻止默认的行为，在form标签上加
                // event.preventDefault();
                //收集信息
                var _username = this.username;
                var _password = this.password;
                //进行验证
                if(_username.length <= 0 || _username.length >= 10){
                    alert(" 信息错误 ");
                    return;
                }
                console.log("合法");

            },
            keyupHandler ( event ) {
                if(event.keyCode === 13){
                    console.log("回车键");
                    return;
                }

            }

        }
    })
</script>