I met the Vue

1. To make a Vue work, you need to create a Vue instance object, which is created using new Vue (options)

  1. The code in the root container is still HTML-compliant, but with some special Vue syntax mixed in

  2. The code in the root container is called a Vue template

  3. Vue instances and containers are one-to-one

  4. There is only one instance of Vue in real development, and it is used with components

  5. XXX in {{XXX}} will write js expressions, and XXX can automatically read all attributes in data

  6. Whenever the data in the data changes, the page where the data is used is automatically updated

Template syntax

There are two broad categories of template syntax:

1. Interpolation syntax:

Function: Used to parse the contents of the tag body.

Format: {{XXX}}

2. Instruction syntax

Function: Used to parse tags (including tag attributes, tag body contents, and binding events….)

For example, v-bind:href=” XXX”

Data binding

There are two ways to bind data in Vue:

1. V-bind: Data can only flow from data to the page.

2. Two-way binding (V-model) : Data can flow not only from data to pages, but also from pages to data.

V-models can only be applied to form class elements

Abbreviations:

V-model: Value can be shortened to V-model because v-model collects value values by default.

V-bind can be simply shortened to:

Two ways of writing data and EL

  1. El can be written in two ways:

(1) Configure the EL attribute when new Vue

$mount (‘#root’); $mount (‘#root’);

  1. Data can be written in two ways:

    (1) the object type

    (2) functional

    Be sure to write it as a function in a component and return it as an object

  2. An important principle:

    A vUe-managed function should never be written as an arrow function. Once written as an arrow function, this is no longer an instance of Vue, rather than a vUe-managed function

The MVVM model

  1. M: Model: data in data

  2. V: View: template code

  3. VM: ViewModel: Vue instance

Observations:

  1. All of the attributes in data end up in the VM.

  2. All attributes on the VM and all attributes on the Vue prototype can be used directly in the Vue template

Data proxy for Vue2

  1. Data proxy in Vue: Proxy operations (read/write) of properties in data objects through VM objects

  2. Benefits of data brokers in Vue:

    More convenient operation of data in data

  3. The basic principle of Vue2 data proxy

Add all attributes from the data Object to the VM via Object.defineProperty().

Specify a getter/setter for each property added to the VM.

To manipulate (read/write) the corresponding property in data inside the getter/setter.

Basic use of events

  1. Bind events using V-on: XXX or @xxx, where XXX is the event name

  2. Callbacks to events need to be configured in the Methods object, which will eventually be on the VM

  3. Functions configured in methods, do not use arrow functions! Otherwise this would not be a VM

  4. Functions configured in Methods are all functions managed by Vue, and this refers to a VM or component instance object.

  5. @click=”demo” and @click=”demo(event)” have the same effect, but the latter can pass, but notice that if you write it as demo() if you don’t pass event)” has the same effect, but the latter can pass, But notice that if you write it as demo() if you don’t pass the event)” is the same, but you can pass the event, but notice that if you write it as demo() if you don’t pass the event you lose the event object

Event modifier

  1. Prevent: prevent default events.

  2. .stop: Stops events from bubbling.

  3. .once: The event is triggered only once (common), as opposed to v-once, which is rendered once and then not again

  4. .capture: Uses the event capture mode

  5. .self: Fires an event only if event.target is an element of the current operation.

  6. . Passive: The default action of the event is executed immediately without waiting for the event callback to complete

Keyboard events

  1. Common key aliases in Vue:

    Enter = > enter

    Delete => DELETE (capture “Delete” and “backspace” keys)

    Exit = > esc

    Space = > space

    Newline => TAB (special, must be used with keyDown)

    = > on the up

    = > down under

    L = > left

    = > right right

  2. Vue keys that are not aliased can be unbound using the original key value of the key, but be sure to convert to kebab-case (short bar name).

  3. System modifier keys (special usage) : CTRL, Alt, Shift, Meta

    (1). Use with keyUP: Press the modifier key, then press other keys, and then release other keys to trigger the event.

    (2). Used with KeyDown: Events are normally triggered.

  4. You can also use keyCode to specify specific keys (not recommended)

  5. Vue. Config, keycodes. custom key name = key code, you can customize key alias

