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

This article mainly explains "what are the basic features of Vue.js". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the basic features of Vue.js".

A brief introduction to Vue.js

II. Basic characteristics

a. Examples and options

1. A Vue instance is equivalent to a ViewModel in MVVM schema. When instantiating, we can pass in an option object, including data, template, mount element, method, lifecycle hook, and so on.

two。 Only the objects passed in during initialization are responsive

3. If you need to add responsive variables after instantiation, you need to call the instance method $set. We should try to set all the variables during initialization. If there is no value, you can use undefined or null to occupy the space.

4. Instances of component types can obtain data through props, which, like data, needs to be preset during initialization.

5. You can define methods through the option property methods object, and use the v-on directive to listen for DOM events

6.Vue.js instance lifecycle:

BeforeCreate 、 created 、 beforeMount 、 mounted 、 beforeDestroy 、 destroyed 、 beforeUpdate 、 updated 、 activated 、 deactivated

b. Data binding

1.Vue2.0 has removed the built-in filter

two。 Directive (Directives), when the value of the expression changes, there will be some special behavior on the bound DOM. Vue is an attribute with a v-prefix, the value of the instruction is limited to the binding expression, and the modifier (Modifiers) is a half-corner full stop. A special suffix at the beginning to indicate that the instruction should be bound in a special way

3. Form parameter properties: modifier lazy, modifier number, modifier trim

c. Template rendering

1.v-show will render and display in DOM, just toggle the css attribute display of the element, while v-if will not show that DOM,v-show consumes less performance

d. Event binding and snooping

1. The v-on instruction is provided to listen for DOM events, which is usually used directly within the template. The parameter v-on: accepts all the native event names.

two。 Modifiers are provided: .stop, .innovent, .capture, .self

3. Button modifiers are provided: enter, tab, delete, esc, space, up, down, left, right

III. Instructions

a. Built-in instruction

1.v-bind is mainly used to dynamically bind the DOM element attribute (attribute), that is, the actual value of the element attribute is provided by the data attribute in the vm instance; there are three modifiers: .camel, which names the bound my name Tuan Yuan Hump

2.v-model is used in input, select, textarea tags with lazy, number, trim modifiers

3.v-if/v-else/v-show, used to display the corresponding template content according to the condition. V-if does not compile the template when the condition is false, but v-show will hide it. The switching consumption of v-if is higher than that of v-show, but the initial rendering of v-if is slightly faster when the initial condition is false.

4.v-for cycle

5.v-on, event binding

6.v-text, whose parameter type is String, is used to update the textContent of the element. Unlike {{}}, v-text needs to be bound to an element to avoid flashing problems before compilation.

7.v-HTML. Accepted strings will not be compiled, and will be handled as normal HTML, similar to v-text.

8.v-el, which registers an index for the DOM element so that we can access the DOM element directly, either through the $els attribute of the extensibility instance or through this within the vm

9.v-ref, similar to v-el, except that it acts on subcomponents, which can be accessed by the instance through $refs

10.v-pre, which compiles this element and child elements by the way, displays the original {{}} tags to reduce compilation time.

11.v-cloak, which is equivalent to adding a [v-cloak] attribute to the element until the associated instance is compiled

12.v-once, which is used to indicate that an element or component is rendered only once. Even if the bound data is changed or updated subsequently, the element or component and the contained child elements will not be compiled and rendered again, which can improve the performance of the page and ignore some steps that do not need to be changed.

b. Custom instruction basis

1. You can register a global custom instruction through the Vue.directive (id, definition) method. Id is the unique identity of the instruction, and the definition object is the relevant properties and hook functions of the instruction. You can also register a local custom instruction in the component's directives option.

two。 The definition object mainly consists of three hook functions:

Bind: called only once, used when the instruction is first bound to an element

Update: the instruction makes its first call after bind with the initial value as an argument, and then it is called each time when the bound value changes. The parameters received are newValue and oldValue.

Ubind: called when an instruction is unbound from an element, only once

3. Instruction attribute this.xxx: (2. 0 cancels this, does not have the concept of instruction instance, and is passed to hook functions in the form of parameters, such as update:function (el, binding,vnode,oldVNode) {... .})

El: the element bound to the instruction

Vm: the context ViewModel of this directive, which can be an instance of new Vue0 or a component instance

Expression: expression of the instruction, excluding parameters and filters

Arg: the parameter of the instruction

Name: the name of the instruction, excluding the v-prefix

Modifiers: an object that contains modifiers for instructions

Descriptor: an object that contains the parsing result of an instruction

c. Advanced options for directives

