1,Vue组件系统之全局组件
- 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> </div> <script> Vue.component("global-component",{ template: ` <div><h1>{{ xueren }}</h1> <h3>{{ xueren }}</h3> </div> `, // data是模板渲染的数据,从组件中获取,data中要写return返回值 data(){ return { xueren: "Hello xueren,i miss you really!", } } }); // 实例化一个Vue对象,还是有element代表找到模板那个标签 // template是模板的渲染需要指出组件的命名,但这是要写成标签 new Vue({ el: "#app", template: `<global-component></global-component>` })
- 1.2Vue全局组件的在实例化不用在template中指定组件名称
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <global-component></global-component> </div> <script> Vue.component("global-component", { template: ` <div> <h3>{{ xueren }}</h3> </div> `, data(){ return { xueren: "Hello 雪人, Long time no see", } } }); // 实例化一个Vue对象,第一个参数还是要找到要替换的标签 new Vue({ el: "#app", // template:`<global-component></global-component>` }) </script> </body> </html>
2,Vue全局组件之系统的复用
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <global-component></global-component> <global-component></global-component> <global-component></global-component> </div> <script> Vue.component("global-component", { template: ` <div> <h3>{{ xueren }}</h3> </div> `, data(){ return { xueren: "Hello 雪人, Long time no see", } } }); // 实例化一个Vue对象,第一个参数还是要找到要替换的标签 new Vue({ el: "#app", // 当复用的时候一定不要在实例化的Vue中指定组件的名称 //template:`<global-component></global-component>` }) </script> </body> </html>
3,Vue组件系统之局部组件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> .header { width: 200px; height: 50px; background-color: #00a9ff; } </style> </head> <body> <div id="app"> </div> <script> let Header = { template: ` <div class="header"> <h1>{{ xueren }}</h1> </div> `, data(){ return { xueren: "i miss you", } }, }; new Vue({ // 找到要替换的模板中的标签 el: "#app" , // 找到局部组件的标签.,并使用组件 template:`<app-header></app-header>`, // 定义完以后在实例化的Vue中注册 components: { "app-header": Header, } }) </script> </body> </html>
4,Vue组件入口问题
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> .header { width: 200px; height: 50px; background-color: #00a9ff; } </style> </head> <body> <div id="app"> </div> <script> let Header = { template: ` <div> <h1>{{ xueren }}</h1> </div> `, data(){ // 2,data数据的一个单体函数,要有返回值 return { xueren:"hello 雪人!", } }, }; // 2,在入口组件中注册你写的局部组件App就是一个组件的入口 let App = { // 在组件的入口也要有template模板,模板中要用组件入口的注册名 template:` <div> <page-header></page-header> <button @click="myClick">点击</button> </div> `, // 注册被调用的组件的组件名称 components: { "page-header" : Header }, // methods是绑定点击事件执行的函数 methods: { myClick:function(){ alert("雪雪"); } } }; // 1,实例化一个Vue对象3步,1:找到要渲染的标签,2:要渲染的模板,3:components注册组件的入口 new Vue({ el: "#app", template: `<App></App>`, components: { // 当注册的名一样时,可以只写一个就可以 App:App, } }) </script> </body> </html>
***在选用组件调用入口的时候.可以注册多个组件,按注册的顺序去渲染页面***
5,Vue组件系统之父子组件的通信
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> .header { width: 200px; height: 50px; background-color: #00a9ff; } </style> </head> <body> <div id="app"> </div> <script> let Header = { template: ` <div> <h1>{{ xueren }}</h1> <h3>{{ xiaoxue }}</h3> </div> `, // props是1,预留出来用父组件去绑定的,2,是把传递过来的数据返回给模板去渲染 props:["xiaoxue"], // props是道具的意思 // data指定几个就渲染几个,没有指定的就需要父组件去传递 data(){ return { xueren: "Hello 雪人!" } } }; // 在入口组件中注册局部组件 let App = { // 模板要写子组件中渲染的子组件的名称,还需要绑定props的变量把数据一层一层的传递 template:` <page-header v-bind:xiaoxue="fatherData"></page-header> `, // 注册子组件的名称 components: { "page-header": Header }, methods:{ myClick: function(){ alert("雪人好美~~~") } }, // 父组件的数据传递到模板,在由绑定事件传递给子组件 data(){ return { fatherData: "Are you ok?" } } }; new Vue({ el: "#app", template: "<App></App>", components: { App, } }) </script> </body> </html>
6,组件系统之子父组件的通信
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> </style> </head> <body> <div id="app"> </div> <script> let Header = { template:` <div> <button @click="sonClick">点击改变字体大小</button> </div> `, // 当点击这个按钮触发这个函数就会给"change-size"的值发生变化,emit就有这样的功效 // emit就会把这个值的变化传递给父组件的change-size methods: { sonClick: function(){ this.$emit("change-size", 0.2); } } }; let App = { template: ` <div> <span :style="{ fontSize: postFontSize + 'em' }">鞠婧祎喜欢我</span> <my-header v-on:change-size="fatherClick"></my-header> </div> `, // 注册子组件的名称 components:{ "my-header": Header }, // 先给postFontSie设置一个初始值为1 data(){ return { postFontSize: 1, } }, // 当change-size的值发生了变化,就会触发这个函数,使postFontSize的值发生变化 // 并传递给模板 methods: { fatherClick: function(value) { this.postFontSize += value; console.log(this.postFontSize) } } }; new Vue({ el: "#app", // 在模板上渲染的是父组件和子组件的模板 template: `<App></App>`, components: { App, } }) </script> </body> </html>
7,Vue组件系统之混入
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> </style> </head> <body> <div id="app"> <my-xuexue></my-xuexue> <my-xiaoxue></my-xiaoxue> </div> <script> // 定义一个混入的方法 let mixs = { methods: { show: function(name){ console.log(name + "来了"); }, hide: function(name){ console.log(name + "去了"); } } }; // 定义子组件2个按钮 let myXueXue = { template:` <div> <button @click= "show('雪雪')">点击显示雪雪来了</button> <button @click="hide('雪雪')">点击显示雪雪去了</button> </div> `, // 指定混入的调用方法 mixins:[mixs], }; let myXiaoXue = { template: ` <div> <button @mouseenter="show('小雪')">鼠标移入显示小雪来了</button> <button @mouseleave="hide('小雪')">鼠标移除显示小雪去了</button> </div> `, mixins:[mixs], }; new Vue({ el: "#app", // 注册2个子组件 components: { "my-xuexue": myXueXue, "my-xiaoxue": myXiaoXue, } }) </script> </body> </html>
8,Vue组件系统之插槽(类似于函数的位置参数)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> body { margin: 0; } .box { width: 80px; height: 50px; background-color: #00a9ff; float: left; margin-left: 10px; line-height: 50px; text-align: center; } </style> </head> <body> <div id="app"> <global-component>首页</global-component> <global-component>免费授课</global-component> <global-component>轻课</global-component> <global-component>智能题库</global-component> <global-component>学位课程</global-component> </div> <script> Vue.component("global-component", { // 把模板中的每一个标签拿到slot中去渲染,slot就有这个功效 template: ` <div class="box"><slot></slot></div> ` }); new Vue({ el: "#app", }) </script> </body> </html>
9,Vue组件系统之具名插槽
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> body { margin: 0; } .box { width: 80px; height: 50px; background-color: #00a9ff; float: left; margin-left: 10px; line-height: 50px; text-align: center; } </style> </head> <body> <div id="app"> <global-component> <div slot="home">首页</div> <div slot="lightcourses">轻课</div> <div slot="degreecourses">学位课程</div> </global-component> </div> <script> // 定义一个全局的组件 Vue.component("global-component", { // 模板会按照组件指定的顺序去渲染这个页面,slot和模板一一对应 // 有点类似于关键字参数 template: ` <div class="box"> <slot name="lightcourses"></slot> <slot name="degreecourses"></slot> <slot name="home"></slot> </div> ` }); new Vue({ el: "#app" }) </script> </body> </html>