Preface: This note is through the study by still silicon Valley day yu teacher speaking Vue technology family barrel tutorial (currently recognized B station best Vue tutorial) synchronous induction and sort out, if there is not enough advice! On course links: www.bilibili.com/video/BV1Zy…

Chapter 1 Vue core

1. Basic understanding

1.1 website

English website: vuejs.org/

Cn.vuejs.org/

1.2 Introduction and Description

1. Progressive JavaScript frameworks that dynamically build user interfaces

1.3 the characteristics of

  1. Follow the MVVM pattern
  2. Simple coding, small size, high operating efficiency, suitable for mobile /PC development
  3. It focuses solely on the UI itself and can easily introduce vUE plug-ins or other third-party library development projects
  4. Componentized mode is adopted to improve code reuse rate and make code easier to maintain
  5. Declarative coding eliminates the need for coders to directly manipulate DOM and improves development efficiency
  6. Use virtual DOM and Diff algorithms to reuse DOM nodes as much as possible

1.4 Association with other front-end JS frameworks

Use Angular templates and data binding techniques and React componentization and virtual DOM techniques

1.5 Method of introducing vue.js

  • Local introduction
  • Introduced the CDN

2. Create Vue objects

  1. For Vue to work, you must create an instance of Vue and pass in a configuration object.
  2. The code in the root container is still HTML compliant, but with some special Vue syntax mixed in.
  3. The code in the root container is called the Vue template;
  4. Vue instances and containers are one-to-one;
  5. There is only one instance of Vue in real development, and it is used with components;
  6. {{XXX}} in XXX to write JS expression, and XXX can automatically read all attributes in data;
  7. Whenever the data in the data is changed, the page where the data is used is automatically updated; ,
// Create vue instance new vue ({el:'#root',// to specify which container is used for the current vue instance data:{// to store data for the container specified by el to use name:' haoyue '}})Copy the code

Note the distinction between: JS expressions and JS code (statements)

Expression: An expression yields a value, which can be placed wherever the value is needed: (1).a (2).a +b (3).demo (1) (4).x === y? ‘a’ : ‘b’

(1).if (){} (2).for (){}

2.1 el

Specifying the root Element (selector)

2.2 the data

Initialize data (page accessible)

Two ways to write el and data

There are two ways to write el

(1) Configure the EL attribute when new Vue.

Const v = new Vue({el:'#root', const v = new Vue({el:'#root', const v = new Vue({el:'#root', //Copy the code

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

Const v = new Vue ({data: {name: 'timing'}}) v. $mount (' # root) / / the second writing * /Copy the code

There are two ways to write data

(1) the object type

Data :{name:' haoyue '}Copy the code

(2) functional

Data (){console.log('@@@',this) // this is a Vue instance object return{name:' haoyue '}}Copy the code

How to choose: Either way you can write it now. In the future, when you learn about components, data must be written in functional form or an error will be reported.

  1. An important principle

For functions managed by Vue, do not write arrow functions. Once arrow functions are written, this is no longer a Vue instance.

Template syntax

3.1 Understanding of templates

HTML contains some javascript syntax codes, which are:

Differential syntax: Double brace expressions (” Mustache “syntax)

Instruction syntax: Instruction (custom tag attributes beginning with V – – – essence)

3.2 Difference syntax

1. Function: It is used to parse label body content and output data to the page

{{XXX}}, XXX is a js expression, and can directly read all attributes in data

3.3 Instruction Syntax

1. Function: Parse tag attributes, contents of tag bodies, and binding events

Built-in commands

v-bind
  • The V-bind directive is used to update HTML attributes in response
  • Href = “XXX” href= “XXX”
v-model
  • Two-way data binding
  • 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

v-on
  • The callback function used to bind the specified event name (event listener)
  • V-on :click= “XXX”
v-text
  • Renders text content to its node.
  • Difference from interpolation syntax: V-text replaces the contents of a node, {{xx}} does not.
v-html
  • Renders content containing HTML structure to the specified node.
  • Differences from interpolation syntax:

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

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

  • Serious note: V-HTML has security issues ！！！！

    (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-cloak
  • The v-cloak property is essentially a special property (with no value) that will be dropped when the Vue instance is created and takes over the container
  • The PROBLEM that {{XXX}} is displayed when the network speed is slow can be solved by using CSS and V-cloak
<style> [v-cloak]{ display:none; {{name}}< h2 V-cloak >{{name}}</h2> // Lazy-loaded JS resources <script Type = "text/javascript" SRC = "http://localhost:8080/resource/5s/vue.js" > < / script > < / body > data: {name: 'timing'}Copy the code
v-noce
  • The v-once node is treated as static after the first dynamic rendering (only done once)
  • Future data changes will not cause the update of the v-once structure, which can be used to optimize performance.
v-pre
  • Skip the compilation of the node
  • This command can be used to skip: nodes without command syntax and difference syntax, which can speed up compilation (optimize page loading and improve efficiency)
v-for
  • Iterate over groups/objects/strings
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 or not)

Custom instruction

Define syntax:

Global registration

Directive (' directive name ', {// Configures the object... }}) or the Vue. Directive (' instruction names', function () {/ / callback function... }})Copy the code

Local registration

New Vue({directives:{directive name :{// directives object}}}) or new Vue({directives:{function(){// callback function}}})Copy the code
Configure the callback function in the object:
  1. Bind: called when a directive 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 of the directive is reparsed.

Example:

To define av-fbindDirective that makes it boundinputThe element gets focus by default.

<input type="text" V-fbind :value="n"> data:{n:1}, cache :{// When will the fbind function be called? 1. When the directive is successfully bound to the element (first up). 2. When the template where the instruction resides is parsed again. Fbind :{// The first argument is the DOM instance of the tag of the custom directive, Bind (Element,binding){element.value = binding.value}, Insert (element,binding){element.focus()} Update (element,binding){element.value = binding.value}}Copy the code

Points to pay attention to

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.

< H2 > for 10 times the REPORTED N values are: < SPAN V-big-number =" N "></ SPAN > directives:{// Note: 'XXX' 'big-number'(element,binding){element.innerText = binding. Value * 10}}Copy the code

\

4. Data binding

One-way data binding (V-bind) : Data can only flow from data to pages

Syntax: v-bind:value =” XXX”

Two-way data binding (V-mode) : Data flows not only from data to the page, but also from the page to data, typically applied to form-class elements (the value dialog)

Syntax: v-mode:value=” XXX”

5. MVVM model

M — Model: data in data

V — View: template code (that is, HTML page)

Vm — ViewModel: the ViewModel is an instance of a Vue that connects data to the view layer

  • Dom Listeners
  • Data Bindings
  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.

conclusion

MVVM is essentially an improved version of MVC (Model-View-Controller). Model-view-viewmodel.

The model refers to the data passed by the back end, and the view refers to the page seen.

The viewModel is the core of the MVVM pattern and serves as the bridge between the View and the Model. It has two directions:

  • Turn the model into a view, turning the data passed by the back end into the page you see. This is done by data binding
  • Turn the view into a model, that is, turn the page you see into data on the back end. This is done by DOM event listening

Both directions are implemented, which we call bi-directional data binding