Vue基础理论梳理

1、实例内部常用配置项

- data //放数据包的

- computed  //处理data后得到的数据

- watch  //监听事件

- methods  //存放事件函数

- created  //生命周期，创建后

- components //存放组件

- directives //存放自定义指令

2. 模板语法 （在html区域写的语法）

基本数据渲染：{{ 内容}}

属性控制：v-bind:class

3. computed 与 watch

相同点：都能够根据data的变化自动触发内部逻辑执行

不同点：computed最终提供的是数据， watch 只负责完成业务逻辑执行

4. class与style的动态控制

:class="bool?'active':''"

:class="['box',activeClass]"

:class="{'active':bool}"

:class="['box',{'active':bool}]"

:class="['box',bool?'active':'']"

5. 条件渲染

>注意两种条件渲染的区别

v-if v-else v-else-if

v-show

6. 列表渲染

v-for

 key  的作用？唯一标识，可以高效的更新虚拟dom

7. 事件处理

  不定义事件函数  @click="num++"

  定义事件函数

  事件函数传参

  事件函数提取event对象

  事件修饰符 .stop .enter

8.组件通信

  + props 父子通信

  + $emit 子父通信

  + bus  事件总线通信

  + $refs 操作实例对象通信

  + vuex

  + $parent

  + $children