网站建设推广渠道,全栈网站开发工程师,网站建设项目规划书案例分析,wordpress表单发邮件一、组件化编程
1. 对比传统编写与组件化编程#xff08;下面两个解释图对比可以直观了解#xff09; 传统组件编写#xff1a;不同的HTML引入不同的样式和行为文件 组件方式编写#xff1a;组件单独#xff0c;复用率高#xff08;前提组件拆分十分细致#xff09; 理…一、组件化编程
1. 对比传统编写与组件化编程下面两个解释图对比可以直观了解 传统组件编写不同的HTML引入不同的样式和行为文件 组件方式编写组件单独复用率高前提组件拆分十分细致 理解为封装行为htmlcssjs封装在一个文件中 解释模块化和组件化的区别 组件化cssjshtml三件套使用在同一部分的代码封装在一个组件中 模块化只是将js文件进行拆分为多个文件 2. 组件化编程区分 非单文件组件一个文件中包含n个组件 单文件组件一个文件中只包含一个组件后缀名是.vue项目中多使用此方法 3. 非单文件组件的引出 使用两类数据进行划分组件包装部分引出单文件组件的使用 可以给每一部分进行划分并命名 div idrooth2学校名称{{schoolName}}/h2h2学校地址{{addrss}}/h2hr /h2学生名称{{studentName}}/h2h2学生年龄{{age}}/h2/div
//vue数据const vm new Vue({el: #root,data: {schoolName: 清华,addrss: 北京,studentName: 李华,age: 18,},}); 4. 单文件组件的使用 1局部注册在vue配置项components中注册 Vue.extend({}):创建组件可以给此组件进行命名 出现很多配置项但是几乎和Vue实例的配置项相同 const school Vue.extend({}) 注意此处不可以使用el绑定模板template配置进行展示容器内容 // el: #root,//组件定义一定不写el配置项因为最终都要被vm管理
//由vm决定服务于哪个容器
// 利用函数式写data如果使用对象式当其他模板调用时候修改也会修改原来的数据template: divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button/div, 注意此处的data使用的是函数式返回不是对象式因为多次一使用同一个组件当后使用组件部分改变data中数据前面组件使用组件的数据也会改变 data() {return {schoolName: 清华,address: 北京,};}, components{组件名,...} :注册组件在Vue实例中使用此配置项局部注册 components: {// 完整写法重新组件命名,创建组件的名字不是组件名注册组建的名字才是组件名// xuexiao: school,// xueshneg: student,// 简写相同的名字school,student,}, 组件标签使用组件将组件标签写在容器中可以写多个组件标签复用 !-- 第三步编写组件标签 --school/schoolschool/school 给单文件组件添加事件直接在组件的配置模板中绑定事件并在组件中添加配置回调方法 2全局注册 Vue.component(组件名,创建名) 创建组件并进行全局注册此时的组件标签就可以在任何Vue绑定的模板中使用 //1. hello全局组件创建const hello Vue.extend({template: divh2你好{{name}}/h2/div,data() {return {name: TOM,};},});// 2. 全局注册组件(组件名字组件在哪)可以使用在任何vue绑定的模板中
Vue.component(hello, hello); 5. 单文件组建的注意点 组件名 一个单词组件名就是纯小写或者首字母大写例如school、School 多个单词组件名 kebab-case命名my-school CamelCase命名MySchool需要脚手架支持 备注 组件名回避html标签 使用name配置项指定组件在开发者工具中呈现的名字创建组件时候直接使用配置项name进行命名开发者工具中名字展示 组件标签 第一种写法school组件标签写法 school/school 第二种写法school/ 需要脚手架环境支持以为不在脚手架环境复用多个组件标签只会渲染一个组件 组件创建时候的简写方式没有了extend() // 简写创建组件const school {name: xlf,template: divh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div,data() {return {name: xlf,address: 北京,};},}; 6. 组件的嵌套 以下展示说明大组件种包含着小组件也就是所谓的嵌套 创建student子组件必须在子组件创建好之后然后在父组件中注册 创建school父组件直接在此组件使用components注册student注册在哪里需要在那个模板中使用标签 //子组件创建const student Vue.extend({name: student,template: divh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div,data() {return {name: 德华,age: 18,};},});
//父组件创建并注册子组件在负组件中使用子组件标签const school Vue.extend({name: school,template: divh2学校名称{{name}}/h2h2学校地址;{{address}}/h2student/student/div,data() {return {name: 清华,address: 北京,};},// 在组件内直接注册components: {student,},});
//最后总结在vue中new Vue({template: school/school,el: #root,data: {},// 2.注册组件components: {school,},}); 开发中一创建app组件管理所有组件用法都是套娃) // 1.定义组件:注册给谁就在谁的模板上写组件标签const school Vue.extend({name: school,template: divh2学校名称{{name}}/h2h2学校地址;{{address}}/h2student/student/div,data() {return {name: 清华,address: 北京,};},// 在组件内直接注册components: {student,},});// 定义app组件:注册亲子级组件并及那个子级组件模板写入const app Vue.extend({template: divhello/helloschool/school/div,components: {hello,school,},});new Vue({template: app/app,el: #root,data: {},// 2.注册组件components: {app,},}); 7. Vue.Component(组件实例化) 使用一个组件进行了解Vue.Component div idroot!-- 3.使用标签 --school/school
/div//vue// 1.定义组件schoolconst school Vue.extend({template: divh1学校名称{{name}}/h1h1学校地址{{address}}/h1/div,data() {return {name: 清华,address: 北京,};},
});
new Vue({el: #root,// 2.注册组件components: {school,},
}); 查看一下创建的组件构造函数表示使用需要new一下封装在源码 构造函数时Vue.extend生成的 只需要使用组件标签就会创建组件实例vc实例使用两次组件标签就会实例化两次vc console.log(school); 特别注意每次调用Vue.extend就会创建一个全新的vc 测试在上面school组件基础上创建第二个个组件并对一个组件进行修改然后查看两个组件实例之间的区别 // 定义组件helloconst hello Vue.extend({template: divh2学校名称{{msg}}/h2button clickshowName点我显示学校名字/button/div,data() {return {msg: hello,};},methods: {showName() {console.log(showName, this);},},});// 检验VuComponent的不同school.a 99;console.log(school hello); //falseconsole.log(school.a); //99console.log(hello.a); //没有 this指向 vmvue的配置项中this指向的都是vmVue实例对象vc组件中的配置项中this指向的都是vmVueComponent实例对象 8. 重要的内置关系 组件是可复用的Vue实例 vc存在的属性配置vm都有 但是vm存在的其中el组件实例vc就没有 并且组件中的data必须使用函数方式return返回数据 区分显示原型对象和隐式原型对象 // 定义构造函数function demo() {this.a 1;this.b 2;}const d new demo();// 以下构造函数原型对象和实例对象原型对象最后都指向一个原型对象console.log(demo.prototype); //显示原型属性一般放东西console.log(d.__proto__); //隐式原型对象一般开始找console.log(demo.prototype d.__proto__);//true//程序员通过显示原型属性操作原型对象追加一个x属性值为99demo.prototype.x 99; Vue.Component.prototype.__proto__Vue.prototype Vue.Component原型对象的原型对象执行Vue原型对象 让组件实例对象那个vc可以访问到Vue原型上的属性、方法 9. 单文件组件方式.vue后缀 vue文件需要处理加工变成js文件两种处理方式 webpack插件搭建工作流 vue脚手架 vue文件命名 安装插件可以生成vue模板:v 自动生成模板 template/templatescript
export default {
//注意组件模块化引入所以需要把js暴露}
/scriptstyle/style 此处需要使用暴露方式把文件暴露出去也就是允许其他文件引入 export 直接分别暴露直接使用并取消组件的创建方法直接暴露options esprot {name} 统一暴露 默认暴露 1 创建两个组件School组件、Student组件这个类似 templatediv classdemoh2学校名称{{ schoolName }}/h2h2学校地址{{ address }}/h2button clickshowName点我提示学校名/button/div
/templatescript
export default {name: School,data() {return {schoolName: 清华,address: 北京,};},methods: {showName() {alert(this.schoolName);console.log(this); //指向当前组件},},
};
/scriptstyle
.demo {background-color: pink;
}
/style 2引入组件文件并在app组件中嵌套注册注意模板需要div包裹 templatedivSchool/SchoolStudent/Student/div
/templatescript
// 先引入组件
import School from ./School.vue
import Student from ./Student.vue
// 再进行对外暴露并注册组件
export default {name: App,components: {School,Student}
}
/scriptstyle
/style3 组件分配完毕之后需要由vm统一管理 创建main.js 直接引入app组件 绑定模板并注册app组件:注意在main模块中配置template配置项可以取消在html也买那种使用app标签进行组件实例 import App from ./App.vue
// 浏览器不支持模块化语法new Vue({el: #root,template:App/App,components: {App}
}) 4需要容器index.html与vue实例进行关联 先创建模板 引入vue文件 引入main文件 div idroot/divscript src../vue/vue.js/script!-- 入口文件 --script src./main.js/script 浏览器不能能直接支持ed6模块化语法也就是引入模块化需要配置脚手架环境进行运行
