Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc

2023-11-04 07:30
文章标签 javascript 使用 组件 详解 开发 vue 创建 注册 vm frontend vc vuecomponent

本文主要是介绍Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

组件化开发

模块是指将一个大的js文件按照模块化拆分规则进行拆分成的每个js文件, 凡是采用模块方式开发的应用都可以称为模块化应用(组件包括模块)

传统方式开发的一个网页通常包括三部分: 结构(HTML)、样式(CSS)、交互(JavaScript)

  • 关系纵横交织复杂，牵一发动全身不利于维护
  • 代码复用率不高., 页面中复用的代码需要通过复制的方式在其他页面中使用

在这里插入图片描述

组件是实现应用中局部功能的代码(HTML,CSS,JS)和资源(图片,声音,视频)的集合,凡是采用组件方式开发的应用都可以称为组件化应用

  • 每一个组件都有独立的js,css以及HTML片段，这些独立的代码只供当前组件使用，不存在纵横交错问题便于维护
  • 代码复用性增强, 页面中复用的代码通过引入组件的方式在其他页面中使用

在这里插入图片描述

组件的创建

创建组件调用Vue.extend({该配置项和new Vue的配置项几乎相同只是略有差别})简写形式可省略Vue.extend()即{配置项}但底层在注册组件的时候还是会调用Vue.extend()静态方法,该方法的返回值是全新的VueComponent构造函数(函数类型的对象)不是构造函数的实例

  • template配置项: 使用template配置项配置模板语句,不能使用el配置项,因为组件具有通用性不特定为某个容器服务而是为所有容器服务
  • data配置项: data必须使用函数形式返回一个对象,不能使用对象的形式,因为对象数据是共享的只有一份,组件的数据是独立的不能共享
  • name配置项: 设置Vue开发者工具中显示的组件的名字但不是设置组件的名字(默认都是驼峰式显示)
<script>// 创建组件实例对象(结构HTML 交互JS 样式CSS)const myComponent = Vue.extend({template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,// 每次调用data方法都会返回一个对象,这个对象中的数据是独立的data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}})// 创建组件时省略Vue.extend()
const myComponent = {template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}
}
</script>

注册组件进行管理

局部注册: 在创建Vue实例时使用配置项components:{组件的名字:组件对象},只能在父组件绑定的容器中或模板语句中使用,一般是在哪注册在哪使用

<body><!--容器1--><div id="app"><userlogin></userlogin></div><script>// 创建组件实例对象const myComponent = Vue.extend({template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,// 每次调用data方法都会返回一个对象,这个对象中的数据是独立的data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}})// 在Vue实例中注册组件进行管理,实例vm根组件也是myComponent组件的父组件const vm = new Vue({el : '#app',data : {msg : '第一个组件'},// 局部注册的组件只能在父组件绑定的容器中使用,这里父组件就是vmcomponents : {// userlist是组件的名字,myComponent组件实例对象userlist : myComponent,}})</script>
</body>

全局注册: 调用Vue的静态方法Vue.component(组件的名字(标签名), 组件对象),可以在所有组件绑定的容器中或模板语句中使用

<body><!--容器1--><div id="app"><h1>{{msg}}</h1><userlogin></userlogin></div><!--容器2--><div id="app2"><userlogin></userlogin></div><script>// 创建组件const userLoginComponent = {// template只能有一个根元素template : `<div><h3>用户登录</h3><form @submit.prevent="login">账号：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button>登录</button></form></div>`,data(){return {username : '',password : ''}},methods: {login(){// this是vcalert(this.username + "," + this.password)}},}// 全局注册组件,自动调用Vue.extend()方法Vue.component('userlogin', userLoginComponent)// Vue实例const vm2 = new Vue({el : '#app2'})// Vue实例const vm = new Vue({el : '#app',data : {msg : '第一个组件'},})</script>
</body>

组件使用

