事件处理

绑定监听

       
1.绑定监听
       test1
       test2
       test3 
 
       test4
       
2.事件修饰符

button 绑定click事件 传入参数 传入$event参数 传入数字参数和$event参数

				//以下函数均写在data中
		test1(){
                    alert('test1')
                },
                test2(msg){
                    alert(msg)
                },
                test3(event){
                    alert(event.target.innerHTML)
                },
                test4(number,event){
                    alert(number+ '----'+event.target.innerHTML)
                },

事件修饰符

       
2.事件修饰符
       

        

       
       去百度

		test5(){
                   alert('outer')
               },
               test6(){
                   alert('inner')
               },
   			test7(){
                   alert('点击超链接')
               },

stop阻止事件冒泡

蓝色div在红色div内，当点击蓝色div时，页面弹出 inner，然后弹出outer，这就是事件冒泡，子元素找到父元素的事件。蓝色div @click.stop可以阻止事件冒泡

prevent 阻止事件默认行为 超链接点击后会默认跳转到目的路径，加上prevent后，只执行test7内容，不会实现页面跳转

按键修饰符

       
3.按键修饰符
       
       

		test8(event){
                        alert('event.target.value' + ' ' + event.keyCode )
                }

页面效果 输入内容后按下enter键，会出现

enter对应keycode 是13 可以通过@keyup后跟数字或者enter两种方式来实现

表单数据自动收集

输入框，单选框，下拉框，多选框，多行文本框

特殊 下拉框是从data中遍历address数组，v-model绑定cityid，将所选中address中的id赋值给cityId

如图是vue调试工具的插件

        

            用户名:

            密码:

            性别
            
            女
            
            男

            爱好
            
            篮球
            
            足球
            
            乒乓球

            城市
            
                未选择
                {{add.name}}
            
            

            介绍：

            


            
        
    

 		new Vue({
            el:'#model',
            data:{
                username:'',
                password:'',
                sex:'女',
                hobby:[],
                address:[{id:1,name:'BJ'},{id:2,name:'SH'},{id:3,name:'GD'}],
                description:'',
                cityId:''
            },
            methods:{
                handleSubmit(){
                    alert('form提交')
                }
            }
        })