vue组件命名

vue组件命名相关知识

• 关于vue的命名规范

  前言：命名其实是很重要的，尤其项目越大，命名就应该越规范，要有语义化这应该是最基本的了，但是哪些地方该大写？哪里该小写？我将自己平常工作学习中在用vue的时候的一些命名规范分享一下，谈谈自己对命名的看法。1、组件命名官网对组件名大小写是这么介绍的，定义组件名的方式有两种：使用kebab-case（短横线）短横线使用 PascalCase（首字母大写） 注册首字母大写但是在HTML模板中只能使用短横线<!-- 在 html 模板中始终使用 kebab-case --><kebab-cased-component></kebab-cased-component>2、文件命名这是我个人在项目中总结的一些命名规范文件名统一采用驼峰式页面中import引入的名称与注册组件时的名字保持一致，使用首字母大写模板中使用组件必须使用短横线式vue的命名规范作者：Ewall_链接：https://www.jianshu.com/p/b56d0
• Vue 自定义组件

  简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树功能组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子组件注册组件名组件名应该始终是多个单词的，根组件 App 除外这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因
• 【九月打卡】第4天 vue父子组件生命周期调用顺序

  课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack 课程章节： vue父子组件生命周期调用顺序 主讲老师：双越 课程内容： 今天学习的内容包括： vue父子组件生命周期调用顺序 课程收获： vue父子组件生命周期调用顺序 list子组件 created() { // eslint-disable-next-line console.log('list created') }, mounted() { // eslint-disable-next-line console.log('list mounted') // 绑定自定义事件 event.$on('onAddTitle', this.addTitleHandler) }, beforeUpd
• webstorm编写vue、react 将大驼峰组件命名转换成短横杠命名

  大家好！我是木瓜太香，精通 webstorm 与常见前端技术的工程师，偶尔也在b站搞一些 webstorm 技巧教学，今天给大家带来的是大驼峰小驼峰快速转换短横杠命名或者下划线命名的方式。 开发中我们可能会遇到一个这样的需求，我们在创建组件的时候习惯使用大驼峰命名，而在使用的时候，我们又要使用短横杠或者下划线命名，这种功能我们当然不可能手打的啦，这辈子都不可能的啦。 解决的办法一般比较容易想到的有两种，一种是直接使用插件实现，另一种则是使用宏命令来实现，两种都是可以完成这

vue组件命名相关课程

• Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲 这是一门重技术讲解的课程，通过一个Todo应用深入讲解Vue应用开发，Vue+Webpack工作流搭建，Vue+Vue-Router+Vuex项目架构和Vue服务端渲染深度集成，以此给学员展示Vue应用开发中的各种问题和优质解决方案。

  讲师：Jokcy 高级 3116人正在学习

• Vue3 + Typescript 从0到1开发通用基础组件 前端工程师都在用的Vue3.0+Typescript，你还没听说过？别慌，现在还来得及！本课程带你全面学懂、学会、学透Typescript，透彻掌握Vue3 的新特性，跟随由浅入深的项目开发学习节奏，体验企业级代码规范与流程。学习快人一步，升职快人一步！

  讲师：张轩 初级 6917人正在学习

• 基于Vue3+Vite+TS，二次封装element-plus业务组件 很多前端开发者只会调用element-plus组件库已有组件，在面对需要定制的场景，或者想要简化使用组件的时候，就会无从下手。本课程深度结合前沿技术栈Vue+Vite+TS，全方位讲解二次封装的思想、技巧、组件设计等，并提供了大量封装实例，帮大家掌握组件的二次封装，实现前端进阶！

  讲师：五月的夏天 中级 296人正在学习

vue组件命名相关教程

• 3.1 创建 .vue 文件 我们用 HBuilderX 这个官方工具来创建 .vue 文件，右键点击 pages 文件夹，点击新建页面，命名为 imoocPage。pages 文件夹下面就会创建一个 imoocPage 文件夹，下面包含了一个 .vue 文件。.vue 文件中会帮我们默认创建 <template>、<script> 和 <style>这三大顶级语言块。<template><view></view></template><script> export default { data() { return { } }, methods: { }}</script><style></style>
• 3.1. 全局组件注册 我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：1. 组件名，2. 组件属性对象。命名：短横线：<my-component-name>驼峰式：<MyComponentName> 使用驼峰命名组件时，首字母最好以大写字母开头。属性对象：组件的属性对象即为 Vue 的实例对象属性。全局组件可以在任何其他组件内使用，所以当我们设计的组件，需要在不同地方使用的时候，我们应当注册全局组件。// 注册// 驼峰命名Vue.component('MyComponentName', {/* */})// 短横线命名Vue.component('my-component-name', {/* */})......// 使用<my-component-name></my-component-name>// 也可以使用自闭和的方式<my-component-name /> 具体示例如下：595代码解释：JS 代码第 3-5 行，我们注册了一个全局组件 myComponent，并在 html 内使用两种方式引用了该组件。
• 4. 组件中的属性参数 在之前章节我们学习了 Vue 实例，其实，所有的 Vue 组件也都是 Vue 的实例，他们也可以接收同样的属性参数，并且有相同的生命周期钩子。示例：597代码解释：JS 代码第 3-18 行，注册了一个全局组件 myComponent，并定义了 data 数据、 methods 方法、created 生命周期函数。
• 2. 自定义组件的创建 在 uni-app 项目中，我们可以通过HBuilder 开发者工具新建一个后缀名为 .vue 的文件，在这个 .vue 文件中创建自定义组件。后面将该组件通过 import 的方式导入，再在 components 中进行注册就可以像基础组件一样使用了。
• 2.1 重命名文件 重构的操作通常可以通过鼠标右键调出来的上下文菜单中进行选择。比如，我们希望对我们的 Java 文件进行重命名，那么我们可以通过鼠标右键点击想要重命名的文件，然后选择 Refactor -> Rename，如下图所示：接着，在 New Name这一栏填写我们想要修改成的名称，比如我们希望修改 FirstTest.java 为 FirstTest2.java，如下图所示：点击 Next 后，Eclipse 将向我们展示如果我们执行了该重构操作将会发生的变更，以及预览，如下图所示：接着点击 Finish 后，这次重构就完成了。可以看到，我们通过重构操作对 Java 文件进行重命名后，Eclipse 会自动帮助我们同步修改文件中的类名。同理，我们如果对包名（文件夹）进行重命名， Eclipse 也会帮我们自动修改包下所有Java 文件中的包名信息，操作方式和重命名文件一样，大家可以自行尝试。
• 2. 什么 Vue.js 单文件组件 Vue 单文件组件主要是一个 .vue 文件，这是一个自定义的文件类型，一个 .vue 文件就是一个单文件组件。用类 HTML 语法描述一个 Vue 组件，每个 .vue 文件包含三种类型的顶级语言块，分别是 <template>、<script> 、 <style>。除了这三种类型的顶级语言块，还允许添加可选的自定义块。uni-app 只支持 vue 单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="text/x-template">字符串模版等，在非H5端不支持。

vue组件命名相关搜索

vacuum vagrant val validationgroup validationsummary vals valueof values vant variables vb vb if else vb if语句 vb net vb net 教程 vb net 数据库 vb net教程 vb net下载 vb 教程 vb 数组

查看更多慕课网实用课程