Vue入门指南（3）

属性绑定

v-bind：给属性绑定对应的值

  web开发

TIM图片20180124220600.jpg

这时候a的href属性值就是我们希望的值。
如果想将标签绑定，可以采用下面的方法：

TIM图片20180125002300.png

这个方法其实是给p标签添加了一个html内容，而这个html则是一个带有href属性的a标签，此时就达到了绑定标签的效果。

事件绑定

v-on：js中的事件在这里依然适用

Event

  增一岁
  减一岁
  增十岁
  减十岁
  
My age is {{ age }}
  
{{x}},{{y}}

在这里，我们封装了三个方法，其中一个是加age，还有一个是减age，我们在点击按钮时分别调用这两个方法，并且传递对应的参数，就可以实现用两个方法完成四个按钮的功能。还有一个方法是鼠标移动时显示对应的偏移值。
讲到调用方法，我们顺便说一句：1. 不论需不需要传参数，在{{ }}里调用方法必须写成{ { add() }}的形式。2. 在v-on里，如果不需要传参数，我们可以写成v-on:click="add"，如果需要传参数就要写成v-on:click="add(参数)"。

事件修饰符

修饰符是由点开头的指令后缀来表示的。比如，在刚才的例子中，如果我们需要仅仅在点击第一下按钮时年龄发生变化，我们就可以用到once修饰符

增一岁

还有，如果我们想让鼠标在特定区域内x，y不发生变化，可以用到stop修饰符

 

  {{x}},{{y}} - Stop moving
 

此时，再把鼠标放在span标签内，xy的值就不会发生任何变化。
除了once和stop，这样的修饰符还有一些，我们来看看它们具体有什么功能：

...



...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

...

这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

键盘事件

        
键盘Event
        姓名
        

TIM图片20180125105527.png

在这个键盘事件中，我们定义的方法是当你输入内容时，控制台会打印一句“你正在输入姓名！”。

键盘修饰符

就刚才的例子而言，会发现你按下多少次键盘，就会打印多少次话。但是这样不符合我们平时的习惯，我们更希望在按下enter键之后再打印这句话，此时就要用到键盘修饰符

TIM图片20180125110458.png

现在的效果是不是就好多了。如果我们想要按下alt加enter才能打印，就在.enter后加一个.alt就好了。
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

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