属性绑定
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>
TIM图片20180124220600.jpg
这时候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>
TIM图片20180125002300.png
这个方法其实是给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>
TIM图片20180125105527.png
在这个键盘事件中，我们定义的方法是当你输入内容时，控制台会打印一句“你正在输入姓名！”。
键盘修饰符
就刚才的例子而言，会发现你按下多少次键盘，就会打印多少次话。但是这样不符合我们平时的习惯，我们更希望在按下enter键之后再打印这句话，此时就要用到键盘修饰符
<input type="text" v-on:keyup.enter="logName"/>
TIM图片20180125110458.png
现在的效果是不是就好多了。如果我们想要按下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
网友评论