vue的知识体系

1. vue是一套用于构建用户界面的渐进式框架
2. vue是尤雨溪开发的
3. vue的特点
   1. 采用组件化模式，提高代码复用率，且让代码更好维护
   2. 声明式编码，让编码人员无需直接操作dom，提高开发效率
   3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
4. 模板语法
   1. 插值语法
      1. 用于解析标签体内容
      2. {{}}
   2. 指令语法
      1. 用于解析标签
      2. v-bind   简写:
5. 数据绑定
   1. 单向数据绑定
      1. v-bind
      2. 数据只能从data流向页面
   2. 双向数据绑定
      1. v-model
      2. 数据不仅可以从data流向页面，也可以从页面流向data
      3. 只能应用在表单类元素上面（输入类元素）
      4. v-model:value 简写 v-model，因为v-model默认收集是value值
6. el与data的两种写法
   1.  el
      1. new vue时候配置el属性
      2. 先创建vue实例，再通过vm.$mount('#root')指定el的值
   2. data
      1. 对象式
      2. 函数式
      3. 组件，data必须使用函数式，否则会报错
   3. 有vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例
7. MVVM模型
   1. Model-view-viewmodel
   2. 介绍
      1. M：模型model，对应data中的数据
      2. V：视图，对应模板
      3. VM：视图模型：vue实例对象
   3. 发现
      1. data中所有的属性，最后都出现再vm上
      2. vm身上所有的属性，及vue原型上所有属性，再vue模板中都可以使用
8. 数据代理
   1. Object.defineProperty(对象，属性名，{配置项})添加的属性 是不参与遍历的，不可枚举
   2. 配置项
      1. value:xx；属性值
      2. enumerable:true；控制属性是否可以枚举，默认值是false
      3. writable:true;控制属性是否可以被修改，默认值是false
      4. configurable:true；控制属性是否可以被删除，默认值是false
      5. get:function（）{} 当有人访问该属性时候，get函数（getter）就会被调用，且返回值就是该属性的值
      6. set:（value）{} 当有人修改该属性时候，set函数（setter）就会被调用，且会收到修改的具体值
   3. vue数据代理：
      1. 通过vm对象代理对data对象中属性的操作（读或写）
      2.  vue中的数据代理操作的好处：更加方便的操作data中的数据
      3. 基本原理：
         1. 通过Object.defineProperty()把data对象中所有属性添加到vm上
         2. 为每一个添加到vm上的属性，都指定一个getter/setter
         3. 再getter/setter内部去操作（读/写）data中对应的属性
9.  事件处理
   1. 绑定事件使用v-on：xxx或者@xxx绑定事件，其中xxx表示是事件名
   2. 事件的回调函数需要配置再methods对象中，最终会在vm上
   3. methods中配置的函数，不要用箭头函数，否则this就不是vm了，则指向window
   4. methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
   5. @click='demo'和@click='demo($event)'效果一致，但后者可以传参
10. 事件修饰符
    1. .prevent阻止默认行为
    2. .stop阻止事件冒泡
    3. .once事件只触发一次
    4. .capture 使用事件的捕获模式
    5.  .self 只有event.target是当前操作的元素是才触发事件
    6. .passive 事件的默认行为立即执行，无需等待事件回调执行完毕 
11. 键盘事件
    1. 常用的按键别名
       1. 回车-enter
       2. 删除-delate（捕获‘删除’和‘退格’键）
       3. 退出-esc
       4. 空格-space
       5. 换行-tab（特殊，配合keydown使用）
       6. 上-up
       7. 下-down
       8. 右-right
       9. 左-left
    2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
    3. 系统修饰符键（用法特殊）ctrl,alt,shift,meta
       1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
       2. 配合keydown使用，正常触发事件
    4. 也可以使用keyCode去指定具体的按键（不推荐）
    5. Vue.config.keyCodes.自定义键名=键名，可以去定制按键别名