Shulou(Shulou.com)06/03 Report--

This article is to share with you the content of a sample analysis of the style of Vue Lite. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Component name

[component name is multiple words] (required)

The component name should always be multiple words, except for the root component App. This avoids conflicts with existing and future HTML elements because all HTML element names are of a single word

/ / badVue.component ('todo', {}) / / goodVue.component (' todo-item', {})

[single file component filenames should either always start with an uppercase word (PascalCase) or always be hyphenated (kebab-case)] (highly recommended)

/ / badmycomponent.vue//goodMyComponent.vue//goodmy-component.vue

[the basic component name should start with a specific prefix] (highly recommended)

The underlying components that apply specific styles and conventions (that is, those that present classes, illogical, or stateless) should all start with a specific prefix, such as Base, App, or V

/ / badcomponents/ |-MyButton.vue |-VueTable.vue |-Icon.vue//goodcomponents/ |-BaseButton.vue |-BaseTable.vue |-BaseIcon.vue

[components that should only have a single active instance should be named with the The prefix to show their uniqueness] (highly recommended)

This does not mean that components can only be used on a single page, but only once per page, and these components will never accept any prop

/ / badcomponents/ |-Heading.vue |-MySidebar.vue//goodcomponents/ |-TheHeading.vue |-TheSidebar.vue

[child components that are tightly coupled to the parent component should be prefixed with the parent component name] (highly recommended)

/ / badcomponents/ |-TodoList.vue |-TodoItem.vue |-TodoButton.vue//goodcomponents/ |-SearchSidebar.vue |-SearchSidebarNavigation.vue

[component names should start with high-level (usually generalized) words and end with descriptive modifiers] (highly recommended)

/ / badcomponents/ |-ClearSearchButton.vue |-ExcludeFromSearchInput.vue |-LaunchOnStartupCheckbox.vue |-RunSearchButton.vue |-SearchInput.vue |-TermsCheckbox.vue//goodcomponents/ |-SearchButtonClear.vue |-SearchButtonRun.vue |-SearchInputQuery.vue |-SearchInputExcludeGlob.vue |-SettingsCheckboxTerms.vue |-SettingsCheckboxLaunchOnStartup.vue

[component names should always be PascalCase-- in single file components and string templates, but always kebab-case in DOM templates] (highly recommended)

/ / bad//good

[component names should tend to be complete words rather than abbreviations] (highly recommended)

/ / badcomponents/ |-SdSettings.vue |-UProfOpts.vue//goodcomponents/ |-StudentDashboardSettings.vue |-UserProfileOptions.vue

Component correlation

[single file components, string templates, and components without content in JSX should self-close-but do not do so in DOM templates] (highly recommended)

Self-closing components indicate that they not only have no content, but also deliberately have no content.

/ / bad//good

[set scope for component style] (required)

This rule only relates to single file components. The scoped feature is not required. Scope can also be set through CSS Modules, or by using other libraries or conventions

/ / badX.btn-close {background-color: red;} / / goodX.btn-close {background-color: red;} / / goodX.btn-close {background-color: red;}

[single file components should always keep the order of, and tags consistent] (recommended)

