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

This article introduces the knowledge of "MVVM of Vue, how to use template syntax and data binding". In the operation of actual cases, many people will encounter this dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Vue Overview Vue official website

English official website: https://vuejs.org/

Chinese official website: https://cn.vuejs.org/

MVVM architecture model

Introduction to MVVM

MVVM consists of M:Model model, V:View view and VM:ViewModel view model (Vue instance object). The Model layer represents the data model, and the business logic for data modification and operation can also be defined in Model; View represents the UI component, which is responsible for transforming the data model into UI and displaying it. ViewModel is an object that synchronizes View and Model.

Under the MVVM architecture, View and Model do not have a direct connection, but interact through ViewModel. The interaction between Model and ViewModel is bi-directional, so the changes in View data will be synchronized to Model, and the changes in Model data will be immediately reflected on View.

ViewModel connects the View layer and the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention, so developers only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data state, complex data state maintenance is completely managed by MVVM.

MVVM pattern diagram

The design of Vue is inspired by the MVVM model

All the attributes in data end up on vm.

All attributes on vm and all properties on Vue prototypes can be used directly in Vue templates.

Introduction to Vue

Is a JavaScript MVVM library and a progressive framework for dynamically building a user interface

Vue is used to build a progressive framework for the user interface, which means to advocate the least. Each framework will inevitably have its own characteristics, which will have certain requirements for users, that is, the proposition that there are strong and weak, and its strength will affect the way it is used in business development.

Progressive: Vue can be applied layer by layer from bottom to top. Simple applications only need a lightweight and compact core library, while complex applications can introduce a variety of Vue plug-ins

Characteristics of Vue

Follow the MVVM pattern

Bidirectional data binding: vue.js automatically responds to changes in data and modifies all bound data and view contents according to the binding relationships pre-written by the user in the code

Componentization: through components, Vue.js splits various modules in a single-page application into a single component (component). We only need to write various component tags (occupied pits) in the parent application, and write the parameters to be passed into the component in the component tags (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of each component (fill in the hole). And then the whole application is done. The component mode is adopted to improve the code reuse rate and make the code easier to maintain.

The separation of view, data and structure, declarative coding: make the change of data easier, do not need to modify the logic code, do not need to operate DOM directly, only need to manipulate the data to complete the relevant operations and improve the efficiency of development.

Virtual DOM and diff algorithm: all kinds of calculations can be carried out through JavaScript in advance, and the final DOM operation can be calculated and optimized. Because this DOM operation belongs to preprocessing operation, there is no real operation DOM, so it is called virtual DOM. Finally, the DOM operation is actually submitted after the calculation, and the change of the DOM operation is reflected on the DOM tree.

two。 First acquaintance of Vue

For Vue to work properly, you must create an instance of Vue and pass in a configuration object

The code in the root container still conforms to the html specification, except that some special Vue syntax is added

The code in the root container is called the Vue template

Vue instances and containers correspond one to one

There is only one instance of Vue in real development and will be used with components

Xxx in {{xxx}} writes js expressions, and xxx can automatically read all attributes in data.

Pay attention to the distinction between js expressions and js code (statements) 1, expressions: an expression produces a value that can be placed anywhere a value is needed (1). A (2). Axib (3). Demo (1) / / function call expression (4). X = y? 'a':'b' / / ternary expression 2, js code (statement) (1). If () {} (2). For () {}

Once the data in the data changes, the places where the data is used on the page will be automatically updated.

Hello, {{name.toUpperCase ()}}, {{address}} Vue.config.productionTip = false / / prevents vue from generating production prompts at startup. / / create a Vue instance new Vue ({el:'#demo', / / el is used to specify which container service the current Vue instance is for. The value is usually a css selector string. Data: {/ / data is used to store data, and the data is used by the container specified by el. The value is temporarily written as an object. Name:'bilibili', address:' Shanghai'}) 3. Template syntax

There are two main categories of Vue template syntax:

1. Interpolation syntax:

Function: used to parse the tag body content (the tag body is in the middle of the start tag and the end tag).

Written as {{xxx}}, xxx is an js expression and can be read directly to all attributes in data.

2. Instruction syntax:

Function: used to parse tags (including: tag attributes, tag body content, binding events … ).

For example, xxx xxx also has to write js expressions and can read all the attributes in data directly.

Note: there are many instructions in Vue, and all of them are in the form of: v-xxx. Here we take v-bind as an example.

Interpolation syntax Hello, {{name}} instruction syntax point I go to {{address.name}} 1 point I go to {{address.name}} 2 Vue.config.productionTip = false / / prevent vue from generating production prompts at startup. New Vue ({el:'#root', data: {name:' monthly', / / can be set to a multi-level structure address: {name:' Baidu' Url:' http://www.baidu.com',})

4. Data binding

There are two ways of data binding in Vue:

1. One-way binding (v-bind): data can only flow from data to the page.

two。 Two-way binding (v-model): data can flow not only from data to the page, but also from the page to data.

Note:

Bidirectional bindings are generally applied to form class elements (such as input, select, etc.)

V-model:value can be abbreviated to v-model because v-model collects value values by default (value exists only for form class elements).

Unidirectional data binding: bidirectional data binding: bidirectional data binding: Hello Vue.config.productionTip = false / / prevent vue from generating production prompts at startup. New Vue ({el:'#root', data: {name:'bilibili'}}) 5. There are two ways to write el and data. 1. There are two ways to write el: new

Configure the el property when Vue.

First create an instance of Vue, and then specify the value of el through vm.$mount ('# root').

2. There are two ways to write data

Object type

Functional formula

How to choose: you can write either way, but when using components, data must use functions, otherwise an error will be reported.

3. An important principle:

Functions managed by Vue must not write the arrow function. Once the arrow function is written, this is no longer an instance of Vue, but a window.

Hello, {{name}} Vue.config.productionTip = false / / prevent vue from generating production prompts at startup. / / two ways to write el-const v = new Vue ({/ / el:'#root') / / the first way to write data: {name:'bilibili'}}) console.log (v) v.$mount ('# root') / / the second method / example: setTimeout () = > {v.$mount ('# root')}, 1000) / / timer: the page displays the vue effect / /-/ / two ways of writing data new Vue ({el:'#root') after 1 second. / / the first way of writing data: object form / * data: {name:'bilibili'} * / / the second way of writing data: functional form / / write data as a function And this function must return an object, functional writing is generally used for components and frameworks / / Note: this function is not called by itself, but data () {/ / console.log ('@', this) / / where this is a Vue instance object (when data is an ordinary function) called by Vue Otherwise, this refers to window) return {name:'bilibili'}) "Vue MVVM, template syntax and how to use data binding" will be introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.