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

This article mainly explains "what are the basics of Vue.js". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what are the basics of Vue.js"?

First, meet Vue.js

1.MVP, evolved from MVC, Controller/Presenter is responsible for logical processing, sharing View and Model completely. The main program logic is implemented in Presenter, which is not directly related to the specific View, but interacts through defined interfaces, so that the Presenter can be kept unchanged when the View is changed.

2.MVVM, just change MVC's Controller and MVP's Presenter to ViewModel,View, the changes will be automatically updated to the ViewModel,ViewModel, and the changes will be automatically synchronized to the View.

II. Data binding

III. Instructions

1. The Directive is a special feature with the prefix v -. The value limit of the instruction is set to the binding expression. The duty of the instruction is to apply some special behavior to the DOM when the value of the expression changes.

2.v-if has a higher switching cost, while v-show has a higher initial rendering cost. Therefore, it is better to use v-show if you need to switch frequently, or v-if if the conditions are unlikely to change at run time

The 3.v-model instruction parameter: number, which automatically converts the user's input to the Number type; lazy, which changes the data to occur in the change event; and debounce, which sets a minimum delay to synchronize the value of the input box with the data after each knock.

4. You should try to avoid directly setting array elements for data binding, as these changes will not be detected by Vue.js and therefore will not update the view rendering

5. Using v-for, you will get a special scope, similar to the isolation scope of AngularJS. You need to explicitly specify the props attribute to transfer data, otherwise the data will not be obtained in the component.

Fourth, calculation attributes

A calculated property means that when the value of its dependent property changes, the value of this property is automatically updated, and the related DOM parts are also updated synchronously.

Fifth, form control binding

1. Multiple check boxes are placed in an array

two。 When the selected option has a value attribute, vm.selected is the value of the corresponding option; otherwise, it is the text value of the corresponding option

VI. Filter

1. The filter is essentially a function, and its function is that after the user enters the data, it can process it and return a data result; the filter function will always take the value of the expression as the first parameter, and the parameter in quotation marks will be treated as a string, while the parameter without quotation marks will be treated as the name of the data attribute.

two。 Built-in filter:

Letter operation: capitalize, uppercase, lowercase

Json filter: son

Restrictions: limitBy, filterBy, orderBy process and return filtered array

Currency filter: converting numeric values to monetary output

Debounce filter: delay processor execution for a certain amount of time

7. Bind Class to Style

1. Can be passed to v-bind:class an object to dynamically switch class,v-bind:class instructions can coexist with normal class features

2.v-bind:style binds inline css

VIII. Filtering

The 1.transition feature can be used with these resources: v-if, v-show, v-for, dynamic components

two。 Built-in Class class name: .xxx-transition, .xxx-enter, .xxx-leave

3. When using only js hooks, explicitly declare that css:false,Vue.js will skip CSS detection for js transitions, which also prevents css rules from interfering with transitions

IX. Method

1. All Vue.js event handling methods and expressions are strictly bound to the ViewModel of the current view

two。 It should be noted that:

The this within the method defined in methods always points to the created Vue instance

Methods bound to events support the input of the parameter event, that is, native DOM events.

You can only listen for native DOM events when the method is on ordinary elements, and you can also listen for custom events triggered by subcomponents when used on custom element components

3. Four event modifiers: .modifier, .stop, .capture, .self

10. Vue instance method

1. Component tree access: $parent, $root, $children, $refs

2.DOM access: $el, $els

3. Data access: $data, $options

4. Example methods: $appendTo (), $before (), $after (), $remove (), $nextTick ()

5. Instance event method: $on (), $once (), $emit (), $dispatch (), $broadcast (), $off ()

11. Components

The components of 1.Vue.js can be understood as ViewModel classes with predefined behavior. A component can predefine many options, but the core one is:

Template (template), initial data (data), accepted external parameters (props), method (methods), Lifecycle Hook function (lifecycle hooks)

2.props is a field of component data that is expected to be passed from the parent component. The scope of the component is isolated, which means that the data of the parent component cannot and should not be referenced directly in the template of the child component, so the child component needs to explicitly use the props option to obtain the data of the parent component.

