当前位置: 首页 > Web前端 > vue.js

我是如何学习vue的14:组件的基本使用

时间:2023-03-31 19:05:21 vue.js

组件化,即将整个页面拆分成组件,一个一个开发独立可复用的小组件,然后构建一个应用。这样可以使代码更便于组织和管理,可扩展性更强。开发的应用程序会形成一个组件树(树结构是一种数据结构)。组件化不同于模块化。后面我们会讲到模块化,比较一下组件和模块的区别。封装组件的步骤创建组件构造函数Vue.extend()需要传入一个对象Vue.extend创建组件构造函数,通常在创建构造函数的时候传入template作为我们自定义组件的模板。Vue.component的写法在2.X文档中几乎看不到,一般都是用语法糖的形式写的。见下文。注册组件(全局注册,本地注册)Vue.component(注册组件标签名,组件构造器)Vue.component()是将刚才的组件构造器注册为一个组件,并给它一个组件标签名,所以需要传递2个参数。组件使用演示(在Vue实例范围内使用组件):

scriptsrc="../js/vue.js">全局组件用本地组件封装组件的第二步是注册组件。全局组件注册在全局系统下,本地组件注册在实例中。在实际开发中,更多的是使用本地组件。全局组件全局组件可以在多个vue实例中使用。但是在实际开发中,一般只有一个Vue实例,所以全局组件用的比较少。
本地组件注册在Vue实例下,也就是本地组件。本地组件只能在注册的实例中使用。部分组件注册方法:constapp=newVue({el:'#app',components:{//使用组件时的标签名称,组件构造器cpn:cpnC}})代码演示:
使用语法糖注册组件前面说到Vue.extend是非常少见的,现在我们都使用语法糖。使用语法糖注册全局组件使用语法糖注册部分组件使用模板分离来注册组件,有两种分离的写法。写法一:使用script标签(不常用)将html标签放入script标签中注意:script的类型必须是text/x-template,并加上id属性挂载到对应的组件模板上:'#cpn'写法二:使用template标签(常用)放标签到template标签,添加id属性,挂载到对应的组件模板:'#cpn'

我是标题

我是内容