preface

The first time I touched vUE was in my personal project. The front-end framework was bootstrap+ VUE. At that time, I did not use complicated things, such as Webpack and CLI. When I came into contact with VUE in the company’s project, I saw some scaffolding and thought it was necessary to have a look at it. Before I came to the company, I began to understand it in bits and pieces, so I took this opportunity to sort out the content about VUE

The significance of this article

I just mentioned what vUE should learn, which content is important, where to learn and how to learn efficiently. Experience is always someone else’s. If you want to really learn something, you still need to settle down and learn.

The preface is not as sour as the text

Vue is a front-end framework similar to the Spring framework in Java. Back to the theme, I studied the Spring framework systematically at first, and then used the Spring framework to carry out several projects independently. It’s also an introduction to the Spring framework. However, it also took a lot of time, for time-constrained workers, as a backend can not be as systematic as Spring to learn. But also have to learn, really expect to use JQ to walk the world? ** But why do we need to understand the front end framework for the back end? ** Actually stem IT this line also do not have to divide so clear, even if you now completely do not touch the front end, also do not guarantee not to touch IT later, stem IT, note helpless pain. Entering this industry is doomed to continuous learning, and AS vUE is the most popular framework in the front end, I think it is necessary to understand.

To what extent do back-end programmers learn?

This should be the next question, there is not much about this problem on the Internet, I will share my understanding, of course, the more the better

  • At least I can read the vUE code in my hand
  • Familiar with common project techniques such as bidirectional binding, event invocation, and asynchronous transfer
  • Understand componentized development, front-end modularization, Webpack, CLI
  • You don’t have to do the project, but you have to be clear

Why does vUE and JQ not smell good?

When you learn vue, JQ really doesn’t smell good. Vue’s biggest features: ** Data and page decoupling. ** Can you imagine what the $conflict feels like in JQ? I have, and it seems that vue’s block-level control has no such concerns

I have not used VUE to do projects, how can I learn efficiently?

A lot of people recognize learning in projects, you haven’t done it, that’s ok, I have. So I will also tell you vue need to learn some core things, if you want to learn systematically, recommend B station, I have watched half of the previous (90 to set), he spoke of fine, so dry things you have to sum up yourself, I often watch video dozing, love, back to high school feeling. Learning is so dull and insipid

What are the core technologies of VUE project?

At that time, I used Springboot to make an online novel reading system, and bootstrap+ Vue was used in the front end

At that time, vUE was mainly about bidirectional binding, asynchronous data acquisition, data traversal to the page, event binding and listening

The project I am taking over is very comprehensive, and there is a separate VUE front-end system, which I will share when I know better

Bidirectional binding is required

What is bidirectional binding? You bind an object and the value of the object is displayed in the input box, and if you change one side, the other side changes, so that’s bidirectional binding.

The principle of bidirectional binding MVVM

MVVM full name Model-view-viewModel 1, M represents the obJ (new Vue) out of the 2, V represents DOM(HTML + CSS) 3, VM represents listening M modify V, is the key point of bidirectional binding

How does MVVM work?

The ViewModel allows the DOM in OBJ to be displayed in real time via bind, listens for DOM events via Listener, and modifs data via method

An instance in a VUE object

El: type string, which determines which part of the DOM you manage. This is also an advantage of Vue. Two days ago, when I introduced JQuery to develop requirements and used AJAX, there was a $conflict. There were so many codes that I couldn’t find the point of conflict, and I didn’t know the cause of the conflict. Although I finally solved the problem by changing the name, it would also reduce work efficiency to deal with this problem.

Data: Type Object, vUE needs to store the data object, here can store the object type is also relatively rich

Method: type function that defines methods that can be called by instruction or from elsewhere

The following is the key summary in my follow-up learning process, you can not see

Hook function

That is the life cycle, no matter who the life cycle is from creation to destruction, the previous servlet, threads and so on are the same, so I learn a lot of things, feel a lot of the same. The hook function lets you know how elements are loaded in different functions, so you can customize the function to choose which life cycle to load. (It’s better to write the code yourself.)

Beforecreated: Neither EL nor data are loaded

Created: Data completes initialization, el does not

Beforemount: Initialization of EL and data is complete

Mounted: The vm is mounted

Method of calculation

Computed data is recommended when performing front-end calculations. Compared with methods, the former is only loaded once in the cache, with higher performance and equivalent to static attributes.

Let and var

In fact, the design of var can be regarded as a mistake in the design of JavaScript language, which can not be fixed or removed. One person fixed this problem by adding a keyword: let, so let can be regarded as a more perfect VAR

Why not use var? (At the point)

Js is not a strongly typed language like Java, so there is a problem of scope. In Java, you can int I every time in a for loop, but you can’t var I.

Js uses var to prove a variable. The scope is mainly related to the definition of the function

There is no scope for other definitions, such as if and for, so there are some problems in development, not to mention that the last button is always clicked

