vue.js--事件处理器&表单

vue.js事件处理器

事件监听可以使用v-on指令：

  增加 1
  
这个按钮被点击了 {{ counter }} 次。

 

通常情况下，我们需要使用一个方法来调用js方法。v-on可以接受一个定义的方法来调用

   
  Greet

除了直接绑定到一个方法，也可以用内联js语句：

  Say hi
  Say what

 

事件修饰符

vue.js为v-on提供了事件修饰符来处理DOM事件细节，如：event.preventDefault()
vue.js通过点（.）表示的指令后缀来调用修饰符：
.stop，.prevent，.capture，.self，.once

...

...

按键修饰符

vue允许为v-on在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

Do something

表单

用v-model指令在表单控件元素上创建双向数据绑定

v-model会根据空间类型自动选取正确的方法来更新元素。

输入框

  
input 元素：
  
  
消息是: {{ message }}
    
  
textarea 元素：
  
{{ message2 }}
  

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
eg:复选框的双向数据绑定：

  
单个复选框：
  
  {{ checked }}
    
  
多个复选框：
  
  Runoob
  
  Google
  
  taobao
  

  选择的值为: {{ checkedNames }}

image.png

单选按钮

eg：单选按钮的双向数据绑定：

  
  Runoob
  

  
  Google
  

  选中值为: {{ picked }}

 

image.png

select列表

eg：下拉列表的双向数据绑定：

  
    选择一个网站
    Runoob
    Google
  
 
  

      选择的网站是: {{selected}}
  

 

image.png