vuejs 学习笔记

使用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]

}

未完待续……