Vue Component development and sharing

Before you start this article, you may want to learn about the following topics:

Vue.js a high-performance, lightweight MVVM framework

Webpack Front-end Modular Code building tool

Vue Component Introduction

Based on the vue.js efficient bidirectional data binding feature, we can focus more on data logic development when developing highly available components;

Forget the DOM operation, forget the event bindings, and focus your development focus on the data:

1. Define the data and types that need to be used

2. Update data at the right time

3, in the template binding data and view mapping relationship

4. Open external Calling interface

Code

Https://github.com/xiaoyunchen/vue-search

Code explanation script

Component logic script implementation. For detailed configuration properties, please refer to: http://cn.vuejs.org/guide/components.html

This introduces the Weui style as the component global default style.

Name: component names, default as label names for using components

Props: The data definition that the component needs to use, including the data type and default values. This data can be passed in by the parent when the component is used.

In other words, these properties inside the props can be defined on their own when used externally.

Data: A value that is private within the component, i.e. no external exposure is required. For example, the keywords that are entered when the user searches here.

Methods: Event Response method. The main realization is that when the user chooses the corresponding subkey, the selected data is dispatched to the parent for logical processing.

Template

Component template definitions, in addition to the DOM structure definition, include how templates and data are bound.

V-show: The show value of the bound component, which is displayed when show is true (Display:block);

Transition: Component Transitions Toggle animation mode, please refer to the Transition animation defined here http://cn.vuejs.org/guide/transitions.html, which needs to be implemented in CSS itself. The slide toggle animation is already implemented by default within the component.

Line 3rd: v-on:click= "Show=false" Here a response event is bound for the component mask layer, and simply changing the value of show to False,vue will automatically hide the component based on the bidirectional data binding feature, without our action.

Line 9th: The model:query of the bound input box, and the placeholder value.

Line 10th: V-show defines the display condition for this clear button: When the value entered is longer than 0 o'clock.

Also defines the function of clear button, set the query value to NULL, again, we do not need to do DOM operation.

第13-16: v-for: Generates a list of options based on the incoming array data, and uses the Vuejs filter to filter the data according to the query field.

In addition, the maximum display bar number limit is defined here.

V-text: Defines the object property values we need to display

v-on:click= "Chooseitem": corresponds to the method in script, the user selects the corresponding subkey, the component carries out the event dispatch, and the selected data is escalated to the parent for processing.

Style

There are two style tags, one with the scoped attribute, representing these styles for individual use within the component, avoiding overlapping with external styles due to the problem of duplicate names.

The other one is a common style, which can be overridden by external modifications. This is primarily for external use when customizing transition animations, additional definition of animated CSS is required.

How to use

Js

• Introducing and using Vue-search components
• Event defines events that respond to the component being used, where the event name is consistent with the dispatch event name defined within the component. If the current module has its own method, implement it in methods.

HTML templates
Introduces components and defines the data items that need to be passed in.

Code Building

Our Vue file format is developed for custom components, so when the code is built it needs to parse the Vue format file and then webpack it for modular packaging.

Thank Vue-loader for making the above possible.

So we just need to configure the corresponding loader for the Vue file in Webpack:

{test:/\.vue/, Loader: "Vue"}

Say two more words.

The charm of MVVM lies in blocking DOM operations, freeing the front-end to develop creativity, and concentrating the development focus on the changing process of data.

This can make development more efficient and, on the other hand, make the development debugging process relatively simple.

Second, the use of the MVVM framework does not represent native JS manipulation of the DOM, and the event model is not important for these basics.

In fact, all the framework is the use of native JS developed, only the native JS has enough deep understanding, to better grasp the MVVM framework.

Finally, we ask you to consider a question:

In the implementation of the component just now (line 14th), we bind the click event to each item, so if we have enough item, is it equal to also bind n multiple events? Can the final event be executed efficiently?

Vue Component development and sharing