3. Component communication: this.$parent, this.$children, this.$root, but child components should avoid directly relying on the data of the parent component, and try to explicitly use props to transfer data. It is a very bad practice to modify the state of the parent component in the child component, which will lead to tight coupling between the parent and the child. It is difficult to understand the state of the parent component.

4.solt as the slot of the original content, the content of the parent component will be discarded, unless the child component template contains, the content of the tag is treated as fallback content, the fallback content is compiled in the scope of the child component, and the fallback content is displayed when the host element is empty and no content is inserted.

5. Blending provides distributed utilization for components in a flexible way. Blending objects can contain any component options. When components use mixed objects, all options for blending objects will be "mixed" into the component's own options.

6. Life cycle: init, created, beforeCompile, compiled, ready, attached, detached, beforeDestory, destroyed

12. Form verification

1.vue-validator

2.v-validate instruction syntax: v-validate [: field] = "array literal | object literal | binding"

3. Built-in verification rules: required, pattern, minlength, maxlength, min, max

4.v-validate element, events that can be listened to: valid, invalid, touched, dirty, modified

XIII. Communicate with server

1.vue-resource

2.vue-async-data, a plug-in for asynchronously loading data status indication, does not support the function of obtaining server-side data asynchronously, only indicating whether the data is currently loaded or has been loaded

Routing and View

1.vue-router

2.vue-router hook functions: canReuse, canActivate, activate, data, canDeactivate, deactivate

15. Vue-cli

1. Quickly generate a project built on Webpack: vue init webpack my-project

two。 Supported commands: vue init; vue list

Test, development and debugging

1.ESLint

two。 Toolkits: eslint-loader, eslint-friendly-formatter, eslint-config-standard, eslint-plugin-html

3. Development tools: Vue Syntax Highlight, Snippets (sublime), VUe.js (WebStorm), Vue (Visual Studio Code)

4. Debugging tool: Chrome--Vue.js devtools

XVII. Chemical reaction of Scrat+Vue.js

1. Front-end engineering: development specification, modularization, componentization, component library, performance optimization, project deployment, development process, engineering tools

2.Scrat is a webapp modular development framework developed by the UC team on the basis of Baidu FIS. The biggest feature is modular development and module ecology. The idea is to develop and maintain the system like building blocks, and get a complete system by assembling modules.

XVIII. Vue.js2.0

1.Virtual DOM: build a real DOM tree through the tree structure represented by the JS object. When the data state changes, you can directly modify the JS object, then compare the modified JS object, record the DOM operations that need to be done on the page, and then apply it to the real DOM tree to update the view. This process is the core idea of Virtual DOM.

two。 Server rendering advantages: faster rendering speed on the first screen, SEO, less HTTP requests

XIX. Source code-- util

1.env:

System judgment: inBrowser, isIE9, isAndroid, isIos, isWechat

Attribute support: hasProto

Filter attributes: transitionPrep, transitionEndEvent, animationProp, animationEndEvent

2.dom:

Dom operations: query, inDoc, before, after, prepend, extractContent, remove, replace, trimNode, isTemplate, isFragment, getOuterHTML

Attribute operations: getAttr, getBindAttr, hasBindAttr

Class operations: setClass, addClass, removeClass

Event actions: on, off

Others: cateAnchor, findRef, mapNodeRange, removeNodeRange

3.lang:

Object manipulation: set, del, hasOwn, extend, isObject, isPlainObject, def

Name conversion: classify, hyphenate, camelize

Array operation: indexOf

Type conversion: _ toString, toNumber, toBoolean, toArray

Method binding: bind

Others: debounce, stripQuotes, cancellable, looseEqual, isLiteral, isReserved

4.components:commonTagRe 、 reservedTagRe 、 checkComponentAttr

5.options:mergeOptions 、 resolveAsset

6.debug:warn

At this point, I believe you have a deeper understanding of "what are the basics of Vue.js?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.