使用组件在容器中中以HTML自闭合标签(组件起名有规范,不可以是HTML内置标签名)的方式使用,如果不在脚手架环境中使用这种方式除了第一个元素渲染后续元素都不会渲染

  • 第一种：全部小写
  • 第二种：首字母大写，后面都是小写
  • 第三种：kebab-case串式命名法(如user-login）
  • 第四种(常用)：CamelCase驼峰式命名法(UserLogin), 这种方式只允许在脚手架环境中使用
<!--在页面中以html标签的方式使用组件-->
<div id="app"><h1>{{msg}}</h1><userlist></userlist><userlist></userlist><userlist/>
</div>

组件嵌套(父子组件)

组件的划分粒度很重要，粒度太粗会降低组件的复用性, 为了让复用性更强,中Vue中创建的组件也支持父子组件嵌套使用

  • 子组件由父组件来管理，父组件由父组件的父组件管理, 在Vue中根组件就是Vue实例vm
  • 局部注册的子组件只能在父组件绑定的容器或者template配置项配置的模板语句中使用,一般是在哪注册在哪使用
    在这里插入图片描述
<body><div id="root"></div><script>// 创建Y1组件const y1 = {template : `<div><h3>Y1组件</h3></div>`}// 创建X1组件const x1 = {template : `<div><h3>X1组件</h3></div>`}// 创建Y组件const y = {template : `<div><h2>Y组件</h2><y1></y1></div>`,// 注册y1组件components : {y1}}// 创建X组件const x = {template : `<div><h2>X组件</h2><x1></x1></div>`,// 注册x1组件components : {x1}}// 创建app组件const app = {template : `<div><h1>App组件</h1><x></x><y></y></div>`,// 注册X组件,对象的属性名和属性值相同时可以省略属性值components : {x,y}}// vm根组件const vm = new Vue({el : '#root',template : `<app></app>`,// 注册app组件components : {app}})</script>
</body>

VueComponent & Vue

vm和vc的区别

new Vue({})配置项中的this是Vue实例vm(构造函数中的this指向新创建的对象), Vue.extend({})配置项中的this是VueComponent的实例vc

  • vm和vc拥有大量相同的属性和函数,但二者并不相同,只能说vm上有的vc上不一定有但vc上有的vm上一定有(vm上有el属性而vc上没有,vc的data必须是一个函数)

Vue.extend()源码: 因为Sub是个局部变量, 所以每一次调用Vue.extend方法返回的都是一个全新的VueComponent构造函数(构造函数也是类型即对应一个对象),并不是VueComponent构造函数的实例

  • 有了构造函数当Vue在解析组件标签时就会创建一个VueComponent实例,每个组件标签都对应一个VueComponent构造函数的实例
    在这里插入图片描述
<body><div id="app"><h1>{{msg}}</h1><user></user></div><script>// 创建组件const user = Vue.extend({template : `<div><h1>user组件</h1></div>`,mounted(){// this是VueComponent的实例,但user是一个全新的VueComponent构造函数(函数类型的对象)console.log('vc', this === user)//false}})// Vue实例const vm = new Vue({el : '#app',data : {msg : 'vm与vc'},components : {user},mounted() {// this是Vue实例console.log('vm', this)},})</script>
</body>

原型对象

XX的原型对象是一个所有对象实例共享的对象有且只有一个,获取原型对象有两种方式

  • prototype ：显示的原型属性(建议程序员使用的)，可以通过构造函数.prototype的方式获取原型对象
  • __proto__：隐式的原型属性(不建议程序员使用的)，可以通过对象实例.__proto__的方式获取原型对象

在这里插入图片描述

// 构造函数(函数本身也是一种类型，代表User类型有一个prototype属性）
function User(){}
// 通过User构造函数获取函数的原型对象
let x = User.prototype
// 通过User构造函数可以创建实例
let a = new User()
// 通过User构造函数的实例获取到实例原型对象
let y = a.__proto__
// 获取的是同一个原型对象
console.log(x === y) // true
// 给“User的原型对象”扩展属性,不是给User构造函数扩展属性
User.prototype.counter = 1000// 通过a实例可以访问到这个扩展的counter属性
// 访问原理：首先去a实例上找counter属性，如果a实例上没有counter属性的话，会沿着__proto__这个原型对象去找counter属性
console.log(a.counter)
//console.log(a.__proto__.counter)

vc,vm共享Vue原型对象

VueComponent.prototype.__proto__ = Vue.prototype: 这行代码实现了Vue,vm,VueComponent,vc都共享了同一个Vue的原型对象

  • Vue原型对象上有很多属性和方法如$mount()，对于组件VueComponent来说就不需要再额外提供了，直接使用vc调用$mount()即可，代码得到了复用<img 在这里插入图片描述
<body><div id="app"><h1>{{msg}}</h1><user></user></div><script>// 给“Vue的原型对象”扩展一个counter属性Vue.prototype.counter = 1000// 创建组件,调用Vue.extend()返回的是一个全新的VueComponent构造函数const user = Vue.extend({template : `<div><h1>user组件</h1></div>`,mounted(){// 通过this也就是vc可以访问到Vue原型对象上的属性console.log('vc.counter', this.counter)// msg是vm实例上的属性不是原型对象上的属性所以访问不了//console.log('vc.msg', this.msg)}})// user就是VueComponent构造函数console.log('user.prototype.__proto__ === Vue.prototype' , user.prototype.__proto__ === Vue.prototype)// true// Vue的实例const vm = new Vue({el : '#app',data : {msg : 'vm与vc'},components : {user},mounted() {// this是Vue实例console.log('vm', this)},})// vm实例可以直接访问原型对象的属性console.log('vm.counter', vm.counter)console.log('vm.counter', vm.__proto__.counter)</script>
</body>

这篇关于Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/344202。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Linux换行符的使用方法详解

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将
阅读更多...
使用Jackson进行JSON生成与解析的新手指南

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON（序列化）2.2 JSON 转对象（反序列化）3.
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...
Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
详解C#如何提取PDF文档中的图片

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片，如艺术画作、设计素材、报告图表等，提取图片可以将这些图像资源进行单独保存，方便后续在不同的项目中使
阅读更多...
Java中List的contains()方法的使用小结

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论：List 的 contain
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2