Vue组件化编程

1、定义:实现应用中局部功能代码和资源的集合
模块化:当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用
组件化:当应用中的功能都是多组件的方式来编写的,那该应用就是一个组件化应用
2、非单文件组件
(1)Vue中使用组件的三大步骤
I、定义组件(创建组件)
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别——el不要写,因为最终所有的组件都要经过一个vm(大哥)的管理,由vm中的el决定服务哪个容器;data必须写成函数,为了避免组件被复用时,数据存在引用关系。
注意:使用template可以配置组件结构
II、注册组件
局部注册:靠new Vue的时候传入components选项
全局注册:靠Vue.component('组件名',组件)
III、使用组件(写组件标签)
(2)几个注意点
关于组件名
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名):my-school(放在引号中)
第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
注意:
组件名尽可能回避HTML中已有的元素名称,如:h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签
第一种写法:<school></school>
第二种写法:<school/>
注意:不用使用脚手架时,<school/>会导致后续组件不能渲染
一个简写方式
const school = Vue.extend(options) 可简写为:const school = options
(3)组件的嵌套
app组件一人之下(vm之下),万人之上(其他所有组件)
(4)关于VueComponent
school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
关于this指向
组件配置中
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】
new Vue(options)配置中
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】——vm
vc与vm
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象);Vue的实例对象,以后简称vm
(5)一个重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype——让组件实例对象(vc)可以访问到 Vue原型上的属性、方法
3、单文件组件—xxx.vue
index,html——main.js——App.vue——xxx.vue

posted @   ljllh  阅读(46)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示