While closures can solve the problem of scope, they are less productive, and programmers should spend their time on business logic rather than language pitfalls.

Const modifier variable

Const, which is equivalent to final in Java, cannot be modified and must be initialized. Generally used to define Vue objects and constants. The identifier (ZHI) cannot change the direction, but can change the value of the direction. Const app = new Vue(){}

Short for es6 property

When can the () of a method be omitted

Two conditions must be met, similar to the following figure

1. Event monitoring

2. Methods have no parameters

When the condition is false, v-if does not exist in the DOM and v-show appears, adding a dispaly: None style. If v-show is frequently used, switch v-if only once

Let I in, where I is the current index, let I of, where I is the current object

How do YOU code if you need the following three requirements

  1. Filters the number less than 100 in the array
  2. The results will be screened out by X2
  3. Add up the results

The most direct method is the set of writing, officially called chain programming, also known as functional programming

If you understand the new features of Java8, you can also use **lambda programming **, more concise and clear

Componentized development part

What is componentization?

When people are faced with complex problems, we can deal with them in the following ways: 1. Everyone’s ability to deal with information logic is limited, so it is impossible to solve complicated problems. 2. The idea is the same. That is to divide a complex problem into many small problems to deal with, then the big problem as long as it is detailed enough, it will be easily solved

Componentization similar thoughts 1, if a page of all the processing logic all together in processing will become very complex, through this two days to do demand also could feel that not only includes the Java code in a JSP and HTML code, including CSS, js function, all on one page, looking for up trouble, The code is not good to watch. It is not conducive to subsequent management and expansion. 2, if you can divide a page into small function blocks, each function block to complete their own part of the independent function, then the subsequent management and maintenance is very easy.

** Components cannot directly access vUE instances. Data in components must be passed as function types, not object types. ** It is not allowed to be put into the vUE instance at the time of design, and the VUE instance will become very bloated. The VUE component has its own place to store data -template

Why do we need to pass a function in data?

If one kind of situation, you define a counter component, click on the increase or decrease each other, why, the role of this function will show up, every time I use components will always call a return to return a new object, so it is mutual influence, and this is why using the function.

Communication between parent and child components

The parent passes to the child through props

Children send information to their parents through events

What is Webpack?

Front-end modular packaging tool. Key word: pack

What is modularity?

Organize a large file into separate, interdependent modules. The module has many private attributes inside and only exposes some public interfaces (such as methods that can modify private attributes).

Benefits of modularity?

  • Avoiding naming conflicts (reducing namespace pollution)
  • Better separation, load on demand
  • Higher reusability
  • High maintainability

What is packing?

The packaging tool allows us to use import Export require when developing web pages, modularizing them like a back-end programmer.

The goal is to package it into a browser readable language that supports modular handling of relational dependency networks

When to use gulp?

The engineering is simple without modularity and requires simple consolidation and compression

Difference from Webpack?

Gulp emphasizes the automation of front-end process, modularization is not its core. Webpack emphasizes modularization development management, and file compression and merging are incidental functions

Webpack depends on the Node environment

Webpack only needs to type a file, it will automatically process the dependent files, the original browser is not supported, Webpack own implementation of JS code

Basic usage directive: webpack. / SRC /main.js./dist

The simple command: webpack, which automatically goes to webpack.config.js, looks like this

Module.exports = {// export file entry:'./main.js', // export output:{path:__dirname, filename:'build.js'}, };Copy the code

The NPM run build command is not used

Separate the HTML, CSS, and JS parts into the VUE file

<template> //html </template>
<style> //css</style>
<script>//js</script>
Copy the code

Simple directory structure

Vue vue file -package.json Project file (project dependencies, name, configuration), NPM init — yes generates this file -webpack.config.js webpack configuration file

Another core plugin for WebPack

What is the difference between plugin and loader?

Loader is mainly used to convert a module of a certain type. Plugin is a plug-in. It is an extension of Webpack itself

Steps to use plugin

Install webpack.config.js via NPM (some built-in plugins are not required)

Scaffolding section

What is a cli

When developing large applications with VUE, you need to consider code directory structure, project structure and deployment, hot loading, code unit testing, and so on

Scaffolding is there to help us do the work that needs to be done manually, and to build webPack configurations quickly

Prerequisites –Node

Node.js installation requires a minimum of 8.9

NPM Node package management tool

The WebPack template was used

All resources are compressed and optimized

The development process provides a complete set of functions, can make our development process more efficient

NPM install webpack -g Install webpack globally

use

Installation of scaffolding (installation method of 3)

npm install -g @vue/cli

Runtime +compiler and Runtime-only (recommended

Vue running process

The template – > parsed into ast (abstract syntax tree) — – > compiled to render – dom – > > into virtual to real dom – the UI

Run-time only goes directly to the Render phase, so it’s faster, with higher performance and less code

conclusion

I still have a lot to learn, and the best way to use my time is to learn in the project in the future. After I finish this new project, I will share some dry things about VUE, maybe my vision will be different then