1. A params array can be accepted in the definition object, and these attributes on the custom instruction binding elements are automatically extracted.

two。 In a custom instruction, if you need to write back data to a Vue instance, you need to use twoWay:ture in the defined object, so you can use this.set (value) in the instruction to write back the data.

* 2.0 greatly weakens instruction-related functions

IV. Filter

1.Vue.js provides a global method Vue.filter () to register a custom filter and accept the filter's ID and filter function parameters

two。 The built-in filters, such as capitalize, uppercase, json, etc., are removed in 2.0. it is recommended to use separate plug-ins to add the filters you need as needed; remove the support for v-model and v-on and can only be used in {{}} tags; modify the use of filter parameters to mark parameters in the form of functions rather than spaces

V. transition

A.CSS transition

1. Bind a DOM element using transition, and the filter system automatically adds the class class name of *-transition to the element, and adds two other pastry pans when inserting and removing: *-enter and *-leave

2.Vue.js provides hook functions that change the class name when inserting or DOM elements, performing specific function operations through Vue.transition ('name', {}), including beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, leaveCancelled;enter and leave functions all have a second optional callback parameter to control when the transition ends instead of listening for transitionend and animationend events

3. Custom transition class name, enterClass property, and leaveClass property

4.Vue.js officially recommends CSS animation library, animate.css. You need to append the animated class name to the element first, and then add the default action class name.

B.JavaScript transition

1.Velocity.js

c. The change of transition system in Vue.js 2.0

1. Cancel the v-transition directive and add built-in tags for transition, including name, appear, css, type, mode attributes, such as zzzz

two。 Two new class names, enter-active and leave-active, have been added to describe the element itself style and transition style. You can put the transition style into *-enter-active and *-leave-active, while *-enter and *-leave define the pre-transition style of the element.

3. Three new hook functions have been added, before-appear, appear, after-appear,before-appear: for the first rendering of the element, enter will be called when rendering again, and the other two are similar

4. Canceled leave-cancelled when using v-if, but still valid when using v-show

5. Transition-group tag is provided to facilitate the use of multiple DOM elements. The main function is to set a unified transition style for its child elements, instead of wrapping every single element in transition, instead of a virtual DOM, it will be rendered in the DOM tree. The default tag is span, which can be set through the attribute tag.

VI. Components

a. Component registration

1.var MyComponent = Vue.extend ({...})

two。 Global registration: Vue.component ('my-component', MyComponent)

3. Local registration: restricts components to be used only in registered components, but not in other components, Vue.extend ({… , components: {'my-child':Child}})

4. You can define a component constructor directly when you register a component

b. Component option

1. There may be multiple instances of a component. If the object data is passed directly to Vue.extend (), the instances of all components will share a data object, so a new object needs to be returned through a function.

two。 The option props acts as a bridge between parent and child components.

The scope of the component instance is isolated, and the data of the parent component cannot be called directly in the templates and modules of the child component, so the data of the parent component is passed to the child component through props, and the child component needs to explicitly declare props when accepting the data.

Component names using-delimited

You can use v-bind to dynamically pass data to subcomponents, and numeric types need to be passed through variables

Props defaults to one-way xepg. When the data of the parent component changes, the data of the child component changes, but modifying the data in the child component does not affect the parent component. The declaration binding displayed by the modifiers .sync and .once is bidirectional or single binding, and props is reference passing. If an object or array is passed, it will affect the state of the parent component, whether it is unidirectional binding or not.

c. Communication between components

1. Direct access, Vue.js provides three attributes for direct access to its parent and child components and root instance. It is recommended to use props to pass

$parent: parent component instance

$children: all child component instances

$root: the root instance where the component resides

two。 When initializing an instance or registering a subcomponent, you can pass an object directly to the option events, or you can use the $on method to listen for events in specific cases or within the method

3. Event trigger

$emit, which triggers an event on the instance itself

Dispatch, the event bubbles along the parent chain and automatically stops bubbling after the first callback is triggered, unless the trigger function explicitly returns true

$broadcast, broadcast events, events are passed down to all future generations

d. Content distribution

1.Vue.js uses slots with elements of original content

two。 The contents of the parent component template are compiled in the parent component scope; the contents of the child component template are compiled in the child component scope

3. The tag allows an anonymous slot, which does not require a name value, as a fallback slot for content clips that cannot find a match. If there is no default slot, these unmatched content fragments will be ignored.

4. In the parent component, you can also define multiple DOM tags with the same slot attribute, which are successively inserted into the slot tags of the corresponding child components and rendered as sibling nodes.

