• vue中组件必须且只能是由一个标签裹起来的，template同理

  • vue中使用v-bind:attr="value"绑定属性，新版本中可以使用缩写:attr="value",官方文档：

    v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

  • v-bind="obj"可以直接绑定一个对象，对象属性名为attr，值为attr绑定的值

  • v-once，标签内，仅绑定一次变量

  • 使用v-html插入html标签，可以简单地防xss攻击

  • 计算属性会缓存，只有依赖变更才会触发

  • v-bind:style=”{...}“会自动添加浏览器引擎前缀

  • Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。要想不复用看页使用key标识两个元素不能复用，用 key 管理可复用的元素

  • 事件处理可以获取原生DOM事件对象，使用$event，<div @click="onClick(params,$event)"></div>

  • v-model其实是一个语法糖，v-bind和v-on的结合，并非真正的双向绑定

  • 组件自定义事件名无所谓大驼峰/小驼峰，vue模板语法会全部转成小写，所以推荐kebab-case命名，即handle-click形式

  • 组件名称为kabab-case命名只能用<my-component />应用，用驼峰命名则可以用<my-component />或<MyComponent />

  • vue的是单向数据流，prop是一个体现，父组件通过子组件定义prop可以传递数据到子组件，子组件修改这些数据不会影响父组件;这一点需要注意，对象这些引用类型

  • vue的prop的数据是单向的，如果想实现”双向“，vue2.3后提供了修饰符.sync，也是一个语法糖，实现””双向””绑定，这个修饰符只能绑定一些值类型，不能绑定对象等（过于复杂）

  • inheritAttrs属性，标记是否继承attr，非 Prop 的 Attribute

  • vue不能对对象/数组的变化指的是

    • 对于对象
      • 无法检测对象property的添加或移除，在vue的created后再添加property是不会别响应的
      • 想要在created后添加又要响应
        • 可以应Vue.set(object,propertyName,value)或者其别名this.$set(…)
    • 对于数组
      • 无法检测元素的值改变或者数组length的变化
      • 想要在created后改元素值或者length又要响应
        • 同样可以使用Vue.set(arr,index,value)或this.$set(…)
        • 使用vue封装过的数组方法（全部是更改原数组的方法，filter/map这些返回新数组不起作用）
          • push()
          • pop()
          • shift()
          • unshift()
          • splice()
          • sort()
          • reverse()

  • $nextTick, vue中 被绑定的数据的发生改变，更新到DOM上是一个异步的操作（）；所以当改变了数据，又需要操作对应的DOM，那么不能用同步的代码，需要用到vue提供的Api，$nextTick(callback:function)，下一轮vue更新数据到真实DOM时执行回调函数callback, 在callback里面进行操作，它返回的是一个promise所以也可以用async/await

最后更新： 2021年07月16日 00:03

原始链接： https://idkhts.github.io/2021/01/19/vue%E9%9A%8F%E8%AE%B0/