Calculate attribute

  1. Definition: the attribute to be used does not exist and is computed from an existing attribute.

  2. How it works: The bottom layer uses getters and setters provided by the Object.defineProperty method.

  3. When is the get function executed?

    (1). It will be executed once for the first read.

    (2). It will be called again when the dependent data changes.

  4. Advantages: Compared with methods implementation, internal cache mechanism, higher efficiency, convenient debugging.

  5. note

    1. Calculated attributes will eventually appear on the VM and can be directly read and used. 2. If the calculated property is to be modified, the set function must be written in response to the modification, and the set function to cause the data dependent on the calculation to change.

Monitoring properties

1. When the monitored attribute changes, the callback function is automatically invoked to perform related operations

  1. Monitoring properties must exist in order to monitor!! (If no attribute is written to the monitor, no error will be reported)

  2. Two ways to write monitoring:

    $watch is monitored by vm.$watch. The default value of “watch” is false

  3. Deep monitoring: (1) By default, watch in Vue does not monitor changes in internal values of objects (layer 1). (2) Configure deep:true to detect changes in internal values of objects (multiple layers). Note: (1) Vue itself can monitor the change of the internal value of the object, but the watch provided by Vue cannot by default! (2) When using Watch, decide whether to adopt deep monitoring according to the specific structure of data.

    Handler (newValue, oldValue) {// Write logic} // Watch: {isHot: {immediate: true, deep: true, handler: function(newValue, OldValue) {console.log('isHot changed ',newValue,oldValue,this)}}} Function (newValue, oldValue) {console.log('isHot changed ', newValue, oldValue)})Copy the code

5.Differences between COM Pute and Watch

Watch can complete all the functions that 1.computed can complete.

2. Functions that can be performed by watch may not be performed by computed. For example, watch can perform asynchronous operations.

Two important little principles:

1. Vue-managed functions are best written as normal functions so that this refers to a VM or component instance object

2. All functions not managed by Vue (timer callbacks, Ajax callbacks, promise callbacks, etc.) are best written as arrow functions. This then refers to the VM or component instance object.

Binding style:

  1. The class styles

    Class =” XXX “XXX can be a string, an object, or an array.

    Class =”‘string'”

    Class =”{class1: true, class2: false}” class=” class1: true, class2: false}” class=”{class1: true, class2: false}

    Array notation is useful for binding multiple styles with an indeterminate number of names.

    Class =”[class1, class2, class3]

    Object and array nesting:

    Class =”[{class1: true}, {class2: false}, {class3: true}]” class=”[{class1: true}, {class2: false}]

    Is not the class name

Conditions apply colours to a drawing

  1. v-if

    Writing:

    (1) v-if=” expression “(2) v-else=” expression” (3) v-else=” expression”

    Applicable to: Scenarios with low switching frequency

    Features: DOM elements that are not shown are removed.

    Note: V-if can be used with v-else and v-else, but the structure must not be interrupted.

2.v-show

V-show =” expression”

Applicable to: Scenarios with high switching frequency.

Features: DOM elements that are not displayed are not removed, just hidden with styles

3. Note: If v-if is used, elements may not be obtained. If v-show is used, elements must be obtained

The list of rendering

V – for instructions:

  1. Used to display list data

  2. V -for=”(item, index) in XXX “:key=”key”

  3. Traversable: arrays, objects, strings (rarely used), specified times (rarely used)