e. Dynamic component

1. Dynamic components, that is, multiple components can use the same mount point, switch different components according to conditions, use retention tags, and determine which component to mount by binding to the value of the is attribute.

two。 Use the keep-alive property to keep switched components in memory to avoid re-rendering

3.Vue.js provides the activate hook function, which is used in the process of dynamic component switching or static component initialization. A callback function is accepted as a parameter, and the component does not render until after using the function.

Changes in F.Vue.js2.0

1. The event option is discarded, and custom events are triggered, listened and unlistened through the $emit, $on, and $off functions; the $dispatch and $broadcast methods are discarded; and a centralized event management mechanism is officially recommended to handle communication in the component, rather than relying on the structure of the component itself.

2.keep-alive is no longer an attribute of the component tag, but a separate tag

3.slot no longer supports the insertion of multiple DOM with the same plot attribute into the corresponding slot tag. A slot is only used once, and its own attributes and styles are no longer saved. Styles and attributes are provided by the parent element or the inserted element.

4. The subcomponent index v-ref is no longer an instruction, but is replaced by a special property of a subcomponent

7. Common plug-ins for Vue.js

A.Vue-router

1. Routing object:

$route.path, current path

$route.params, which contains key-value pairs of dynamic fragments and fully matched fragments in routing

$route.query, which contains the key-value pairs of query parameters in the route

$route.router, a routing instance, which can be redirected by calling go and replace methods

$route.matched, which contains the configuration parameter objects corresponding to all fragments in the currently matched path

$route.name, the name property set for the current route

2.v-link instruction is an instruction used to jump between paths in vue-router applications. The essence is to call the go function of the routing instance router to jump. The instruction accepts an js expression, or you can directly use the data bound in the component, including other parameters: activeClass, exact, replace, append.

3. Router configuration

Hashbang, the default true, is only available in hash mode

History, the default false, starts HTML5 history mode when set to true, and uses history.pushState () and history.replaceState () to manage browsing history

Abstract, the default false, provides a history management tool that does not depend on the browser

Root, default is null. You can set the root path of an application, which is only available in H5 history mode.

LinkActiveClass. The default is v-link-active. Links that match the rules will be added with the class name set by linkActiveClass.

SaveScrollPosition, which defaults to false and is only available under H5 history, resets the page scrolling position when you click back and press twist.

TransitionOnLoad, which defaults to false, indicates whether the transition effect is used when the component is first loaded in router-view

SupppressTransitionError, default false, when set to true, the exception occurred in the scene switch hook function will be ignored

4.route hook function

CanActivate (), called before the component is created

Activate (), called when the component is created and is about to load

Data (), after activate, used to load and set data for the current component

CanDeactivate (), called before the component is removed

Deactivate (), called when the component is moved out

CanReuse (), which determines whether the component can be reused

5. Properties and methods of routing instance

Router.app, the Vue root instance of route management

Router.mode, which can be H5, hash, and abstract

Router.stop (), stop listening for popstate and hashchange events

Router.map (), the way to define routing rules

Router.on (), add a top-level routing configuration

Router.go (path), jump to a new route

6.vue-router2.0 changes: initialization mode, routing rule configuration and startup mode, cancellation of v-link use, etc.

B.Vue-resource

C.Vue-devtools

VIII. Vue.js project example

a. Preparatory work

1.webpack is a module loading and processing tool, which can function and process all kinds of resources, such as JS (including JSX), coffee, style (including less/sass), pictures, etc., as modules. It can compile js files of ES6 syntax, sass styles and other languages that cannot be directly used in browsers into forms supported by browsers, and it can also merge, compress and confuse needed files.

2.vue-loader is a loader loader of webpack, which is used to process the .vue files we wrote. You can put the html, css and js of a component in a file and wrap them with different tags.

b. Directory structure

1.vue-cli tool, after global installation of npm, can be vue init webpack, including five kinds of scaffolding: webpack, webpack-simple, browerify, browerify-simple, simple

State management: Vuex

1.Vuex is an implementation library of state management pattern, which is mainly used in conjunction with Vue.js in the form of plug-ins, which enables us to manage complex component event flows in Vue.js. The core concepts include Store (repository), State (state), Mutations (change), and Actions (action).

10. New features of Vue.js 2.0

A.Render function

1. Provides a higher degree of freedom in template programming capabilities, not limited to previous v-if/v-else instructions

b. Server rendering

Thank you for your reading, the above is the content of "what are the basic features of Vue.js". After the study of this article, I believe you have a deeper understanding of what the basic characteristics of Vue.js are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.