做网站一般用什么语言,贵州省住房和城乡建设厅官网站,成都网站设计创新互联,品牌网站建设蔻大蝌蚪提示#xff1a;学习vue2的第三天#xff0c;笔记记录#xff1a;生命周期#xff0c;组件(注册#xff0c;传值) 目录
一、生命周期
二、组件
1.注册组件
1)全局注册
2)局部注册
2.组件传值
1#xff09;父传子
2#xff09;子传父
3#xff09;兄弟传值 一… 提示学习vue2的第三天笔记记录生命周期组件(注册传值) 目录
一、生命周期
二、组件
1.注册组件
1)全局注册
2)局部注册
2.组件传值
1父传子
2子传父
3兄弟传值 一、生命周期
在 Vue.js 2 中每个组件实例都具有生命周期钩子函数允许你在组件的不同阶段执行特定的操作。 beforeCreate在实例初始化之后数据观测(data observer) 和事件配置之前被调用。在这个阶段实例的选项属性还未被初始化。 created在实例创建完成后被立即调用。在这个阶段实例已经完成了数据观测(data observer) 和属性的初始化但是挂载还未开始$el 属性还不存在。 beforeMount在挂载开始之前被调用相关的 render 函数首次被调用。 mounted在挂载完成后被调用el 被新创建的 vm.$el 替换并挂载到实例上去之后调用该钩子函数。如果根实例挂载到了一个文档内的元素上当 mounted 被调用时 vm.$el 也在文档内。 beforeUpdate数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。 updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。 beforeDestroy在实例销毁之前调用。在这个阶段实例仍然完全可用。 destroyed在实例销毁之后调用。调用后所有的事件监听器被移除所有的子实例也被销毁
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/title/head
bodydiv idapph2数字: span{{num}}/span/h2div refboxhello world/div/divscript src./libs/vue2.7.16/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;const vm new Vue({//挂载容器el: #app,// 设置数据data: {num: 0,timer: null},// 生命周期 程序从创建到销毁的过程。注意回调函数先后顺序....// 钩子函数: 指的是回调函数生命周期的钩子函数在vue2中有8个生命周期的钩子函数// 1 创建阶段// 创建之前执行的钩子函数beforeCreate(){console.log(1:,this.num);//undefine},// 创建后执行的钩子函数 (初始化数据)created(){console.log(2:,this.num);//0console.log(this.$refs.box);// undefined// 初始化//创建一个定时器观察update(数据更新)钩子函数的执行this.timer setInterval(() {if(this.num 5) {clearInterval(this.timer);return ;} this.num;},1000)},// 2挂载阶段// 挂载之前执行的钩子函数beforeMount(){console.log(3:,this.num);//0console.log(this.$refs.box);// undefined},// 挂载后执行的钩子函数 (DOM操作)mounted(){console.log(4:,this.num);//0console.log(this.$refs.box);// divhello world/div// 为了让dom操作更加稳定可以在此处执行$nextTick回调函数// 为了减少报错所以调用$nextTick回调函数仅在整个视图都被渲染之后才会运行的代码this.$nextTick((){// 判断程序中是否存在这个标签if(this.$refs.box){// 进行dom操作this.$refs.box.style.color red;this.$refs.box.style.fontSize 20px;} })},// 3更新阶段// 要数据发生改变才执行的回调函数beforeUpdate(){console.log(5,this.num);//1 ~ 5},updated(){console.log(6,this.num);//1 ~ 5},// 4销毁阶段// 程序不存在了或者以后卸载组件显示|隐藏 v-iffalsebeforeDestroy(){console.log(7,this.num);// 0},destroyed(){console.log(8,this.num);// 0}})// 为了看得见销毁阶段的钩子函数被执行可以调用销毁方法// vm.$destroy();/script
/body
/html
二、组件
组件是可复用的 Vue 实例它可以封装特定的功能和界面并可以在应用程序中多次使用。组件使得代码更加模块化、可维护并且提高了代码的复用性。
1.注册组件
组件只有被注册才能使用在哪注册就只能在哪里使用
1)全局注册
通过Vue中的component方法注册组件此方法注册的组件在任何地方都能使用
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle/style
/headbodydiv idappel-button/el-button/divhrdiv idapp2el-button/el-button/divscript src./libs/vue2.7.16/vue.js/scriptscript// 一 全局组件// 1. 定义按钮组件 (template选项在vue2版本中必须有根节点)const ElButton {// 设置数据data() {return {message: 这是一个按钮123}},// 渲染模板template: divdiv{{message}}/divbutton clickfoo stylepadding: 10px 20px; border: 0; background-color: skyblue; color: white;点击按钮/button /div,// 设置方法methods: {// 提示foo() {alert(您好触发事件。。。)}}}// 2. 注册组件(此处表示全局注册)Vue.component(el-button, ElButton);//禁止控制台输出日志信息Vue.config.productionTip false;// 创建vue实例new Vue({//挂载容器el: #app,})new Vue({//挂载容器el: #app2,})/script
/body/html
2)局部注册
通过Vue实例或某组件中的components对象注册组件此方法注册的组件只能在注册的地方使用
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle/style
/headbodydiv idapp!-- ElSearch/ElSearch 错误的驼峰注册-使用 --el-search/el-search/divhrdiv idapp2!-- el-search/el-search 错误的该组件没有在app2中注册 --/divscript src./libs/vue2.7.16/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;// 创建vue实例new Vue({//挂载容器el: #app,// 注册组件此处表示局部注册components: {// 此处注册组件名称采用驼峰命名“ElSearch”在使用的时候需要改成 “el-search”// el-search: {},ElSearch: {data() {return {}},template: divinput typetext placeholder请输入关键字 stylewidth: 90%;height: 40px; /div},}})new Vue({//挂载容器el: #app2,})/script
/body/html
注册组件注意事项 1 采用驼峰命名法注册组件名称时“ElSearch”使用组件时需要改用短横线“el-search” 2 不能使用html文档内置的标签名称作为组件名称例如 div header footer nav 3 组件中的data一个函数并且返回一个对象 4 template选项需要有根节点在vue2版本 5 像属性计算、侦听过滤生命周期的钩子和vue实例的写法一样
2.组件传值
在vue中允许组件嵌套组件但不宜嵌套过多其中就涉及到不同组件间的数据交互的问题。
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle/style
/headbodydiv idappelement-parent/element-parent!-- element-child/element-child 错误的 --/divscript src./libs/vue2.7.16/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;//定义孙组件const ElementGrandson {template: divh4孙组件/h4/div,}// 定义子组件const ElementChild {template: divh3子组件/h3element-grandson/element-grandson /div,components: {ElementGrandson}}// 定义父组件const ElementParent {template: divh2父组件/h2element-child/element-child/div,// 在父组件中注册子组件components: {ElementChild}}// vue实例对象new Vue({//挂载容器el: #app,// 在vue实例中注册父组件components: {ElementParent}})/script
/body/html
1父传子
因为组件之间不可以直接通信所以父组件传值给子组件 需要在子组件中自定义属性在props这个选项中自定义
在父组件的template模板中使用子组件时动态绑定属性
例如 element-child v-bind:xxxmessage/element-child
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle/style
/headbodydiv idappelement-parent/element-parent!-- element-child/element-child 错误的 --/divscript src./libs/vue2.7.16/vue.js/scriptscript//禁止控制台输出日志信息Vue.config.productionTip false;// 定义子组件const ElementChild {// 父组件传值给子组件需要在子组件中自定义属性// 通过在props选项中自定义属性接收父组件传递的数据// props: [xxx],props: {xxx: {default: 默认值,type: [String,Number]},xxx2:{default:,type: [String,Number]}},template: divh3子组件/h3p{{xxx}}/pp{{xxx2}}/p/div}// 定义父组件const ElementParent {// 设置数据data(){return {message: 这是父组件的数据,message2: 这是父组件的第二条数据}},template: divh2父组件/h2element-child v-bind:xxxmessage/element-childelement-child :xxx100/element-childelement-child :xxxmessage :xxx2message2/element-childelement-child/element-child/div,// 在父组件中注册子组件components: {ElementChild}}// vue实例对象new Vue({//挂载容器el: #app,// 在vue实例中注册父组件components: {ElementParent}})/script
/body/html
2子传父
传值过程中需要在子组件中自定义事件行为在methods中写方法 this.$emit(child-num, {cnum: this.num})
调用this.$emit(第一个参数是在父组件中on监听的事件名,第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据) 在父组件的模板中定义一个方法用于接受子组件的数据并在子组件中绑定监听事件例如 element-child child-numjieshou/element-child就是也需要在父组件中写方法接收子组件的数据。
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle/style
/headbodydiv idappelement-parent/element-parent/divscript src./libs/vue2.7.16/vue.js/scriptscript// 子组件传值给父组件属于负向传值需要使用事件行为方可传递数据给父组件//禁止控制台输出日志信息Vue.config.productionTip false;// 定义子组件const ElementChild {data(){return {num: 100}},template: divh3子组件/h3button clickadd发送数据/button/div,methods: {add(){// 自定义行为// 参数1在父组件中on监听的事件名 第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据)this.num --;this.$emit(child-num, {cnum: this.num})}}}// 定义父组件const ElementParent {data(){return {num: 0}},template: divh2父组件/h2p v-ifnum!0{{num}}/pelement-child child-numjieshou/element-child/div,// 在父组件中注册子组件components: {ElementChild},// 编写方法methods: {// 自定义方法接受子组件的数据jieshou(data){// console.log(data)// 获取子组件传递的数据this.num data.cnum;}}}// vue实例对象new Vue({//挂载容器el: #app,// 在vue实例中注册父组件components: {ElementParent}})/script
/body/html
3兄弟传值
兄弟传值需要定义一个新的vue实例或通过同一个父组件来共享事件。通过$emit和$on来传数据。
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/titlestyle#app div {padding: 20px;border: 1px solid #000;margin-top: 10px;}/style
/head
bodydiv idappcomp-a/comp-acomp-b/comp-b/divscript src../libs/vue2.7.16/vue.js/scriptscript// 创建vue实例作为通信的桥梁这种有响应式const bridge new Vue();// 并列关系组件const CompA {template: divh3组件A/h3button clicksenda数字自增/button/div,data(){return {num: 100}},methods: {senda(){this.num ;let value this.num;bridge.$emit(xxx, value)},},created(){// 发送数据setTimeout((){this.senda();},0)}}const CompB {template: divh3组件B/h3p{{num}}/p/div,data(){return {num: 0}},created(){// 监听组件A的事件且接收组件A的数据bridge.$on(xxx,(value){this.num value;})}}//禁止控制台输出日志信息Vue.config.productionTip false;new Vue({//挂载容器el: #app,components: { CompA , CompB },})/script
/body
/html
