1. 基础
    1. 安装
      1. 用script引入
    2. 介绍
      1. 先script引入
      2. 再在js中定义new Vue({})对象
      3. 在html中定义容易div#app
      4. V-bind:属性="xx"标签
      5. V-if标签
      6. {{data.text}}传入对象
      7. 处理用户输入v-on事件
      8. v-model双向数据绑定
    3. 组件化
      1. 创建组件
        1. Vue.component('login'.{templage:'登录组件'})
        2. components:{ 'login':{templage:'登录组件'} }
      2. html中使用组件
      3. 自定义组件取vm对象的值
        1. 先在自定义组件中添加props属性
    4. Vue实例
    5. 模板语法
      1. 插值表达式
      2. v-html可以解析原始html
      3. 使用javascript表达式
      4. v-if之类的指令
      5. 事件修饰符
      6. 缩写
    6. 计算属性和侦听器
      1. 计算属性
        1. 计算属性computed里面的元素有get和set属性
      2. 侦听器
    7. Class和Style绑定
      1. 绑定class
        1. 对象语法
        2. 数组语法
        3. 用在组件上
      2. 绑定内联样式
        1. 对象语法
        2. 数组语法
    8. 条件渲染v-if语句
      1. <h1 v-if="flag">Vue!</h1>
      2. <div v-else-if="type === 'B'">
      3. <h1 v-else>没有结果</h1>
      4. 上面语句会切换.可用key关键字
      5. 简单的判断显示可用v-show
      6. v-if和v-show对比
      7. v-for和v-if一起使用
    9. 列表渲染v-for语句
      1. v-for循环多数据
      2. v-for带索引的循环(带括号第二参数是索引)
      3. 上面循环数组第二参数是索引
      4. v-for循环对象
        1. <li v-for="item in obj">{{item}}
        2. <li v-for="(item.key) in obj">{{item}}
        3. <li v-for="(item.key.index) in obj">{{item}}
      5. v-for更新操作需要跟踪节点身份:key用来识别
      6. 数组更新检测方法
        1. 变异方法
        2. 替换数组
        3. 注意事项
      7. 对象变更检测注意事项
        1. 添加修改对象值
          1. 以前vm.b = 2
          2. Vue.set(vm.userProfile. 'age'. 27)
          3. vm.$set(vm.userProfile. 'age'. 27)
        2. 添加修改对象多个值
      8. 显示过滤/排序后的结果
        1. 可以使用计算属性
      9. v-for取值范围
      10. 在templage上使用v-for
      11. v-for和v-if同时使用
      12. 在组件上使用v-for
        1. 先引用v-for语句
        2. 此时虽然引用v-for因为作用域不同还需要进行传值
    10. 事件处理
      1. 监听事件
        1. v-on:click="count++"
        2. v-on:click="func('hi')"
      2. 事件修饰符
        1. @click.stop
        2. @click.prevent
        3. @click.stop.prevent
        4. @click.self
        5. @click.once
      3. 按键修饰符
        1. @keyup.enter='xx'
        2. @keyup.page-down='xx'
        3. @keyup.其他常用的按键名
        4. 全局配置config.keyCodes键码别名
        5. @click.ctrl.exact(2.5版本可用)
    11. 表单输入绑定
      1. v-model双向数据绑定并实时监测更新
      2. 样例demo在连接
      3. 修饰符
        1. v-model.lazy=msg
        2. v-model.number='age'
        3. v-model.trim='msg'
    12. 组件基础
      1. 组件component特点
        1. data必须是一个函数最后return对象数据
        2. 组件树
      2. 通过prop支撑向子组件传递数据
        1. 假设父组件有site:'helloword'我要用
        2. 先定义全局组件
        3. 再定义props数组定义子变量
        4. 在blog-post组件内模版调用title使用
        5. 最后要<blog-post :title='site'>绑定父组件属性
        6. 如果父组件site是一个对象或数组上面还需要v-for循环上面也要改
      3. 通过插槽分发内容
        1. 在组件模版内定义templage内容
        2. html中调用标签之内有内容自动添加
      4. 动态组件
        1. 放在html中的component标签必须有is属性
        2. is属性对应一个变量.值就是对应模版的名字
  2. 深入了解组件
    1. 全局组件注册
      1. 组件名
    2. 局部注册
    3. 自定义事件
    4. 组件调用js原生函数
    5. 插槽
      1. 调用变量作用域
      2. <slot>后备内容</slot>
      3. 带name属性的插槽
        1. 之后在模版标签中定义v-slot="header"
        2. 插槽引用变量的作用域
      4. 独占默认插槽的缩写语法
        1. 先在组件标签上定义v-slot
        2. 然后在组件内部引用变量对象
    6. 动态组件和异步组件
      1. 在动态组件上使用keep-alive保持状态
    7. 其他知识点
      1. 访问根实例就是new vue的数据
      2. 访问父级组件实例
      3. 访问子组件实例或子元素(必须在组件定义属性ref='nihk'名字)
      4. 程序化的时间侦听器
        1. $on(eventName.eventHandler)
        2. $once()
        3. $off()停止侦听一个事件
      5. X-template
      6. 控制更新(数据双向绑定的更新)
  3. 过渡和动画
    1. 单元素/组件的过渡
    2. 上例涉及到的过渡css类名
    3. css动画可结合animate等库
    4. 初始渲染的过渡
    5. 过渡模式(两个按钮之间的切换)
      1. 简单的写法在transition加上mode="out-in"
    6. 组件之间的过渡一样在组件外加transition标签
    7. ul-li列表的过渡
    8. 状态过渡
  4. 混入及其他杂项
    1. 自定义指令
      1. 定义一个v-focus全局自定义指令
      2. 一个指令对象中有好多钩子函数
    2. 渲染函数&&JSX
    3. 节点树和虚拟dom
      1. createElement 参数
    4. vue插件
      1. 比如vue-route
    5. 过滤器
      1. {{ message | capitalize }}
  5. 一些工具介绍
    1. 单文件组件
    2. 单元测试
      1. 简单的断言
      2. import Vue from 'vue'
      3. import MyComponent from 'path/to/MyComponent.vue'
    3. TypeScript 支持
    4. 生产环境部署
  6. 路由