符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下vue组件化开发指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联建站专业提供成都网站设计、成都网站制作、外贸网站建设,网页设计,网站制作(企业站、自适应网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
在vue中,组件化开发指的是将复杂的业务拆分为多个组件,每个组件依赖的CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的,所以组件在系统内部可复用,且可以极大简化代码量,对后期的需求变更和维护也更加友好。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
什么叫做组件化
vue.js 有两大法宝,一个是数据驱动,另一个就是组件化,那么问题来了,什么叫做组件化,为什么要组件化?接下来我就针对这两个问题一一解答,所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,如果项目比较复杂,可以极大简化代码量,并且对后期的需求变更和维护也更加友好。
1、组件化开发指的是将复杂的业务拆分为一个又一个的组件
2、组件化开发的组件一般来说要灵活
3、组件化开发涉及到了Vue的js组件封装,需要掌握Vue基础、Vue实例方法与属性、Vue.extend、Vue插件等知识
如何进行组件化开发
先看下图:
这是 vue.js 中的一个报错,原因是使用了一个未经注册的组件 lx-xxx
,这个报错告诉我们一个道理:使用自定义组件之前必须注册。
那么如何注册一个组件呢? Vue.js 提供了 2 种组件的注册方式,全局注册和局部注册。
在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册,例如
Vue.component('my-component', { // 选项 })
Vue.js 也同样支持局部注册,我们可以在一个组件内部使用 components 选项做组件的局部注册,例如:
import HelloWorld from './components/HelloWorld' export default { components: { HelloWorld } }
区别:全局组件是挂载在 Vue.options.components
下,而局部组件是挂载在 vm.$options.components
下,这也是全局注册的组件能被任意使用的原因。
所谓工欲善其事,必先利其器,在正式开发一个组件之前,我们先要掌握一些必备的知识,这里我只会简单介绍一下,详情参考官网。
name
组件的名称,必填
name: 'lxNiu'
js 中使用驼峰式命令,HTML 使用kebab-case命名。
props
组件属性,用于父子组件通信,可通过this.msg访问
{{msg}}props: { msg: { type: String, default: '' } } show: Boolean // 默认false msg: [String, Boolean] // 多种类型
computed
处理data或者props中的属性,并返回一个新属性
{{newMsg}}computed: { newMsg() { return 'hello ' + this.msg } },
注:因为props,data和computed在编译阶段都会作为vm的属性合并,所以不可重名
render
用render函数描述template
hello world
render 中的 h 其实就是 createElement,它接受三个参数,返回一个 vnode
h 参数解释:
args1: {string | Function | Object} 用于提供DOM的html内容
args2: {Object} 设置DOM样式、属性、绑定事件之类
args3: {array} 用于设置分发的内容
注:vue编译顺序: template–> compile --> render --> vnode --> patch --> DOM
slot
headerfooter
class
定义子组件的类名
// 父组件// 子组件 控制//真实DOMhello
style
向子组件传递样式
// 父组件// 子组件 hello world
其他属性
$attrs
v-bind="$attrs" 将除class和style外的属性添加到父组件上,如定义input:
v-once
组件只渲染一次,后面即使数据发生变化也不会重新渲染,比如例子中val不会变成456
{{val}}
mixins
// mixin.js export default { data() { return{ msg: 'hello world' } }, methods: { clickBtn() { console.log(this.msg) } }, } // index.vue import actionMixin from "./mixin.js"; export default { methods: {}, mixins: [actionMixin] }
比如我们要注册一个 lx-button 这样一个组件,那么目录和伪代码如下:
index.vue
index.js
import lxButton from './src/index' lxButton.install = (Vue) => { Vue.component(lxButton.name, lxButton) } export default lxButton
其中 install
是 Vue.js 提供了一个公开方法,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。MyPlugin.install = function (Vue, options){}
参考: 开发插件
https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
watch-弹窗实现原理
定义组件
点击父组件中的显示
按钮,改变传入子组件中的值,点击子组件中的关闭
,改变父组件中值。
注:@click=“dialogVisible = true” 点击时将dialogVisible的值改为true
注::visible.sync: 双向数据绑定,配合update:visible使用,实现子组件修改父组件中的值
官网解释: sync
col组件实例
export default { name: 'ElCol', props: { span: { type: Number, default: 24 }, tag: { type: String, default: 'div' }, offset: Number, pull: Number, push: Number, xs: [Number, Object], sm: [Number, Object], md: [Number, Object], lg: [Number, Object], xl: [Number, Object] }, computed: { gutter() { let parent = this.$parent; while (parent && parent.$options.componentName !== 'ElRow') { parent = parent.$parent; } return parent ? parent.gutter : 0; } }, render(h) { let classList = []; let style = {}; if (this.gutter) { style.paddingLeft = this.gutter / 2 + 'px'; style.paddingRight = style.paddingLeft; } ['span', 'offset', 'pull', 'push'].forEach(prop => { if (this[prop] || this[prop] === 0) { classList.push( prop !== 'span' ? `el-col-${prop}-${this[prop]}` : `el-col-${this[prop]}` ); } }); ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => { if (typeof this[size] === 'number') { classList.push(`el-col-${size}-${this[size]}`); } else if (typeof this[size] === 'object') { let props = this[size]; Object.keys(props).forEach(prop => { classList.push( prop !== 'span' ? `el-col-${size}-${prop}-${props[prop]}` : `el-col-${size}-${props[prop]}` ); }); } }); return h(this.tag, { class: ['el-col', classList], style }, this.$slots.default); } };
col组件使用render函数,而不是template来实现组件,原因有两个:
该组件有大量的类判断,如果采用template代码比较冗余,使用js代码更加简洁
直接render描述性能更好
官网解释: render-function
button组件实例
局部组件实例
看完了这篇文章,相信你对“vue组件化开发指的是什么意思”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!