电子商务网站建设产品,做数学的网站,旅游app界面设计,手机当服务器建网站#x1f600;前言 本片文章是vue系列第5篇整理了vue的组件化编程的详细讲解加代码演示 #x1f3e0;个人主页#xff1a;尘觉主页
#x1f9d1;个人简介#xff1a;大家好#xff0c;我是尘觉#xff0c;希望我的文章可以帮助到大家#xff0c;您的满意是我的动力前言 本片文章是vue系列第5篇整理了vue的组件化编程的详细讲解加代码演示 个人主页尘觉主页
个人简介大家好我是尘觉希望我的文章可以帮助到大家您的满意是我的动力 在csdn获奖荣誉: csdn城市之星1名 Java全栈群星计划top前5 端午大礼包获得者 欢迎大家这里是CSDN我总结知识的地方欢迎来到我的博客感谢大家的观看 如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦 文章目录 vue的组件化编程的详细讲解加代码演示组件化编程基本说明应用实例应用实例—非组件化应用实例—全局组件化应用实例—局部组件化注意事项和细节说明 组件化小结总结 vue的组件化编程的详细讲解加代码演示
组件化编程
基本说明 在大型应用开发的时候页面可以划分成很多部分往往不同的页面也会有相同的部分。例如可能会有相同的头部导航。 但是如果每个页面都独自开发这无疑增加了我们开发的成本。所以我们会把页面的不
同部分拆分成独立的组件然后在不同页面就可以共享这些组件避免重复开发(如图) 解读上图 组件(Component) 是 Vue.js 最强大的功能之一(可以提高复用性[1.界面2.业务处理])组件也是一个Vue实例也包括∶ data、methods、生命周期函数等组件渲染需要 html模板所以增加了template 属性值就是 HTML 模板对于全局组件任何vue 实例都可以直接在 HTML 中通过组件名称来使用组件data 是一个函数不再是一个对象 这样每次引用组件都是独立的对象 应用实例
应用实例—非组件化 非组件化方式-普通方式– 点击次数 {{count}} 次【非组件化方式】 需求是,有多个按钮都要进行点击统计 解读 其实三个按钮界面其实一样, 但是目前我们都重新写了一次, 复用性低点击各个按钮的业务都是对次数1, 因此业务处理类似但是也都重新写了一个方法, 复用性低解决 组件化编程 !DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8title组件化编程/title
/head
bodydiv idapp!--非组件化方式-普通方式--button v-on:clickclick1()点击次数 {{count}} 次【非组件化方式】/buttonbr/br/!--需求是,有多个按钮都要进行点击统计解读1. 其实三个按钮界面其实一样, 但是目前我们都重新写了一次, 复用性低2. 点击各个按钮的业务都是对次数1, 因此业务处理类似但是也都重新写了一个方法, 复用性低3. 解决 组件化编程--button v-on:clickclick2()点击次数 {{count2}} 次【非组件化方式】/buttonbr/br/button v-on:clickclick3()点击次数 {{count3}} 次【非组件化方式】/buttonbr/
/div
script srcvue.js/script
scriptnew Vue({el: #app,data: {//data数据池count: 10,count2: 10,count3: 10},methods: {//methods属性, 可以定义相应的方法click1() {this.count;},click2() {this.count2;},click3() {this.count3;}}})
/script
/body
/html应用实例—全局组件化 1、定义一个全局组件, 名称为 counter 2. {} 表示就是我们的组件相关的内容 3. template 指定该组件的界面, 因为会引用到数据池的数据所以需要是模板字符串 4. 这里说明: 要把组件视为一个Vue实例也有自己的数据池和methods 5. 这里说明: 对于组件我们的数据池的数据是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式 6. 这时我们达到目前界面通过template实现共享,业务处理也复用 7. 全局组件是属于所有vue实例因此可以在所有的vue实例使用 !DOCTYPE html
html langen
headmeta charsetUTF-8title组件化编程-全局组件/title
/head
body
div idapph1组件化编程-全局组件/h1!--使用全局组件--counter/counterbr/counter/countercounter/countercounter/countercounter/counter
/divdiv idapp2h1组件化编程-全局组件-app2/h1!--使用全局组件--counter/countercounter/counter
/div
script srcvue.js/script
script//1、定义一个全局组件, 名称为 counter//2. {} 表示就是我们的组件相关的内容//3. template 指定该组件的界面, 因为会引用到数据池的数据所以需要是模板字符串//4. 这里说明: 要把组件视为一个Vue实例也有自己的数据池和methods//5. 这里说明: 对于组件我们的数据池的数据是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式//6. 这时我们达到目前界面通过template实现共享,业务处理也复用//7. 全局组件是属于所有vue实例因此可以在所有的vue实例使用Vue.component(counter, {template: button v-on:clickclick()点击次数 {{count}} 次【全局组件化】/button,data() {//这里需要注意和原来的方式不一样!!!!return {count: 10}},methods: {click() {this.count;}}})//创建Vue实例必须有let vm new Vue({el: #app//Vue实例的挂载点})let vm2 new Vue({el: #app2//Vue实例的挂载点})
/script
/body
/html应用实例—局部组件化 定义一个组件, 组件的名称为 buttonCounter 扩展 可以把常用的组件定义在某个commons.js中 export如果某个页面需要使用 直接import !DOCTYPE html
html langen
headmeta charsetUTF-8title组件化编程-局部组件/title
/head
body
div idapph1组件化编程-局部组件/h1!--使用局部组件 ,该组件是从挂载到app的vue中的--my_counter/my_counterbr/my_counter/my_counterbr/my_counter/my_counterbr/
/divdiv idapp2h1组件化编程-局部组件-app2/h1!--使用局部组件 --wyx_counter/wyx_counterbr/wyx_counter/wyx_counterbr/
/div
script srcvue.js/script
script//定义一个组件, 组件的名称为 buttonCounter//扩展//1. 可以把常用的组件定义在某个commons.js中 export//2. 如果某个页面需要使用 直接importconst buttonCounter {template: button v-on:clickclick()点击次数 {{count}} 次【局部组件化】/button,data() {//这里需要注意和原来的方式不一样!!!!return {count: 10}},methods: {click() {this.count;}}}//创建Vue实例必须有let vm new Vue({el: #app,//Vue实例的挂载点components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vuemy_counter: buttonCounter}})let vm2 new Vue({el: #app2,//Vue实例的挂载点components :{//引入/注册组件buttonCounterwyx_counter: buttonCounter}})
/script
/body
/html可以看到组件编程, 方便功能代码的复用. 注意事项和细节说明
如果方法体, 只有简单的语句,比如 count, 那么可以进行简写, 在组件化编程.html演示, 比如
div idapp!--非组件化方式-普通方式--button v-on:clickcount 点 击 次 数 {{count}} 次 【 非 组 件 化 方 式 】/buttonbr/button v-on:clickcount 点 击 次 数 {{count}} 次 【 非 组 件 化 方 式 】/buttonbr/
/div/*
之前的写法
methods: {
click1() {
this.count;
}
*/组件化小结
1 组件也是一个 Vue 实例因此它的定义是也存在∶ data、methods、生命周期函数等
2 data 是一个函数不再是一个对象 这样每次引用组件都是独立的对象/数据
3 组件渲染需要 html 模板所以增加了 template 属性值就是 HTML 模版
总结
本章讲解了vue的组件化编程的具体分析以及组件化编程的各个模式加代码分析和小结
vue系列 扩展篇 - Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开 扩展篇 - Vue 项目结构和文件分析 第1篇 - Vue的下载以及MVVM分析 第2篇 - vue数据单双渲染以及代码讲解 第3篇 - vue的事件绑定和修饰符 第4篇 - vue的条件渲染以及列表渲染的总结归纳加代码演示 第5篇 - 是本篇 第6篇 - vue的组件化编程和钩子函数的步步分析 欢迎大家加入我的社区 尘觉社区 文章到这里就结束了如果有什么疑问的地方请指出诸佬们一起来评论区一起讨论 希望能和诸佬们一起努力今后我们一起观看感谢您的阅读 如果帮助到您不妨3连支持一下创造不易您们的支持是我的动力
