哪里做企业网站,wordpress媒体库有错误,seo顾问合同,广西红豆社区梧州论坛#x1f954;#xff1a;功不唐捐 更多Vue知识请点击——Vue.js VUE-Day5 组件与使用组件的三大步1、定义组件(创建组件)2、注册组件①局部注册②全局注册 3、使用组件小案例#xff1a; 使用组件的一些注意点1.关于组件名2.关于组件标签3.一个简写方式 组件的嵌套VueCompon… 功不唐捐 更多Vue知识请点击——Vue.js VUE-Day5 组件与使用组件的三大步1、定义组件(创建组件)2、注册组件①局部注册②全局注册 3、使用组件小案例 使用组件的一些注意点1.关于组件名2.关于组件标签3.一个简写方式 组件的嵌套VueComponent构造函数一个重要的内置关系单文件组件 组件与使用组件的三大步
组件实现应用中局部功能代码和资源的集合。
传统方式编写缺点
依赖关系混乱代码复用率不高
使用组件编写优点
依赖关系明晰复用率较高提高运行效率
非单文件组件与单文件组件 非单文件组件一个文件中包含n个组件 单文件组件一个文件中只包含1个组件
如何使用组件三大步
1、定义组件(创建组件) 2、注册组件 3、使用组件(写组件标签)
1、定义组件(创建组件)
使用Vue.extend(options)创建其中options和new Vue(options)时传入的那个options几乎一样但也有点区别
区别如下
1el不要写为什么 最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。备注使用template可以配置组件结构。
2data必须写成函数为什么 避免组件被复用时数据存在引用关系比如我父组件要多次复用一个子组件那如果其中一个子组件做了修改数据操作其他复用的地方数据也会被修改。如果某个组件中的data写成对象形式且组件内有对数据的操作那么该组件在多次复用时每次点击某一个按钮其他组件实例的数据都会改变这样是不行的。
2、注册组件
①局部注册
创建vmnew Vue的时候传入components选项 !-- 准备一个容器 --div idrootxuexiao/xuexiaohrxuesheng/xuesheng/divscript//第一步:创建school组件const school Vue.extend({name: dj, //可以使用name配置项指定组件在开发者工具中呈现的名字(只是开发者工具里用的名字)。// el: #hello el不能写template: divh2学校名字{{schoolName}}/h2h2学校地址{{address}}/h2/div,data() {return {schoolName: web,address: 广州,}}})//第一步:创建student组件const student Vue.extend({template: divh2学生名字{{studentName}}/h2h2学生年龄{{age}}/h2button clickadd点击年龄1/button/div,data() {return {studentName: potato,age: 18}},methods: {add() {this.age;}},})//创建一个vm带领小弟接管root容器const vm new Vue({el: #root,// 第二步:注册组件(局部注册)components: {//组件名:组件//这里最好写成school:school,简写为schoolxuexiao: school,//这里最好写成student:student,简写为studentxuesheng: student}})/script②全局注册
靠Vue.component(组件名,组件) !-- 准备一个容器 --div idrootsayhello/sayhello/div!-- 准备第二个容器 --div idroot2sayhello/sayhello/divscript//第一步:创建组件const hello Vue.extend({template: divh2{{msg}}/h2/div,data() {return {msg: hello world}}})//第二步:全局注册组件Vue.component(sayhello, hello);//创建第一个vm接管rootconst vm new Vue({el: #root})//创建第二个vm接管root2new Vue({el: #root2})/script3、使用组件
直接写组件名的标签就可以一般我们定义组件时组件名和定义的名字最好一样这样就可以简写。 !-- 准备一个容器 --div idrootxuexiao/xuexiaoxuesheng/xuesheng/div小案例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title组件初识/titlescript src../js/vue.js/script/headbodydiv idroot!-- 编写组件标签 --school/schoolhr /student/student/divscript// 创建school组件const school Vue.extend({template: divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2/div,data() {return {schoolName: 新东方,address: 山东,};},});// 创建student组件const student Vue.extend({template: divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data() {return {studentName: 张三,age: 18,};},});// 创建vmnew Vue({el: #root,// 注册组件components: {school,// xuexiao: school,student,// xuesheng: student,},});/script/body
/html使用组件的一些注意点
1.关于组件名
一个单词组成 第一种写法(首字母小写)school 第二种写法(首字母大写)School 多个单词组成 第一种写法(kebab-case命名)‘my-school’ 第二种写法(CamelCase命名)MySchool (需要Vue脚手架支持) 备注 (1).组件名尽可能回避HTML中已有的元素名称例如h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字不影响注册的名字。
2.关于组件标签
第一种写法school/school 第二种写法school/ 备注不用使用脚手架时school/会导致后续组件不能渲染。
3.一个简写方式
const school Vue.extend(options) 可简写为const school options
组件的嵌套
这里要注意vm里要写el其他都不写。vm里的template可以不用写根节点因为vm里的东西是放到容器里的而组件的template要用根节点包起来如div。注意创建组件时要先创建子组件才能创建父组件。
案例仔细看看代码观察如何实现嵌套
嵌套图示 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title组件的嵌套/titlescript src../js/vue.js/script/headbodydiv idroot!-- 编写组件标签 --!-- app/app 可以不在这写可以写在new Vue的template里--/divscript// 创建student组件const student Vue.extend({template: divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data() {return {studentName: 张三,age: 18,};},});// 创建school组件const school Vue.extend({template: divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2student/student/div,data() {return {schoolName: 新东方,address: 山东,};},components: {student,},});//创建hello组件const hello Vue.extend({template: h1{{msg}}/h1,data() {return {msg: 欢迎大家一起学习Vue,};},});//创建app组件const app Vue.extend({template: divhello/helloschool/school/div,components: {school,hello,},});// 创建vmnew Vue({template: app/app,el: #root,// 注册组件局部components: {app,},});/script/body
/htmlVueComponent构造函数
组件是一个Vue.extend生成的构造函数当组件写到页面上时Vue开始解析同时自动new了一下这才创建了组件的实例对象
1、什么是VueComponent school组件本质是一个名为VueComponent的构造函数且不是程序员定义的是Vue.extend生成的。 我们只需要写school/或school/schoolVue解析时会帮我们创建school组件的实例对象即Vue帮我们执行的new VueComponent(options)。 特别注意每次调用Vue.extend返回的都是一个全新的VueComponent构造函数而不是返回VueComponent的实例这个地方不要陷入误区只有当Vue解析组件时才会返回所对应组件如school的VueComponent的实例对象
2、VueComponent中的this指向
VueComponent的实例对象以后简称vc也可称之为组件实例对象。Vue的实例对象以后简称vm
组件配置中data函数、methods中的函数、watch中的函数、computed中的函数。它们的this均是【VueComponent实例对象】。new Vue(options)配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
一个重要的内置关系
这里用到了原型的知识可以倒回去复习一下点击此处
1、一个重要的内置关系VueComponent.prototype.__proto__ Vue.prototype 2、为什么要有这个关系让组件实例对象vc可以访问到 Vue原型上的属性、方法。 单文件组件
为了确保vue开发者工具里的名称和组件名称一致组件命名最好采取首字母大写形式如下面案例School.vueStudent.vueApp.vue School.vue // 组件的结构
templatediv classdemoh2学校名称{{ name }}/h2h2学校地址{{ address }}/h2button clickshowName点我提示学校名称/button/div
/template// 组件交互相关的代码数据、方法等
script
// 也可以写export default Vue.extend({})
export default {name: School,data() {return {name: 新东方,address: 山东,};},methods: {showName() {alert(this.schoolName);},},
};
/script// 组件的样式
style
.demo {background-color: pink;
}
/styleStudent.vue // 组件的结构
templatediv classdemoh2学生姓名{{ name }}/h2h2学生年龄{{ age }}/h2/div
/template// 组件交互相关的代码数据、方法等
script
// 也可以写export default Vue.extend({})
export default {name: School,data() {return {name: 张三,age: 18,};},
};
/scriptApp.vue templatedivSchool/SchoolStudent/Student/div
/templatescript
import School from ./School;
import Student from ./Student;export default {name: App,components: {School,Student,},
};
/scriptmain.js import App from ./App;new Vue({el: #root,template: App/App,components: { App },
});index.html !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title单文件组件的语法/title/headbodydiv idroot/divscript src../../js/vue.js/scriptscript src./main.js/script/body
/html