React and Vue keys

  1. Key functions in the virtual DOM:

    The key is the identity of the virtual DOM object, and when the data changes, Vue generates a new virtual DOM based on the new data

    Then Vue compares the difference between the new virtual DOM and the old virtual DOM, and the comparison rules are as follows:

    (1) The same key as the new virtual DOM is found in the old virtual DOM:

    (1.1) If the content in the virtual DOM remains unchanged, use the previous real DOM directly!

    (1.2) If the content in the virtual DOM changes, a new real DOM is generated and the previous real DOM in the page is replaced.

    (2) The same key as the new virtual DOM is not found in the old virtual DOM

    Create a new real DOM and then render it to the page.

  2. Possible problems with index as key:

    (1) If the data is added or deleted in reverse order, the sequence is broken;

    Produces unnecessary real DOM updates to the ==> interface, which is fine, but inefficient

    (2) If the structure also contains the input class DOM:

    The DOM update ==> interface is not working properly.

  3. How to select key in development?

    (1) It is better to use the unique identifier of each piece of data as the key, such as id, mobile phone number, ID number, student number and other unique values.

    (2) It is only used for rendering the list for display if there is no operation of breaking the order such as adding or deleting data in reverse order.

    There is no problem using index as the key

How Vue monitors data

  1. Vue monitors all levels of data in data.

  2. How do I monitor data in objects?

    Monitoring is implemented through setters and the data to be monitored is passed in at new Vue.

    (1) By default, Vue does not respond to the attributes appended to the object

    (2) If you need to respond to the attributes added later, please use the following API:

    Vue. Set (target, propertyName/index, value) or

    vm.$set(target, propertyName/index, value)

  3. How do I monitor the data in an array?

    By wrapping the array update element, we essentially do two things:

    (1) Call the corresponding native method to update the array.

    (2) Reparse the template to update the page.

  4. To modify an element in a Vue array, do the following:

  5. Use these apis: push, POP, Shift, unshift, splice, sort, reverse

2. Vue. The set () or vm. $set ()

Note: Vue.set() and vm.$set() cannot add attributes to a VM or its root data object!

Collect form data

If:, then v-Model collects value and user input is value.

If:

  1. If the value attribute for input is not configured, checked is collected.

2. Configure the input value property:

(1) The initial value of the V-model is not an array, then checked is collected (checked or unchecked is a Boolean value)

(2) The initial value of v-Model is an array, so the collection is an array of values

Note: Three modifiers for v-model:

Lazy: Data is collected after losing focus

Number: Converts the input string into a valid number

Trim: Enter the first and last Spaces

The filter

Filter definition: the data to be displayed is formatted specifically before it is displayed (for some simple logic processing).

Grammar:

  1. Filter (name, callback) or new Vue({filters: {}})

  2. Use filter: {{XXX | filter name}} or v – bind: attribute = | filter name “XXX”

Remark:

  1. Filters can also receive additional parameters, and multiple filters can be connected in series

  2. It doesn’t change the original data, it generates new corresponding data

Built-in commands

To review the instructions we learned:

V-bind: a one-way binding parsing expression, abbreviated as XXX

V-model: bidirectional data binding

V-for: Iterates over a number/object/string

V-on: Binds event listeners, which can be abbreviated as @

V-if: conditional rendering (dynamic control whether the node exists or not)

V-else: Conditional rendering (dynamic control whether the node exists or not)

V-show: conditional rendering (dynamic control whether nodes are displayed)

V – text instructions:

1. Function: Render text content to its node.

2. The difference with interpolation syntax: V-text replaces the contents of the node, {{xx}} does not.

V – HTML commands

V – HTML commands:

1. Function: Render content containing HTML structure to a specified node.

2. Differences with interpolation syntax:

(1). V-html will replace all content in the node, {{xx}} will not.

(2). V-html can recognize HTML structure.

3. Serious note: V-HTML has security problems ！！！！

(1). Dynamic rendering of arbitrary HTML on a website is very dangerous and can easily lead to XSS attacks.

(2). Always use V-HTML for trusted content, never user-submitted content!

V – clock instruction

V-cloak instruction (no value) :

1. The v-cloak property is a special property that will be deleted when the Vue instance is created and takes over the container.

2. Use CSS and V-cloak to solve the problem that {{XXX}} is displayed when the network speed is slow.

