组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以is特性扩展。个人认为就是一个可以重复利用的结构层代码片段。
全局组件注册方式：Vue.component(组件名,{方法})
eg:
渲染结果：
我是全局组件
我是全局组件
这里需要注意：
1.全局组件必须写在Vue实例创建之前，才在该根元素下面生效；
eg:
这样只会渲染app1根元素下面的，并不会渲染app根元素下面的，并且会报错。
2.模板里面第一级只能有一个标签，不能并行；
这样子会报错，并且只会渲染第一个标签h1;我们应该这样子写：
局部组件注册方式，直接在Vue实例里面注册
eg:
局部组件需要注意：
1.属性名为components，s千万别忘了;
2.套路比较深，所以建议模板定义在一个全局变量里，代码看起来容易一点，如下：（模板标签比较多的时候，这样子写更加简洁规整）
关于组件中的其他属性，可以和实例中的一样，但是data属性必须是一个函数：
eg:
显示结果：
全局组件和局部组件一样，data也必须是一个函数：
显示结果：
当使用 DOM 作为模板时 (例如，将 自定义组件 eg: 渲染结果为： 对于全局与局部的作用域问题，我们可以这样理解，只要变量是在组件内部用的，这些变量必须是组件内部的，而在外部html结构中引用的变量，都引用的是该挂载下的实例里面的变量 eg: 弹出框显示：我是局部 Vue中所谓的全局指的是该挂载下的区域； 下面这种做法是错误的，按我的想法觉得应该会弹出：我是全局，但是却报错，也就是说组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信 额外话题： 1.函数return后面必须跟返回的内容，不能换行写 eg: 下面这种写法不会返值回来： 2.Vue和小程序等一样，采用es6的函数写法，this指向是不一样的 结果： 第一个this指的是Vue实例 第二个this指的是Window 由于它和小程序不一样，我发现在data里面this指的是window，在methods里面this才是Vue实例 所以建议大家用es5写吧 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。el选项挂载到一个已存在的元素上)，你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素，
限制了能被它包裹的元素，而一些像这样的元素只能出现在某些其它元素内部。
is属性：
new Vue({
el:"#app1",
data:{that:this},
})
写下你的评论吧 !
推荐阅读
本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ...
[详细]
蜡笔小新 2024-11-07 09:43:24
本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码，帮助开发者快速掌握如何在项目中实现国际化功能，提升用户体验。同时，文章还探讨了常见的多语言切换问题及解决方案，为开发人员提供了实用的参考。 ...
[详细]
蜡笔小新 2024-11-05 20:00:42
如何撰写PHP电商项目的实战经验？ ...
[详细]
蜡笔小新 2024-11-02 19:29:46
wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器，支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构，还全面支持 Emoji 表情，极大地提升了内容展示的多样性和用户体验。 ...
[详细]
蜡笔小新 2024-11-01 19:12:59
深入解析Tomcat：开发者的实用指南 ...
[详细]
蜡笔小新 2024-10-31 09:46:02
本文深入探讨了IO复用技术的原理与实现，重点分析了其在解决C10K问题中的关键作用。IO复用技术允许单个进程同时管理多个IO对象，如文件、套接字和管道等，通过系统调用如`select`、`poll`和`epoll`，高效地处理大量并发连接。文章详细介绍了这些技术的工作机制，并结合实际案例，展示了它们在高并发场景下的应用效果。 ...
[详细]
蜡笔小新 2024-10-29 18:24:19
本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定，提供了超过 620 个类和 6000 个函数及方法，广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件，支持丰富的文本编辑功能，如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能，还在于其易用性和灵活性，使其成为开发复杂用户界面的理想选择。 ...
[详细]
蜡笔小新 2024-10-28 23:56:36
本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ...
[详细]
蜡笔小新 2024-10-28 20:00:28
本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析，详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题，并提供了可供参考的代码示例和解决方案。此外，文章还讨论了常见的技术挑战及优化策略，旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ...
[详细]
蜡笔小新 2024-10-28 18:59:50
手机上编写和运行PHP代码的最佳软件推荐 ...
[详细]
蜡笔小新 2024-10-27 21:10:40
本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例，帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时，文章还提供了常见问题的解决方案和优化建议，确保上传过程的高效性和稳定性。 ...
[详细]
蜡笔小新 2024-10-27 20:16:58
微信小程序的核心功能与优势在于其独特的运行环境，区别于传统网页应用，它不依赖于浏览器的BOM和DOM对象，因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外，小程序还具备一系列专有特性，如高效的数据绑定、丰富的API接口以及良好的用户交互体验，这些都为开发者提供了更为灵活和强大的开发工具，使得小程序能够更好地适应移动互联网时代的需求。 ...
[详细]
蜡笔小新 2024-10-27 14:45:58
在近期的一个H5游戏开发项目中，需要将Excel数据转换为JSON格式。经过调研，市面上缺乏合适的工具满足需求。因此，决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段，即Vue.js项目的初始化及开发环境的配置过程，详细阐述了如何搭建高效的前端开发环境，确保后续功能开发的顺利进行。 ...
[详细]
蜡笔小新 2024-10-26 07:41:45
### 一、指令概述指令是 Vue 中的一种特殊属性，用于增强 HTML 元素的功能。它们以 `v-` 开头，如 `v-cloak`。### 二、`v-cloak` 指令的应用`v-cloak` 指令主要用于解决页面加载过程中未编译的 Vue 插值表达式短暂显示的问题。在 Vue 实例编译完成之前，带有 `v-cloak` 的元素将被隐藏，从而避免了“闪动”现象。通过结合 CSS 样式，可以进一步优化用户体验，确保页面在初始加载时保持整洁和专业。 ...
[详细]
蜡笔小新 2024-10-24 19:28:12
一、声明周期图例 图片来源：https:www.jianshu.compd61f55da98fb?fromtimeline 二、分析1、newVue()创建vue实例，其实 ...
[详细]
蜡笔小新 2024-10-23 18:20:39
丁木China
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有