Vue.js入门教程（六）事件和方法

第六章：事件和方法

有话说在前面

---

说真的，无论是任何一种编程语言，你信不信它归根到底都是事件驱动的。没有一个click，没有一个touch，谁知道你要干吗。通过事件，一定会触发一个方法，所以我把事件和方法合并成一个一章。另外，这里我会解释一下我为什么没有用过滤器。

on

v-on用来绑定事件，现在可以省略为@ ，即@click = v-on="click"

---

你可以使用 v-on 指令来绑定并监听 DOM 事件。绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式。如果提供的是一个方法，则原生的 DOM event 会被作为第一个参数传入，同时这个 event 会带有 targetVM 属性，指向触发该事件的相应的 ViewModel：

<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<div id="demo">
  <a v-on="click: onClick">触发一个方法函数</a>
  <a v-on="click: n++">触发一个表达式</a>
</div>
<script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        n: 0
      },
      methods: {
        onClick: function (e) {
          console.log(e.target.tagName) // "A"
          console.log(e.targetVM === this) // true
        }
      }
    })
</script>

methods 方法

---

你的所有方法，都储蓄在methods属性中，你看完这个例子就会发现，methods跟filter使用都一模一样。不但结果一样，使用方法也差不多。但是我为什么不用过滤器呢，这属于个人习惯问题，我喜欢我的代码风格统一，一个模式操作到底，而不是一会是竖杠，一会又是括号。显得比较乱。

<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<div id="app">
    {{add(message)}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            message:3
        },
        methods:{
            add:function(value){
                return value+3
            }
        },
        filters:{
            myf:function(value){
                return value+3
            }
        },
        created(){
            console.log("--vue加载成功！--");
        }
    })
</script>

修饰符

---

有的时候，我们需要绑定一些事件。
比如说，onkeydown，这个时候vue为我们提供了一个简单的写法:

<input @keyup.enter="function">

其他键盘修饰符

修饰符	作用
.delete	（删除/BackSpace（退格）
.tab	Tab
.enter	Enter（回车）
.esc	Esc（退出）
.space	Space（空格键）
.left	Left（左箭头）
.up	Up（上箭头）
.right	Right（右箭头）
.down	Down（下箭头）
.ctrl	Ctrl
.alt	Alt
.shift	Shift
.meta	(window系统下是window键，mac下是command键)