/ / good/*. /.

[there is only one component in a file] (highly recommended)

/ / badVue.component ('TodoList', {}) Vue.component (' TodoItem', {}) / / goodcomponents/ |-TodoList.vue |-TodoItem.vue

[default order of component options] (recommended)

1. Side effects (effects outside the trigger component)

El

2. Global awareness (knowledge other than components is required)

Nameparent

3. Component type (change the type of component)

Functional

4. Template modifier (change the way the template is compiled)

Delimiterscomments

5. Template dependency (resources used in the template)

Componentsdirectivesfilters

6. Combine (merge attributes into options)

Extendsmixins

7. Interface (interface of component)

InheritAttrsmodelprops/propsData

8. Local status (local responsive properties)

Datacomputed

9. Events (callbacks triggered by responsive events)

Watch lifecycle hooks (in the order in which they are called)

10. Non-responsive properties (independent of the instance properties of the response system)

Methods

11. Rendering (declarative description of component output)

Template/renderrenderError

Prop

[definition of Prop should be as detailed as possible] (necessary)

Detailed prop definitions have two advantages: 1. They specify the API of the component, so it is easy to understand the usage of the component. 2. In a development environment, providing a malformed prop,Vue to a component will alarm you to help you capture potential sources of errors.

/ / badprops: ['status'] / / goodprops: {status: String} / / betterprops: {status: {type: String, required: true}}

[always use camelCase when declaring prop, and always use kebab-case in templates and JSX] (highly recommended)

/ / badprops: {'greeting-text': String} / / goodprops: {greetingText: String}

Instructions and characteristics

[always use key with v-for] (necessary)

/ / bad / / good

[do not use v-if and v-for on the same element at the same time] (necessary)

/ / bad {{user.name}} / / good {{user.name}}

[elements of multiple features should be written in multiple lines, one line for each feature] (highly recommended)

/ / bad

/ / good

[default order of element properties] (recommended)

1. Definition (provide options for components)

Is

2. List rendering (create multiple changes of the same element)

V-for

3. Conditional rendering (whether elements are rendered / displayed)

V-ifv-else-ifv-elsev-showv-cloak

4. Rendering method (change the rendering mode of elements)

V-prev-once

5. Global awareness (knowledge beyond components is required)

Id

6. Unique properties (properties that require unique values)

Refkeyslot

7. Two-way binding (combining binding with events)

V-model

8. Other features (all normal bound or unbound features)

9. Events (component event listeners)

V-on

10. Content (copy the content of the element)

V-htmlv-text

Attribute

[private attribute name] (required)

Always use the $_ prefix for custom private attributes in plug-ins, blending, etc., with a namespace to avoid conflicts with other authors (such as $_ yourPluginName_)

/ bad methods: {update: function () {}} / / bad methods: {_ update: function () {}} / / bad methods: {$update: function () {}} / / bad methods: {$_ update: function () {}} / / good methods: {$_ myGreatMixin_update: function () {}}

[the data of a component must be a function] (required)

When the data property is used in a component (anywhere except new Vue), its value must be a function that returns an object

/ / badVue.component ('some-comp', {data: {foo:' bar'}}) / / goodVue.component ('some-comp', {data: function () {return {foo:' bar'})

[component templates should contain only simple expressions, while complex expressions should be refactored to evaluate properties or methods] (highly recommended)

/ / bad {{fullName.split ('') .map (function (word) {return word [0] .toUpperCase () + word.slice (1)}) .join ('')}} / / goodcomputed: {normalizedFullName: function () {return this.fullName.split ('') .map (function (word) {return word [0] .toUpperCase () + word.slice (1)}). Join (')}

[complex computational attributes should be split into as many simpler attributes as possible] (highly recommended)

/ badcomputed: {price: function () {var basePrice = this.manufactureCost / (1-this.profitMargin) return (basePrice-basePrice * (this.discountPercent | | 0))}} / / goodcomputed: {basePrice: function () {return this.manufactureCost / (1-this.profitMargin)}, discount: function () {return this.basePrice * (this.discountPercent | | 0)}, finalPrice: function () {return this.basePrice-this.discount}}

[when a component starts to feel dense or difficult to read, adding blank lines between multiple attributes makes it easy] (recommended)

/ / goodprops: {value: {type: String, required: true}, focused: {type: Boolean, default: false}}

Use with caution

1. Element selectors should avoid appearing in scoped

In the scoped style, class selectors are better than element selectors, because heavy use of element selectors is slow

/ / badbutton {background-color: red;} / / good.btn-close {background-color: red;}

2. Priority should be given to communication between parent and child components through prop and events, rather than this.$parent or changing prop

3. Global state should be managed preferentially through Vuex, rather than through this.$root or a global event bus

4. If a group of v-if + v-else has the same element type, it is best to use key (for example, two elements)

/ / bad error: {{error}} {{results}} / / good error: {{error}} {{results}} Thank you for reading! This is the end of this article on "sample Analysis of the simplified style of Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.