当前位置: 首页 > Web前端 > HTML5

vue组件初学(一)---新手文档

时间:2023-04-05 21:41:56 HTML5

1、什么是组件?组件是vue.js最强大的特性之一。它可以扩展HTML元素并封装可重用代码。当然,在更高层次上,组件就是自定义元素,vue.js的编译器增加了特殊的功能。在某些情况下,组件也可以是原生HTML元素。简单来说,组件就是结构化的HTML、样式化的CSS、交互效果、行为,信号量可以存储数据。可以通过属性设置组件。2、组件的种类:①实现基本功能的基本组件(最小的元素,即基本组件,如输入)②可重用逻辑组件(业务组件)③页面组件3、组件使用注意事项:在组件中,可以onlybeonerootelement(label/parentelement)3.1全局注册,示例代码如下://新建一个vue实例对象

//引入vue.js文件,路径取决于你文件的位置这样我们就搭建了一个简单的父子组件3.2部分注册,代码如下:
//引入vue.js文件,路径根据你文件的位置而定4.组件的嵌套:
五、组件中,data必须是函数,否则会报错
上面的例子中,因为三者共用计数器,无论哪一个改变,三者都会改变,所以我们需要返回一个新的数据对象来避免这个问题六、props6.1props声明6.2props作为组件的内部初始状态:<脚本>varChild={template:'{{initCounter}}{{childCounter}}',props:['initCounter'],data(){return{childCounter:this.initCounter}}};varvm=newVue({el:'#app',data:{counter:0},components:{Child}})6.3接受props后用计算属性转换的方法:7.props的验证:当传入的数据没有满足要求,开发版的控制台会报错,这对刚开始开发组件的小伙伴很有用。校验类型:StringNumberBooleanFunctionObjectArraySymbol,注意prop验证会在创建组件实例之前执行,因此在默认或验证器函数中,还不能使用数据、计算或方法等实例属性来自从这些简单的例子中,我们可以看出,vue之所以如此受欢迎,并不是没有道理的。让原本复杂的前端页面变得简单很多,让开发过程中少走很多弯路。不过由于是初学者,暂时学到了这么多,以后会继续学习的