[vue] 你有看过vue推荐的风格指南吗?列举出你知道的几条

[vue] 你有看过vue推荐的风格指南吗?列举出你知道的几条

优先级A的规则:必要的 (规避错误)组件名为多个单词组件数据:组件的 data 必须是一个函数。细致的 Prop 定义总是用 :key 配合 v-for避免 v-if 和 v-for 用在一起为组件样式设置作用域私有属性名:自定义私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。优先级B的规则:强烈推荐 (增强可读性)组件文件:只要有能够拼接文件的构建系统,就把每个组件单独分成文件。单文件组件文件的大小写:要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。基础组件名:应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。单例组件名:只拥有单个活跃实例(每个页面只使用一次)的组件应该以 The 前缀命名,以示其唯一性。紧密耦合的组件名:和父组件紧密耦合的子组件应该以父组件名作为前缀命名。组件名中的单词顺序:组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。自闭合组件:在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。模版中的组件名大小写:在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。JS / JSX 中的组件名大小写:JS/JSX 中的组件名应该始终是 PascalCase 的,在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。完整单词的组件名Prop 名大小写:在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。多个特性的元素:多个特性的元素应该分多行撰写,每个特性一行。模板中简单的表达式:组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。简单的计算属性带引号的特性值:非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。指令缩写:指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。优先级C的规则:推荐 (将选择和认知成本最小化)组件 / 实例的选项的顺序元素特性的顺序组件 / 实例选项中的空行:在多个属性之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候。单文件组件的顶级元素的顺序:总是让 <script>、<template> 和 <style> 标签的顺序保持一致。且 <style> 要放在最后,因为另外两个标签至少要有一个。优先级D的规则:谨慎使用 (有潜在危险的模式)没有在 v-if / v-else-if / v-else 中使用 key元素选择器应该避免在 scoped 中出现。隐性的父子组件通信:应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。非 Flux 的全局状态管理:应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jQuery学习总结06-插件开发

本文是参考了Joey的博客后整理的。 先从一个简单扩展jQuery对象的demo开始说起&#xff1a; //sample:扩展jquery对象的方法&#xff0c;redTextColor()用于改变字体颜色。(function ($) {$.fn.extend({"redTextColor": function () {// 默认字体颜色为红色return th…

js 位运算符 ~, ,| ,^

1、位运算 NOT 由否定号&#xff08;~&#xff09;表示 位运算 NOT 是三步的处理过程&#xff1a; 把运算数转换成 32 位数字把二进制数转换成它的二进制反码把二进制数转换成浮点数 例如&#xff1a; //31位表示整数的数值&#xff0c;用第 32 位表示整数的符号&#xff0c;…

[vue-cli]vue-cli提供了的哪几种脚手架模板?

[vue-vuex]vue-cli提供了的哪几种脚手架模板&#xff1f; vue-cli2.x 好像有个simple和完整版的 vue-cli3.x 提供了自定义装箱配置 可以选装TypeScriptPWAlinte2ecss 预处理routervuex个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但…

DHCP服务器的设计

介绍 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09;通常被应用在大型的局域网络环境中&#xff0c;主要作用是集中的管理、分配IP地址&#xff0c;使网络环境中的主机动态的获得IP地址、Gateway地址、DNS服务器地址等信息&…

Dom对象、JavaScript对象、jQuery对象区别

一、Dom对象、JavaScript对象、jQuery对象 1.1 Dom对象 文档对象模型简称DOM&#xff0c;是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、 这些对象的行为和属性以及这些对象之间的关系。…

[vue-cli] vue-cli工程中常用的npm命令有哪些

[vue-cli] vue-cli工程中常用的npm命令有哪些 npm install&#xff1a;下载 node_modules 资源包的命令 思考问题&#xff1a; 为什么下载资源包要用npm install&#xff1f; 请你谈一下 npm run dev&#xff1a; 启动 vue-cli 开发环境的 npm命令&#xff08;3.0以下&#x1…

Spring对AspectJ的支持

1.AspectJ介绍及Pointcut注解应用 &#xff08;1&#xff09;AspectJ AspectJ的风格类似纯java注解的普通java类Spring可以使用AspectJ来做切入点解析AOP的运行时仍旧是纯的Spring AOP&#xff0c;对AspectJ的编译器或者织入无依赖性&#xff08;2&#xff09;Spring中配置Aspe…

