vue的基本知识点总结

vue的基本知识点记录,以备查阅,基本平时开发这些算是最最你基本的东西,罗列出来供参考,谢谢

1. 插值 表达式(只能是表达式不能是JS语句)
2. 指令 动态属性
3. v-html:会有XSS风险,会覆盖子组件(原理如下:)

   

4. computed 也是一个watcher有缓存,data不变则不会重新计算(get set)
   • computed和method比较
   • method不会缓存数据,每次都会去执行
   • 但是computed会缓存数据,只有依赖的属性发生变化了,才会执行
5. watch 如何深度监听? deept设置,立即监听immediate
6. watch 监听引用类型,拿不到oldVal,因为是指针赋值的关系,因为指针相同
7. class 使用动态属性

   <p :class="{abc: isAbc, def:isDef}"></p>
   <p :class="[abc, def]">class 数组</p>
   <p :class="[abc, def]">class 数组</p>
   

8. style 使用驼峰式写法 fontSize

   <p :style="styleData">style</p>
   

9. 条件渲染
   • v-if v-else的使用,可以使用变量,也可以使用 === 表达式

     <p v-if="type === 'a'">A</p>
     <p v-else-if="type === 'b'">B</p>
     <p v-else>C</p>
     
      <p v-show="type === 'b'">C</p>
     

   • v-if 与 v-show的区别以及使用场景
     • v-if是dom生成与否
     • v-show 是style display none与block的切换 dom一定会生成
10. 循环列表渲染
    • 如何遍历对象---- 可以使用v-for

      (value,key,index) in Object //对象遍历
      (item,index) in Array //数组遍历
      

    • key的重要性(不能用random或者index),这个在diff的时候会根据tag还有key判断是否为sameNode
    • v-for 与 v-if不能一起使用
    • v-for的优先级高于v-if
11. 事件

    • event 参数,自定义参数 $event

      • event是原生的event对象

    • 事件修饰符,按键修饰符stop prevent capture self ctrl exact native

      

      

    • 事件被绑定到哪里呢

      • 事件被挂载到当前元素上
12. 表单
    • v-model
    • 常见的表单项 textarea checkbox radio select

      <textarea>{{abc}}<textarea> 
      <!--上面的写法是错误的 下面才是对的-->
      <textarea v-model="abc">{{abc}}<textarea>
      

    • 常见的修饰符 lazy(防抖) number trim
    • v-model只能用在输入框以及组件上,不能用在普通元素上