一、起步 1.下载核心库vue.js

bower info vue #查看版本号npm init --yes #下载vue.jscnpm install vue --save

版本 v2.5.17 目前最新版本（） vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM)，页面更新效率高，速度更快 2.hello world（对比 angular） 2.1angular实现

js:    let app=angular.module("myApp",[])    app.controller("MyController",["$scope",function($scope){        $scope.msg=" hello world ";    }])html:            

2.2Vue实现

js:    new Vue({        el:"#itany",//指定光联的选择器        data{//存储数据            msg:"hello world",            name:"小零"        }    })html:    
     
      {
    {msg}}
     

3.安装vue-devtools插件，便于在Chrome中调试vue直接将vue-devtools解压缩， 三、常用指令      1.什么是指令？      用来扩展HTML标签的功能      angular中常用指令：      ng-model      ng-repeat      ng-show/hide      ng-if      2.vue中常用的指令          1、v-model          双向数据绑定，一帮用于表单元素         2、v-for （val,key）         对数组或对象进行循环操作，使用v-for,不是v-repeat         注：在vue 1.0中提供了隐式变量，如$index.$key             在vue 2.0中去除了隐式变量，已被废除。         3、v-on             用来绑定事件，用法v-on:事件名="函数"         4、v-show/v-if         用来显示或隐藏元素，v-show是通过display来实现，v-if是每次删除后重新创建，与angular中的类似 四、练习：用户管理 五、事件     1、事件         1.1、事件简写             v-on:click=""             简写方式 @click=""         1.2 事件对象$event（e.target.innerHtml）         1.3 事件冒泡             原生的方法：e.stopPropagation()             vue方法：@click.stop         1.4 事件默认行为             阻止事件的默认行为：             原生的方法：e.preventDefault()             vue方法：@click.prevent         1.5 键盘事件              @keydown @keypress @keyup              (e.keyCode：按键序号)         简写：             回车： @keydown.13 或  @keydown.enter             上： @keydown.38 或者  @keydown.up             默认没有 @keydown.a/ @keydown.b         1.6 事件的修饰符             .stop - 调用 event.stopPropagation().             .prevent -调用 event.preventDefault().             .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调             .native - 监听组件根元素的原生事件             .once - 支触发一次回调事件     2、属性：          2.1 属性绑定和属性的简写              v-bind 用于属性绑定：v-bind:属性名=""              简写方式：:属性名=""          2.2class和style属性             绑定class属性和style属性时比较复杂             :class （:class={aa:true,cc:flag}）                 aa与cc为样式名，                 true：则运用此样式名的样式，                 flag：变量，为动态设置是否需要此样式名，flag在data中的值为true/false             :style（） 六、模板     1、简介         Vue.js 基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据，         模板也就是{
  {}}，用来进行数据绑定，显示在页面中         也称之为Mustache语法     2、数据绑定的方式         a.双向数据绑定             v-model         b.单向数据绑定             方式1：                 使用两大括号{
  {}}，肯能会出现闪烁的情况             处理：                 用v-cloak 与css ([v-cloak]:display:none;)并用             方法2：                 使用v-text/v-html 不会出现闪烁问题                 v-html：可识别字符串中的标签     3、其他指令         v-once 只绑定一次         v-pre 不编译，直接显示原样 七、过滤器     1、简介         用来过滤模型数据，在显示之前对数据处理和筛选         语法：{
  {data | filter1(参数) | filter2（参数）}}     2、关于内置过滤器         vue 1.0 中内置许多过滤器，如：             currency，uppercase，lowercase、limitBy、orderBy、filterBy         vue 2.0中已经删除了所有内置过滤器，全部被废除             如何解决：                 a.使用第三方工具 loadash、date-fns日期格式化、accounting.js货币格式化等                 b.自定义过滤器     3.自定义全局过滤器         使用全局方法 Vue.filter