初学vue基础知识总结(一)

vue：一个mvvm框架（库），小巧，简单易学 容易上手
         一套构建用户界面的渐进式框架，
         只关注视图层， 采用自底向上增量开发的设计

网址：https://cn.vuejs.org/

vue与angular区别：
vue：简单易学易上手
         指令以v-xxx，
         一段html代码配合上json，在new出vue实例
         个人维护项目
         适用于移动端项目
angular：上手难
               指令以ng-xxx
               所有属性和方法都挂在$scope身上
               angular由google维护
               适用于PC端项目
共同点：不兼容低版本IE

vue基本雏形：
      html: <div id="box">{{msg}}</div>
      var c = new vue({
                         el:"#box",   //选择器
                         data:{
                                msg: 'welcome vue!'
                         }
                  })

angular展示一条基本数据：
      var app = angular.module('app',[ ]);
      app.controller('xxx',function($scope){
                              $scope.msg = 'welcome'
                             })
       html:  div ng-controller = "xxx"   
                       {{msg}}

常用指令：（指令-- >扩展html标签功能属性）
      vue: v-modle 一般表单元素（input）双向数据绑定
              循环：v-for="name in arr/(name index) in arr" 
                                   {{name}}  {{index}}
                         v-for="name in json/(name,key) in json/(name,key,index) in json"
                                   {{name}}  {{key}}  {{index}}

      angular:  ng-modle   ng-controller   ng-repeat    ng-click   ng-show
                     $scope.show = function(){}

事件：
     v-on:click="函数"   ---简写为---->  @click="函数"
     v-on:click/dbclick/mouseout/mouseover/mousedown...
     new vue({
                     el:"#box",
                     data:{
                               arr: ['apple','banana','orange'],
                               json:{a:'apple',b:'banana',c:'orange'}
                             },
                     methods:{
                                    show:function(){alert(1)}
                                    }
                  })
       html: <input type="button" value="按钮" v-on:click="show()" >

显示隐藏：
        v-show = "true/false"

事件对象：
       @click="show(event)"

事假冒泡：
       阻止冒泡  1、ev.cancelBubble = true;
                        2、@click.stop   推荐

默认行为：
       阻止默认行为  1、ev.preventDefault();
                               2、@contextmenu.prevent    推荐

键盘事件：
       @keydown   $event     ev.keyCode
       常用键：
                回车  1、@keyup.13
                         2、@keyup.enter
                上、下、左、右
                @keyup/keydown.up/down/left/right