Vue中事件的绑定、表单的双向绑定及修饰符语法规则和案例

事件的绑定

指令：v-on：去掉on的事件名="方法"
           或   @去掉on的事件名="方法"

事件对象：在事件绑定时不传参数，在方法定义时定义一个形参，该形参就是事件对象；
                  如果事件绑定时需要传参数，则$event代表事件对象的实参

事件的修饰符

普通事件修饰符

• .stop        阻止事件冒泡（阻止子元素向父元素传播）
• .prevent        阻止浏览器的默认行为
• .self        事件源是本身才能触发（无视其他传播过来的事件流）
• .once        只触发一次

ps:使用修饰符时，顺序很重要,用 v-on:click.stop.self="" 会使冒泡事件到此停止，而 v-on:click.self.stop="" 必须先点击自己才会触发stop停止冒泡

键盘事件的修饰符

.left        左方向键
.enter        回车键
.13        可以使用ASC码值
.ctrl
.shift
.alt
.exact        精准控制，只能按下此键触发

 

鼠标事件修饰符

.left        鼠标左键
.right        鼠标右键
.middle        鼠标中键 

---

表单元素的双向绑定

实现的功能：数据控制视图，视图控制数据

原理：通过绑定属性和绑定事件来实现

let vm = new Vue({
        el: "div",
        data: {
            str: "heihei"
        },
        methods: {
            change(e) {
                this.str = e.target.value;
                console.log(this.str)
            }
        }
    })

Vue提供了指令来实现双向绑定

指令：v-model="数据"

在单选框中的应用：

ps：将sex进行双向绑定，选到谁，对应的value就会修改sex值

   女
   男

  let vm = new Vue({
    el: "#app",
    data: {
      sex:"felmale"
    }
  })

单个复选框：

ps：布尔值决定了是否选择

 已阅读

 data: {
      isCheck:false,
    }

多个复选框：

ps：选哪个，哪个对应的value就会传到hobby数组中

      游戏

      看书

      运动

      睡觉

 data: {
      hobby:["游戏"]
    }

 下拉菜单：

ps：将province进行双向绑定，选到谁，对应的value就会修改province值

 
      {{item}}      
   

 data: {
      province:"甘肃省",
      ps:[
        "陕西省",
        "甘肃省",
        "河南省",
      ]
    }
  })

v-model的修饰符

• .number  将值转为数字赋值给vue所绑定的model数据
• .trim        删除输入内容的前后空格
• .lazy        懒加载，失去焦点时才修改model数据 

  

   

   

let vm = new Vue({
    el: "#app",
    data: {
      msg:"hi",
      num:3,
      str:""
    }
  })