事件与列表的处理

事件处理

---事件源 ---事件 ---事件处理函数

方法事件处理

a.function(e){
    
    console.log(e.target);//事件源
    console.log(e.type);//发生了什么事件
    
}

内联处理方法

<div id="example-3">
  <button v-on:click="apo('hi')">12</button>
  <button v-on:click="apo('what')">23</button>
</div>  
<script>
new Vue({
  el: '#example-3',
  methods: {
    apo: function (mes) {
      alert(mes)
    }
  }
})
</script>

函数值可以直接传进参数里

事件修饰符

• stop 阻止单击事件冒泡
• prevent组止默认行为
• capture添加事件侦听器时使用事件捕获模式
• self只当事件在该元素本身触发时触发回调
• once只发生一次
  例如冒泡行为

.stop时阻止自事件的行为.self

键值修饰符

header 1	header 2
enter	13
空格	32
左	37
上	38
右	39
下	40
0-9	48-57
a-z	65-90

按键别名
-.enter
-tab
-delete (捕获 “删除” 和 “退格” 键)
-esc
-space
-up
-down
-left
--right

<input @keyup.alt.67="clear">

表单绑定事件

*文本（text,textarea多行文本）

<input type ="textarea" rows='50' cols="50" >

复选框

<div id='a3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script>


new Vue({
  el: '#a3',
  data: {
    checkedNames: []//''为布尔值
  }
})

</script>

单选按钮

<div id="e4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

<script>
new Vue({
  el: '#e4',
  data: {
    picked: ''//若值为one则选中one
  }
})
</script>

选择列表

单选列表

<div id=e5">
  <select v-model="selected">
    <option disabled >请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
  el: 'e5',
  data: {
    selected: '',
  }
})
</script>

修饰符

• lazy
  在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
• number如果想自动将用户的输入值转为 Number 类型
• trim自动过滤用户输入的首尾空格