Vue basics MVVM, template syntax and data binding

1. Vue Overview

Vue official website

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

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

MVVM architectural pattern

Introduction to MVVM

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

Under the MVVM architecture, there is no direct connection between View and Model. Instead, they interact through ViewModel. The interaction between Model and ViewModel is two-way, so changes in View data will be synchronized to the Model, and changes in Model data will be immediately reflected in the 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 and does not require human intervention. Therefore, developers only need to focus on business logic and do not need to manually operate DOM or worry about data status synchronization issues. Complex data status maintenance is completely managed by MVVM.

MVVM pattern diagram

• Vue's design is inspired by the MVVM model
• All the attributes in data finally appear on vm.
• All the attributes of vm and All on Vue prototype Attributes, both available in Vue templates Use directly.

Introduction to Vue

• It is a JavaScript MVVM library, a set of dynamic user interface construction Progressive Framework
• Vue is a progressive framework for building user interfaces. Progressive means: least assertive. Each framework will inevitably have its own characteristics, and thus will have certain requirements for users. These requirements are claims, which can be strong or weak, and their strength will affect the way they are used in business development.
• Progressive: Vue can be applied layer by layer from the bottom up. Simple applications only need a lightweight core library, and complex applications can introduce a variety of Vue plug-ins

Vue Features

• Follow the MVVM pattern
• Two-way data binding : Vue.js will automatically respond to changes in data and modify all bound data and view content according to the binding relationships pre-written by the user in the code.
• Componentization : Vue.js uses components to split various modules in a single-page application into one In a separate component, we only need to write various component tags in the parent application (occupying holes), and write the parameters to be passed into the component in the component tag (just like passing parameters to a function, this parameter is called the component's property), and then write the implementation of various components separately (filling holes), and then the entire application is completed. Adopt a componentized model to increase code reuse and make the code easier to maintain.
• Separation of views, data, and structure , Declarative coding: It makes data changes easier. There is no need to modify the logic code or directly operate the DOM. You only need to operate the data to complete related operations, thus improving development efficiency.
• Virtual DOM and diff algorithm : Various calculations can be performed in advance through JavaScript to calculate and optimize the final DOM operation. Since this DOM operation is a preprocessing operation and does not actually operate the DOM, it is called virtual DOM. Finally, after the calculation is completed, the DOM operation is actually submitted and the changes in the DOM operation are reflected in the DOM tree.

2. Getting started with Vue

• For Vue to work properly, you must create a Vue instance and pass in a configuration object;
• The code in the root container still complies with the HTML specification, but with some special Vue syntax added;
• The code in the root container is called a Vue template;
• Vue Instances and containers are One to one correspondence;
• Real development There is only one Vue instance, and it will be used with the components;
• The xxx in {{xxx}} needs to be a js expression, and xxx can automatically read all the attributes in data;

  Pay attention to the difference between js expressions and js codes (statements)
  1. Expression: An expression produces a value and can be placed anywhere a value is required (1).
  	(2). a+b
  	(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 data changes, the places where the data is used in the page will also be automatically updated;

<!-- Prepare a container -->
<div id="demo">
	<h1>Hello, {{name.toUpperCase()}}, {{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
//Create a Vue instance new Vue({
		el:'#demo', //el is used to specify which container the current Vue instance serves. The value is usually a CSS selector string.
		data:{ //data is used to store data. The data is used by the container specified by el. We will temporarily write the value into an object.
		name:'bilibili',
		address:'Shanghai'
		}
	})
</script>

3. Template Syntax

There are two main categories of Vue template syntax:

1. Interpolation syntax:

• Function: Used for Parse the tag body content (the content between the start tag and the end tag is the tag body).
• Writing method: {{xxx}}, xxx is a js expression, and all attributes in data can be directly read.

2. Command syntax:

• Function: Used for Parse tags (including: tag attributes, tag body content, binding events...).
• For example: v-bind:href="xxx" or abbreviated as: href="xxx", xxx also needs to be written as a js expression, and all attributes in data can be directly read.
• Note: There are many instructions in Vue, and they are all in the form of: v-xxx. Here we take v-bind as an example.

<!-- Prepare a container -->
<div id="root">
	<h1>Interpolation Syntax</h1>
	<h3>Hello, {{name}}</h3>
	<hr/>
	<h1>Command Syntax</h1>
	<a v-bind:href="address.url.toUpperCase()" x="hello">Click me to {{address.name}}1</a>
	<a :href="address.url" x="hello">Click me to go to {{address.name}}2</a>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
	new Vue({
		el:'#root',
		data:{
			name:'月见',
			// Can be set to a multi-level structure address:{
				name:'Baidu',
				url:'http://www.baidu.com',
			}
		}
	})
</script>

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.

2. Two-way binding (v-model) ： Data can not only flow from data to page, but also from page to data.

Remark:

• Bidirectional binding is generally used in On form elements (such as input, select, etc.)
• v-model:value can be abbreviated as v-model, because v-model collects value by default (only form-like elements have value).

<div id="root">
	<!-- Normal writing -->
	One-way data binding: <input type="text" v-bind:value="name"><br/>
	Two-way data binding: <input type="text" v-model:value="name"><br/>
	<!-- Abbreviation -->
	One-way data binding: <input type="text" :value="name"><br/>
	Two-way data binding: <input type="text" v-model="name"><br/>
	<!-- The following code is wrong, because v-model can only be applied to form elements (input elements)-->
	<h2 v-model:x="name">Hello</h2> 
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
	new Vue({
		el:'#root',
		data:{
			name:'bilibili'
		}
	})
</script>

5. Two ways to write el and data

1. There are two ways to write el: new

• Configure the el attribute when using Vue.
• First create a Vue instance, and then specify the value of el through vm.$mount('#root') .

2. There are two ways to write data

• Object-oriented
• Functional
• How to choose: Both writing methods are acceptable, but when using components, data must be written in functional style, otherwise an error will be reported.

3. An important principle:

Functions managed by Vue must Don't write arrow functions. Once you write an arrow function, this is no longer a Vue instance, but a window.

<div id="root">
	<h1>Hello, {{name}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
	//Two ways of writing el-----------
	const v = new Vue({
		//el:'#root', //The first way to write data:{
			name:'bilibili'
		}
	})
	console.log(v)
	v.$mount('#root') //The second way of writing // Example:
	setTimeout(() => {
		v.$mount('#root')
	},1000); //Timer: The page will display the Vue effect after 1 second// ---------------------
	//Two ways to write data new Vue({
		el:'#root',
		//The first way to write data: object style /* data:{
			name:'bilibili'
		} */
		//The second way to write data: functional style // 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 by Vue data(){
			// console.log('@@@',this) //This is the Vue instance object (when data is a normal function, otherwise this refers to window)
			return {
				name:'bilibili'
			}
		}
	})
</script>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!