VUE组件
模块化 和 组件化 区别
- 模块化：从
代码角度分析问题，把可复用的代码抽离为单独的模块 - 好处：方便程序员之间模块调用，提高了代码的复用率
- 组件化：从
页面UI的角度分析问题 - 好处：方便UI的重用
组件创建的三种方式
-
Vue.extend()返回一个组件的构造器，包含一个对象类型参数，用来配置，Vue.component()利用Vue.extend()返回的构造器创建一个组件的实例。参数1：组件的名字，参数2：另一个组件的构造器 - 直接使用
Vue.component()创建，第一种方式的简写 - 通过指定模板创建
- 注意点：模板内只能有一个根节点，模板名如果用驼峰命名法，使用时应该使用连字符连接
组件中使用指令和事件
- 在组件中使用数据
- 写在
Vue.extend()构造器配置里面,它必须用一个函数，返回一个对象,主要原因是在多处使用模板时，改变数据时其他位置引用的话数据也会改变
- 写在
创建子组件
- 使用
components对象,写在与template同级的位置，内部与创建新组件方法一致
父组件传值给 子组件
- 在配置子组件中声明
props，用来接收父组件传递过来的值，props可以跟一个数组，里面的值是一个个的字符串，可以当属性使用 - 在使用子组件使用时
v-bind指令给子组件的props里的属性传值 - 实验证明，子组件只能使用字符串拼接的方式，还没找到指定模板创建传值给父组件的方式
- 属性绑定只能父向子传递普通数据，传递方法的引用必须使用
v-on的事件绑定机制
子组件传值给父组件
- 在子组件内部使用
$emit('eventName', params)自定义事件 - 在模板内部调用事件，触发父组件定义的函数
- 在父组件内定义函数，定义一个形参接收子组件传输的值
VUE生命周期函数
- 创建阶段
-
beforeCreate()创建阶段的第一个生命周期函数，在创建实例之前，并没有什么卵用 -
created()创建阶段的第二个步骤，此时正在初始化data中的数据和methods的方法，这个函数执行完后data和methods都可以使用了，经常在这个函数中使用发送ajax请求 -
beforeMount()创建阶段的第三个步骤，此时内存中已经有编译好的模板字符串了，但是还没有渲染到浏览器，这是浏览器的内容并不是真实的页面 -
mounted()创建阶段的最后一个生命周期函数，表示页面首次被渲染出来。如果项目中需要初始化某些JS插件，需要在mounted中进行初始化，当这个函数运行完后创建阶段已经结束，进入运行阶段中
-
- 运行中阶段
- 运行中的函数会根据
data数据的变化有选择性的执行0次或多次，运行中这些操作本指向就是问了保证 model 中数据和 View视图层渲染的数据保持一致 -
beforeUpdate()数据更新之前，此时数据已经是更新过的，页面还是旧数据 -
updated()当执行到updated时，数据已经被渲染到页面
- 运行中的函数会根据
- 销毁阶段
-
beforeDestory()此时实例还没有被销毁，实例上所有数据监听都正常可用 -
destroyed()实例已经被销毁,vm已经不在工作
-
