使用Vue.js v2.2.2 学习，发现新版本与网上1.X版本的教程存在很多差异。以下是个人总结的一些 2.2.2版本的学习笔记

1：vue与angular

1. vue和angular里有很多的相似之处，angular的指令是以ng-开头，vue的指令 是以 v-  开头。（指令，就是扩展html标签的功能） 
2. 绑定点击事件使用 v-on:click="show();"，和angular不一样了额

 

2：vue2.2.2

1.  vue2.0之后不可以使用body或者html标签作为选择器 

var v = new Vue({
el:'div', // 此处写 body 或者 html 是不对的
data:{
v1:'asdasda',
v2:123,
v3:true,
v4:[1,2,4,'1dsf324','sdgg'],
v5:{
'name':'haha',
'age':19,
'gender':'nv'
}
}
});

　　2. vue中的循环使用v-for ，并且没有 $index  $value 这些取值。可以使用如下：

<ul>
<template v-for='(v , k ,i) in v5'>
<li>
{{v}}:{{k}}:{{i}}
</li>
</template>
</ul>

 3:点击事件

v-on:click='show()'   等价于  @click='show()'      //@相当于 v-on

　　　　　　　　　　　　　　@click.stop=''   阻止冒泡，等于在事件中使用 e.cancelBubble=true;

　　　　　　　　　　　　　　@contextmenu=''  @contextmenu.prevent=''    右键点击事件   阻止默认事件,相当于 e.preventDefault();

4：键盘事件

@keydown='show($event)'

show(ev){

　　ev.keyCode

}

@keyup='show($event)'

点击特定按钮触发事件的方法：  @keyup.13='show()'  //点击回车时执行，13是keycode

　　　　　　　　　　　　　　　　等于： @keyup.enter = 'show()'

　　　　　　　　类似的还有 up，down, left,right         @keydown.up等

 

事件对象：是被包装过的 $event  作为实参传入到函数中。

　　　　　　在方法实际调用时，写法符合js语法，例如可以通过ev.clientX 获取鼠标点击时的x坐标

 

 全局配置：

（1）keyCodes   给事件的键位起别名 

Vue.config.keyCodes = {   　　v: 86, 　　f1: 112, 　　mediaPlayPause: 179, 　　up: [38, 87] }

未完待续……