方法和事件

监听事件

事件处理方法

实例

<div id="app">
    点击次数：{{count}}
    <button @click='handle()'>点击次数每次加1</button>
    <button @click='handle(8)'>点击次数每次加8</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
  count:0
},
  methods:{
    handle:function(count){
      count = count || 1;
      this.count += count;
    }
  }
})
</script>

若方法有参数，不加()，默认传递原生事件对象 event

methods:{
handle: function(count){
    console.log(count)//可以查看原生事件对象
}
}

内联处理方法

实例

  <div id="app">
    <button @click="say('hi')">Say hi</button>
  </div>

var app = new Vue({
  el: '#app',
  methods: {
    say: function(msg){
      alert(msg)
    }
  }
})

事件修饰符

实例

向上冒泡

• .stop

  ❝

  阻止事件传播

  ❞

• .prevent

  ❝

  不在重载页面

  ❞

• .capture

  ❝

  先触发带有该修饰符的元素

  ❞

• .self

  ❝

  只作用在元素本身而不是子元素

  ❞

• .once

  ❝

  只执行一次

  ❞

• .passive

  ❝

  滚动事件的默认行为会立即触发，不等 onScroll 完成，可以提升移动端的性能

  ❞

❝

.passive 不能和.prevent 一起使用，会将.prevent 忽略

❞

• (.once 失效问题):实例
  • 这里的.once 可以点击多次？经多方验证查找发现是 vue 版本问题，用的 jsbin 自带 vue 库版本太低，换了版本问题解决

按键修饰符

实例

 <input @keyup.enter='submitMe'>

表单输入绑定

基本用法

v-model

❝

语法糖，在<input><textarea><select>等表单类元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

❞

❝

负责监听用户的输入事件以更新数据

❞

它会忽略所有表单元素的 value，checked,selected 值将 vue 实例作为数据来源

实例

input 和 textarea

❝

只依赖与绑定的数据，会忽略初始化的 value 值

❞

radio

❝

v-model 配合 value 使用，绑定单选框的 value 值

❞

checkbox

❝

v-model 配合 value 使用，若绑定的数组是字符串则会转化为布尔值

❞

select

❝

绑定可以为单选数组，也可以为多选，v-model 一定是绑定在 select 上的，配合 value 使用

❞

值绑定

• radio、checkbox、select，v-model 值绑定通常都是静态字符串（对于复选框可以是布尔值）
• 单个 radio、checkbox 用 v-bind 绑定(可以再用 v-model 绑定的就是 v-bind 绑定的 value 值)

修饰符

实例

• .lazy

  ❝

  默认情况v-model 在 input 事件触发后将输入框的值与数据进行同步，添加.lazy使change之后再同步

  ❞

• .number

  ❝

  将输入的数字内容转换为 number 类型

  ❞

• .trim

  ❝

  过滤用户的首尾空白

  ❞