VUE 爬坑笔记 (3)

VUE组件

模块化 和 组件化 区别

• 模块化：从代码角度分析问题，把可复用的代码抽离为单独的模块
• 好处：方便程序员之间模块调用，提高了代码的复用率
• 组件化：从页面UI的角度分析问题
• 好处：方便UI的重用

组件创建的三种方式

1. Vue.extend() 返回一个组件的构造器，包含一个对象类型参数，用来配置，Vue.component() 利用Vue.extend()返回的构造器创建一个组件的实例。参数1：组件的名字，参数2：另一个组件的构造器
2. 直接使用 Vue.component()创建，第一种方式的简写
3. 通过指定模板创建

• 注意点：模板内只能有一个根节点，模板名如果用驼峰命名法，使用时应该使用连字符连接

组件中使用指令和事件

• 在组件中使用数据
  • 写在Vue.extend()构造器配置里面,它必须用一个函数，返回一个对象,主要原因是在多处使用模板时，改变数据时其他位置引用的话数据也会改变

创建子组件

• 使用 components对象,写在与template同级的位置，内部与创建新组件方法一致

父组件传值给 子组件

• 在配置子组件中声明props，用来接收父组件传递过来的值，props可以跟一个数组，里面的值是一个个的字符串，可以当属性使用
• 在使用子组件使用时v-bind指令给子组件的props里的属性传值
• 实验证明，子组件只能使用字符串拼接的方式，还没找到指定模板创建传值给父组件的方式
• 属性绑定只能父向子传递普通数据，传递方法的引用必须使用v-on的事件绑定机制

子组件传值给父组件

1. 在子组件内部使用$emit('eventName', params)自定义事件
2. 在模板内部调用事件，触发父组件定义的函数
3. 在父组件内定义函数，定义一个形参接收子组件传输的值

VUE生命周期函数

• 创建阶段
  • beforeCreate() 创建阶段的第一个生命周期函数，在创建实例之前，并没有什么卵用
  • created()创建阶段的第二个步骤，此时正在初始化data中的数据和methods的方法，这个函数执行完后data和methods都可以使用了，经常在这个函数中使用发送ajax请求
  • beforeMount()创建阶段的第三个步骤，此时内存中已经有编译好的模板字符串了，但是还没有渲染到浏览器，这是浏览器的内容并不是真实的页面
  • mounted()创建阶段的最后一个生命周期函数，表示页面首次被渲染出来。如果项目中需要初始化某些JS插件，需要在mounted中进行初始化，当这个函数运行完后创建阶段已经结束，进入运行阶段中
• 运行中阶段
  • 运行中的函数会根据data数据的变化有选择性的执行0次或多次，运行中这些操作本指向就是问了保证 model 中数据和 View视图层渲染的数据保持一致
  • beforeUpdate()数据更新之前，此时数据已经是更新过的，页面还是旧数据
  • updated()当执行到updated时，数据已经被渲染到页面
• 销毁阶段
  • beforeDestory() 此时实例还没有被销毁，实例上所有数据监听都正常可用
  • destroyed() 实例已经被销毁, vm已经不在工作