V – once the instructions

V – once the instructions:

1. The node where v-once resides is regarded as static content after the initial dynamic rendering.

2. Future data changes will not cause the structure of V-once to be updated, which can be used to optimize performance.

V – pre order

V – pre instructions:

1. Skip the compilation process of the node where the node resides.

2. Can use it to skip: no instruction syntax, no interpolation syntax of the node, will speed up the compilation.

Custom instruction

Summary of custom instructions:

// The first way to define a local directive

new Vue({

Directives :{directives: configured object}

})

// Local directives are defined in the second way

new Vue({

Directives :{directives: callback function}

})

// Global directives

Directive (directive name, configuration object) or vue. directive(directive name, callback function).

(1).bind: called when the instruction is successfully bound to an element.

(2).inserted: Called when the element of the directive is inserted into the page.

(3). Update: called when the template structure where the instruction resides is re-parsed.

Iii. Remarks:

1. Instructions are not defined with v-, but used with V -;

2. If the command name is multiple words, use kebab-case instead of camelCase.

The life cycle

  1. Also known as: lifecycle callback functions, lifecycle functions, lifecycle hooks, are the special names that Vue provides to call at critical moments.

  2. We cannot change the name of the lifecycle function, but the details of the function are written by the programmer according to the requirements.

3. The this in the lifecycle function refers to the VM or component instance object

Basic use of non-single-file components

Three steps to using components in Vue:

Define component (create component)

2. Register components

3. Use component (write component tag)

How to define a component?

Create with vue.extend (options), where options and new Vue(options) passed the same options, but there are a few differences;

The differences are as follows:

1. Don’t write el. Why? Ultimately, all components are managed by a VM, and the EL in the VM decides which container to serve.

2. Data must be written as a function. Why? ———— Prevents data from being referenced when components are reused.

Note: You can configure the component structure using template.

How to register a component?

1. Partial registration: Pass in the Components option when relying on new Vue

2. Global registration: by Vue.component(‘ component name ‘, component)

3. Write component tags: for example:

A few points to note about components

A few notes:

1. About component names:

One word:

First (lowercase) : school

Second (capital letter) : School

Multiple words:

The first (kebab-case naming) is my-school

Second (CamelCase naming) : MySchool (requires Vue scaffolding support)

Remark:

(1). Avoid existing HTML element names as much as possible, such as h2 or h2.

(2). You can use the name configuration item to specify the name of the component to render in the developer tools.

2. About component labels:

The first way:

The second way is:

Note: When scaffolding is not used, subsequent components cannot be rendered.

3. A shorthand:

Const school = vue. extend(options)

About VueComponent:

1. The school component is essentially a constructor named VueComponent, which is not defined by programmers but generated by vue.extend.

2. We only need to write or Vue will help us create the instance object of the School component, that is, Vue will help us implement: new VueComponent(options).

3. Special note: Each call to vue.extend returns a brand new VueComponent！！！！

4. This refers to:

(1) component configuration:

The data function, the function in methods, the function in watch, and the function in computed are VueComponent instance objects.

(2). New Vue(options) configuration:

The data function, the function in methods, the function in watch, and the function in computed are all Vue instances.

5.VueComponent instance object, hereafter referred to as VC (also known as: component instance object).

Vue instance object, hereafter referred to as VM.

An important built-in relationship

1. An important internal relationships: VueComponent. Prototype. The proto = = = Vue. The prototype

2. Why there is this relationship: Give component instance objects (VC) access to properties and methods on the Vue prototype.

Scaffolding file structure

About the different versions of Vue

The difference between vue.js and vue.runtime.xxx.js:

Vue. Js is the full version of VUE, including: core features + template parser. Vue runtime.xxx.js is a running version of vue, which contains only: core functions; There is no template parser.

Since vue.runtime.xxx.js does not have a template parser, you cannot use the template configuration item. You need to use the createElement function received by the Render function to specify the contents.