[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?

[vue-cli]在使用vue-cli开发vue项目时&#xff0c;自动刷新页面的原理你了解吗&#xff1f; 自动刷新页面并不是vue-cli的功能&#xff0c;而是webpack的hot-module-replacement-plugin插件在做这件事&#xff0c;这个插件是webpack自带的插件&#xff0c;用来做hmr的。如果需…

git 基本使用

一、本地创建git版本库 在本地随便找个空文件夹 或者 新建一个空文件夹 初始化一下 $ mkdir newgit //新建一个空目录 $ cd newgit //进入 $ git init //使用git init命令 初始化一个Git仓库二、添加文件到Git仓库&#xff0c;分两步 使用命令git add <f…

C++ ActiveX开发的问题讨论

最近在一个项目中需要开发一个ocx插件&#xff0c;在开发过程中发现了一些问题&#xff0c;所以在此记录一下。 我想讨论的主要是函数的参数问题&#xff0c;我分别使用c,JavaScript,C#对ocx插件做了测试&#xff0c;发现不同的参数类型在这几种语言中表现的差异很大。 &#x…

[vue-cli]vue-cli3插件有写过吗?怎么写一个代码生成插件?

[vue-cli]vue-cli3插件有写过吗&#xff1f;怎么写一个代码生成插件&#xff1f; MyPlugin.install function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod function () { // 逻辑... }// 2. 添加全局资源 Vue.directive(my-directive, { bind (el, bindi…

javaScript数据类型(包括基本数据类型和非基本数据类型)

一、五种基本数据类型 1、number 数字类型 - 包括浮点数和整数&#xff0c;例如&#xff1a;1,100,3.14 2、string 字符串类型 - 包括任意数字字符组成的序列&#xff0c;例如&#xff1a;“1”&#xff0c; “one”&#xff0c; “one 2 one” 3、boolean 布尔类型 - 包括 t…

Codeforces Round #496 (Div. 3 ) E1. Median on Segments (Permutations Edition)(中位数计数)

E1. Median on Segments (Permutations Edition)time limit per test3 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputYou are given a permutation p1,p2,…,pnp1,p2,…,pn. A permutation of length nn is a sequence such that each i…

数组转换为字符串方法

1. toString() 方法 和 toLocaleString() 方法 var arr [ "a", "b", "c"]; alert(arr.toString()); // a,b,c alert(arr.toLocaleString()); // a,b,c 返回数组的字符串表示&#xff0c;中间以逗号隔开 2. join() 方法 var a…

[vue-cli]vue-cli生成的项目可以使用es6、es7的语法吗?为什么?

[vue-cli]vue-cli生成的项目可以使用es6、es7的语法吗&#xff1f;为什么&#xff1f; vue-cli 配置了babel,可以将es6,es7....etc在webpack打包的时候转换成es5的代码&#xff0c;所以上线的时候没有问题。但是脚手架只是配置了一些默认常见的用法&#xff0c; 可以根据babel…

做小程序的流程总结(基本篇)

一、首先当我们借助小程序实现我们的网站搭建时&#xff0c;就需要使用小程序自带的一些功能&#xff1b;且需要根据该小程序获取到的一些参数存储到对应的数据库中。 openID&#xff1a;每个微信用户使用该小程序时都会产生一个openID&#xff0c;且该openID是唯一标识&#x…

js对象数组 按对象的某一属性进行去重

var array [{ id: 1, name: "张三"},{ id: 2, name: "李四"},{ id: 3, name: "张龙"},{ id: 4, name: "赵虎"},{ id: 5, name: "王朝"},{ id: 1, name: "刘金刚"},{ id: 6, name: "马汉"}, ]var obj …

[vue-cli]vue-cli怎么解决跨域的问题?

[vue-cli]vue-cli怎么解决跨域的问题&#xff1f; 在根目录下新建&#xff1a;vue.config.js注意名不能错误&#xff0c;然后里面配置 module.exports { devServer: { proxy: { //配置跨域 /api: { target: 跨域url, ws: true, changOrigin: true // pathRewrite: { // ^/api…

java - springmvc整合cxf发布webservice

1.jar包已上传百度云盘&#xff0c;在jar包目录下 2.web.xml配置 <web-app xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns"http://java.sun.com/xml/ns/javaee" xsi:schemaLocation" http://java.sun.com/xml/ns/javaee http://jav…

CSS3 选择前几个元素 选择后几个元素等问题

//例如有如下代码块 <div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p> </div>1.选择第n个p div:nth-child(n) p:nth-of-type(n)2.选择倒数第n…