Vue基础知识-基础使用

Posted 火腿肠烧烤大赛冠军

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue基础知识-基础使用相关的知识,希望对你有一定的参考价值。

computed与和watch

computed与watch的区别
computed:

  • computed的缓存是指 data不变就不会重新计算
  • computed一个v-model的值需要get和set
    watch:
  • 监听引用类型要深度监听(deep:true)
  • 拿不到oldVal问题(指针都是指向一个地址,所以拿不到。oldVal和val一样)

class和style

动态使用class:

style注意是驼峰写法:

条件渲染

  • v-show为display:none
  • v-if只有一个节点

循环列表的渲染

遍历数组以及对象:

v-for与v-if同用问题:
v-for优先级更高,循环后再判断 做了很多次重复的判断
**解决方案:**要在外层写v-if或者里面也可以

事件


**event传送方式:**只传event以及传event和自定义参数

vue的事件放在什么元素下就挂载到什么下

事件修饰符

按键修饰符

表单



组件使用

props和$emit

**父传子:**两种写法

子传父:
通过emit来调用父组件的方法:

自定义事件-兄弟之间通讯方式

实现方法函数:

绑定自定义事件:

兄弟组件调用方法:

调用自定义事件方法:

event来源:

**注意及时销毁:**否则造成内存泄漏

生命周期(单个组件)


mounted与created的区别

mounted页面已经渲染完毕
createdvue已经初始化完毕

beforeDestory要做什么事情

解除绑定
销毁子组件以及事件监听器

带有父子组件的生命周期

初始化实例:(created)
父组件先创建子组件后创建
渲染完成:(mounted)
子组件先完成父组件后完成
更新:(beforeupdate、updated)
父组件先开始更新,子组件后开始更新
子组件先更新完成,父组件后更新完成
销毁:(destoryed、beforedestoryed)
父组件先开始销毁,子组件后开始销毁
子组件先销毁完成,父组件后销毁完成

以上是关于Vue基础知识-基础使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue 基础知识之 Vue.extend

Vue基础知识总结:基础篇

前端框架Vue自学之Vue基础语法

Vue基础篇

vue基础知识之vue-resource/axios

Vue基础知识概括