Vue入门指南（3）

属性绑定

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

<div id="vue-app">
  <a v-bind:href="website">web开发</a>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      website: "http://www.baidu.com"
    },
  })
</script>

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

<div id="vue-app">
  <p v-html="websiteTag"></p>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      websiteTag: "<a href='http://www.baidu.com'>Web</a>"
    }
  })
</script>

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

事件绑定

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

<style>
  #canvas{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
    line-height: 300px;
  }
</style>

<h1>Event</h1>
<div id="vue-app">
  <button type="button" v-on:click="add(1)">增一岁</button>
  <button type="button" v-on:click="subtract(1)">减一岁</button>
  <button type="button" v-on:click="add(10)">增十岁</button>
  <button type="button" v-on:click="subtract(10)">减十岁</button>
  <p>My age is {{ age }}</p>
  <div id="canvas" v-on:mousemove="moveXY">{{x}},{{y}}</div>
</div>

<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: "#vue-app",
    data: {
      age: 20,
      x: 0,
      y: 0,
     },
     methods: {
      add: function(num){
        return this.age += num;
      },
      subtract: function(num){
        return this.age -= num;
      },
      moveXY: function(event){
        this.x = event.offsetX;
        this.y = event.offsetY;
      }
    }
})
</script>

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

事件修饰符

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

<button type="button" v-on:click.once="add(1)">增一岁</button>

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

 <div id="canvas" v-on:mousemove="moveXY">
  {{x}},{{y}} - <span v-on:mousemove.stop="">Stop moving</span>
 </div>

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 可以写成只有修饰符的形式 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

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

键盘事件

<div id="vue-app">
        <h1>键盘Event</h1>
        <label>姓名</label>
        <input type="text" v-on:keyup="logName"/>
</div>
<script src="vue.js"></script>
<script>
        var app = new Vue({
            el: "#vue-app",
            methods: {
                logName: function(){
                    console.log("你正在输入姓名！");
                }
            }
        })
</script>

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

键盘修饰符

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

<input type="text" v-on:keyup.enter="logName"/>

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

<!-- 只有在 `keyCode` 是 enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

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