vue.js学习（二）
前言
继续前面的学习，上文链接
正文
继续指令和事件的学习
指令
vue实例化
下面的示例都用到这个实例化的vue.
var a={
a:1
}
var vm=new Vue({
el:"#box",
data:{
url:"img/home.jpg",
data:a,
seen:false,
url:'img/img1.jpg'，
message:'插入标签
'
}，
methods:{
show:function(e){
console.log(e)
}
}，
show1:function(e){
console.log(e.keyCode)}
})4.v-bind
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的属性，例如：
<img v-bind:src="url"/>5.v-if
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素（PS：不是隐藏），它的基本语法如下：v-if=”exp”，exp是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：
<div id="box1"><div class="" v-if="seen">显示div>div>
6.v-show
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性，用法和v-if类似。
7.v-else
可以用v-else指令为v-if“else块”。v-else元素必须立即跟在v-if的后面——否则它不能被识别。例：
//当seen的值为true是，v-else的标签不显示；反之，显示
<div id="box1">
<div class="aa" v-show="seen">显示div>
<div class="bb" v-else>隐藏div>
div>8.v-html
添加html，例：
<div id='box'>
<div v-html='message'>div>
div>
常用指令到这儿就学的差不多了，接下来学习事件。
事件
前面已经提到过事件可以用指令v-on来进行绑定，这儿就不做介绍了。一提到事件，首先想到的应该是事件对象，事件冒泡和事件阻止了。下面依次介绍。
1.事件对象
事件对象中保存了当前被触发事件的一些相关的属性信息，如事件源、事件发生时的鼠标位置、事件按键等。
原生js获取方法：
IE中可以window.event直接获取，而Firefox中则不可以，可通过如下方法获取：
1）var event = window.event || arguments.callee.caller.arguments[0];
2）通过参数传。function(e) { var event = window.event || e; }
vue获取方法：
@click="show($event)//$event即为事件对象
2.事件冒泡
在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。
3.事件阻止
原生js实现事件阻止：
在IE里使用 window.event.cancelBubble = true;
在Firefox里使用 event.stopPropagation();
vue实现事件阻止：
1.原生js中的方法依然可以用。
2.vue特有的方法
<div id="box" @click="show1()">
"button" id="" value="点击" @click.stop="show()" />
div>键盘事件-键码
例如通过方向键来触发事件时，可以进行如下书写。up,down,left,right.
type="text" id="" value="" @keydown.left="show()" />
type="text" id="" value="" @keydown.37="show()" />