1: Concept: what is vue
Vue is a progressive open source JavaScript framework for key user pages and a web application framework for creating SPA single-page applications. What Vue focuses on is the view layer in the MVC model. At the same time, it can also easily obtain data updates. And realize the interaction between the view and the model through the specific method of the internal component
See the meaning represented by the situation: less advocates, bottom-up, incremental development, build collections, easy to reuse
Features: data-driven (MVVM), component-based development, special instruction system
1. Data-driven: MVVM means: Model-View-ViewModelModel: model layer, responsible for processing business logic and interacting with the server View
: view layer: responsible for converting the data model into UI display, which can be simply understood as HTML Page ViewModel: View model layer, used to connect Model and View, is the communication bridge between Model and View
2. Component development: abstract various logics of graphics and non-graphics into a unified concept (component) to realize the development mode and
reduce the coupling degree of the whole system. While keeping the interface unchanged, we can replace different Components are quickly completed and
debugging is convenient. Since the entire system is composed of components, when a problem occurs, the component can be removed directly by troubleshooting, or the problem can be quickly located according to the component that reported the error. The reason why it can be quickly located is because each The components are low-coupling and have single responsibilities, so the logic will be simpler than analyzing the entire system to
improve maintainability. Since each component has a single responsibility and the components are reused in the system, optimizing the code can obtain Overall upgrade of the system
3. Instruction system: Directives are special attributes prefixed with v-. Function: When the value of an expression changes, its associated effects are applied to the DOM conditional rendering instruction V-if list rendering instruction in a responsive manner v-for attribute binding instruction v-bind event binding instruction v-on two-way data binding instruction v-model
2. Vue commonly used modifiers
V-on
.stop - Call event.stopPropagation(). Prevent default
event.prevent - Call event.preventDefault(). Prevents the default behavior.native - Listens to native events on the root element of the component.
v-bind
.prop - Bind as a DOMproperty rather than as an attribute. (What's the difference?)
.came1 - (2.1.0+) Convert kebab-caseattribute names to camelCase. (Supported since 2.1.0)
.sync (2.3.0+) Syntactic sugar, will be expanded into a v-on listener that updates the binding value of the parent component.
v-model
.lazy- replaces input to listen to change events-
input strings are converted to valid .number
numbers
.trim- input first star space filtering
3. Built-in components
component
renders a "metacomponent" as a dynamic component. Determine which component is dyed according to the value of is
In a multi-label interface, use the is attribute to switch between different components: the tap bar switching
transition
is used to provide a variety of different ways when Vue inserts, updates or removes the DOM Apply transition, animation effect
transition-group
<transition-group> is used to set transition animation for list system.
keep-alive
is mainly used to preserve the state of the component or prevent the component from re-rendering.
The include attribute is used to specify which components will be cached, and there are many ways to set them.
The exclude attribute is used to specify which components will not be cached.
The max attribute is used to set the maximum cache number
slot
name - string, used to name the slot <slot> element is used as the content distribution slot in the component template. The <slot> element itself will be replaced.
4. SPA Single Page Application
SPA (single-page application), translated as a single-page application SPA is a model of a web application or website.
It interacts with users by dynamically rewriting the current page. This method avoids switching between pages to interrupt the user experience. In a Single Page Application, all necessary code (HTML, JavaScript, and CSS) is retrieved with a single page load
or the appropriate resources are dynamically loaded as needed (usually in response to user actions) and added to the page at any point in time It will not reload, nor will it transfer control to other pages.
For example, if you go to work in the company, your wife will deliver you meals. The lunch box contains steamed stuffed buns in the morning, soy milk and fried dough sticks in the lunch box, and rice, noodles, and big chicken drumsticks in the lunch box at night. Loaded green salad with baked sweet potatoes. We found that the change is always the style of breakfast, lunch and dinner and the dishes in the lunch box, and the lunch box is always the same lunch box. The
JS frameworks we are familiar with, such as react, vue, and angular, all belong to SPA
4.1 Advantages and disadvantages of single page
1. Advantages:
It has the immediacy of desktop applications, the portability and accessibility of websites. The user experience is good and fast, and the content changes do not need to reload the entire page. 2. Disadvantages: The relatively slow
first
rendering speed is not conducive to search engines crawl
5. MVVM and MVC
MVC
M: model data model V: view view model, C: controller controller
is a layered architecture idea of the project, which separates complex business logic into small modules with a single function, and each module seems to be independent of each other , In fact, each has interdependence.
Its advantage is: to ensure the singleness of intelligence of the module, to facilitate the development and maintenance of the program, and to have a low degree of coupling.
mvm
M: model data model V: view view model, VM: viewModel The view data model
is already a two-way data binding mode. ViewModel is used to establish the connection between the model data layer and the view view layer. Data changes will affect the view view changes that affect the data