Vue basic syntax

1, Template syntax

1. Interpolation

text

 {{msg}}

Example:

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>interpolation</h2>
			<ol>
				<li>text</li>
				<span>
					{{msg}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

Display:

Error demonstration:

Don't believe it? Then try it!!!

<!-- !!!Error demonstration!!! -->
<h1 title="{{msg}}"></h1>

html

use v-html Instruction for output html code

Example:

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Manual mode I -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>interpolation</h2>
			<ol>
				<li>text</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
			</ol>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

Display:

It should be obvious that there is an input tag defined in data in the span tag

attribute

HTML The value in the property should use v-bind instructions

Example:

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>interpolation</h2>
			<ol>
				<li>text</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:Bidirectional data binding
				 2.v-biand:Binding tag attribute value example: v-bind:css  v-bind:id
				 3.{{}}:Interpolation, which operates on the text value in the label
				 -->
				<li>v-bind Binding value</li>
				<span v-bind:class="cls" v-bind:id="123">
					I changed color
				</span>
			</ol>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

Display:

We define a style for cl outside, and then bind the class to the span tag with v-bind. The content in span also changes color.

Another v-bind is used to bind it with an id of 123, which can be clearly seen on the front console

expression

Vue Provides complete JavaScript Expression support

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>interpolation</h2>
			<ol>
				<li>text</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:Bidirectional data binding
				 2.v-biand:Binding tag attribute value example: v-bind:css  v-bind:id
				 3.{{}}:Interpolation, which operates on the text value in the label
				 -->
				<li>v-bind Binding value</li>
				<span v-bind:class="cls" v-bind:id="123">
					I changed color
				</span>
				
				<li>expression</li>
				<span>
					{{msg.substr(0,6).toUpperCase()}}<br />
					{{ number + 1 }}<br />
					{{ ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">my Id yes js Dynamically generated</li>
				</span>
				
			</ol>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
					number:1,
					ok:true,
					id:22,
				}
			},
			
			methods:{

			}
		})
	</script>
</html>

Display:

JavaScript expressions can also be supported

First: intercept (0, 6) and capitalize

Second: addition operation

Third: ternary operator

2. Instruction

Means with“ v-"Special properties of prefix

Core instruction

v-if/v-else/v-else-if

code:

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>instructions</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					I am a man
				</span>
				<span v-else-if="sex=='girl'">
					I'm a woman
				</span>
				<span v-else>
					Am I a man or a woman?
				</span>
            </ol>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
				}
			},
			methods:{
			}
		})
	</script>
</html>

Display:

When sex=boy:

When sex=girl:

When sex=gay:

 

Summary: judge whether to render the element according to the bool value of the subsequent expression

  • They can only be brothers
  • The previous sibling element of v-else-if must be v-if
  • The last sibling element of v-else must be v-if or v-else-if

v-show

code:

<li>v-show and v-model</li>
<div>
	<input type="checkbox" v-model="flag" />The agreement has been read
	<div v-show="flag">
			Hi harm,I'm out
	</div>
</div>

<!-- stay data Define a flag -->
flag:false,

Effect:

 

Similar to v-if, it only renders the element with false expression behind it, and adds css code to such element: style="display:none"

v-for

code:

		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>instructions</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					I am a man
				</span>
				<span v-else-if="sex=='girl'">
					I'm a woman
				</span>
				<span v-else>
					Am I a man or a woman
				</span>
				
				<li>v-show and v-model</li>
				<div>
					<input type="checkbox" v-model="flag" />The agreement has been read
					<div v-show="flag">
						Hi harm,I'm out
					</div>
				</div>
				
				<li>v-for/v-model/v-bind/{{}}</li>
				<div v-for="(d,i) in arrays">
					i={{i}},d={{d}}
				</div>
		
				<div>
					<select>
						<option value="">--Please select--</option>
						<option v-for="d in depts" v-bind:value="d.id">
							{{d.name}}
						</option>
					</select>
				</div>

				<span v-for="a in depts">
					<input type="checkbox" v-bind:value="a.id" v-model="dt"/>{{a.name}}
				</span><br />
				<span v-if="dt.length!=0">
					{{dt}}
				</span>
			</ol>
		</div>


			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'R & D department'},
						{id:2,name:'Research Department'},
						{id:3,name:'Ministry of Personnel'},
						{id:4,name:'Customer service department'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
				}
			},

effect:

 

 

 

JS like traversal
Traverse the array: v-for="item in items", items is the array, and item is the array element in the array
Traversal object: v-for="(value,key,index) in stu", value attribute value, key attribute name, index subscript

v-model

There are explanations in the introduction to Vue

It is used to create two-way data binding on form control elements such as input, select, textarea, checkbox and radio, and automatically update the value of the bound element according to the value on the form

Parameters, dynamic parameters, abbreviations

code:

            <li>Parameters, dynamic parameters, abbreviations</li>
				<span>
					<!-- <a href="http://www.baidu. Com "> Baidu < / a > < br / > -- > >
					<a v-bind:[attrname]="url">Baidu</a><br />
					<a v-on:[eventname]="doClick">Point me</a><br />
					<!-- Abbreviation -->
					<!-- 
					 v-on:Abbreviated to@
					 v-bind:Abbreviated to:
					 -->
					<a :href="url">Baidu</a><br />
					<a @click="doClick">Point me</a>
				</span>

        var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'R & D department'},
						{id:2,name:'Research Department'},
						{id:3,name:'Ministry of Personnel'},
						{id:4,name:'Customer service department'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
					url:'http://www.baidu.com',
					attrname:'href',
					eventname:'dblclick',
				}
			},
			
			methods:{
				doClick(){
					alert(111);
				}
			}
		})

Effect:

 

Here, href is a parameter that tells the v-bind instruction to bind the href attribute of the element to the value of the expression url

Note 1: dynamic parameter expressions have some syntax constraints. evname is invalid, evname is valid, and uppercase is avoided

2, Filter

Global filter

   Vue.filter('filterName', function (value) {
/ / value indicates the content to be filtered
   });

Local filter

   new Vue({
     filters:{'filterName':function(value){}}
   });

vue allows you to customize the filter, which is used as some common text formatting. The format is as follows:

   <!-- In two braces -- >
   {{ name | capitalize }}

   <!-- In the v-bind instruction -- >
   <div v-bind:id="rawId | formatId"></div>

  • Note 1: the filter function accepts the value of the expression as the first parameter
  • Note 2: the filter can be connected in series
          {{ message | filterA | filterB }}
  • Note 3: the filter is a JavaScript function, so it can accept parameters:
          {{ message | filterA('arg1', arg2) }}
  • Note 4: js defines a class
           function Stu(){};
           Stu.prototype.add(a,b){};// Add a new instance method

case

Initial capitalization / date formatting

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>Filter (global, local)</h2>
			<div>
				<!-- Local filter -->
				{{title|strFilter}}<br/>
				<!-- Global filter -->
				{{dt|dateFilter|strFilter}}
			</div>
		</div>
	</body>
	<script>
		//Global filter
		Vue.filter('dateFilter',function(v){
			return fmtDate(v,'yyyy year MM month dd day')
		});
		
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					title:'hello vue!!',
					dt:new Date(),
				}
			},
			
			methods:{
				
			},
			//Local filter
			filters:{
				strFilter:function(v){
					return v.substr(0,6).toUpperCase();
				}
			},
		})
	</script>
</html>

effect:


3, Calculation properties


Calculation properties can be used to quickly calculate the properties displayed in the View. These calculations will be cached and updated only when needed

case

Total score

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>Calculation properties</h2>
				<div v-for="s in score">
					number={{s.id}},subject={{s.name}},achievement={{s.sc}}
				</div>
				<span >Total score:{{sum}}</span>
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					score:[
						{id:1,name:'language',sc:110},
						{id:2,name:'mathematics',sc:90},
						{id:3,name:'English',sc:90},
						{id:4,name:'Physics',sc:100}
					],
				}
			},
			
			methods:{
				
			},
			computed:{
				sum:function(){
					let s=0;
					for(let sc of this.score)
						s+=sc.sc;
						return s;
				}
			}
		});
	</script>
</html>

effect:


   
4, Listening properties

Listen to the attribute watch. We can respond to data changes through watch
xxx: represents the monitored attribute, which must exist
   watch:{
      xxx:function(v){

 

      }
   }

case

kb/mb converter

code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- Mode I manual mode -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- Mode 2 CDN -->
		<!-- Development environment version with helpful command line warnings -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>Listening properties</h2>
				kb:<input type="text" v-model="kb" /><br />
				mb:<input type="text" v-model="mb" />
		</div>
	</body>
	<script>
		// Each Vue application starts by creating a new Vue instance with the Vue constructor
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				}
			},
			
			methods:{
				
			},
			watch:{
				//The listening attribute must ensure that the attribute exists
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</html>

effect:

 

Summary: the difference between calculation attribute and listening attribute

Own understanding

  • Computed is used to monitor the variables defined by itself. The variables are not declared in data, but directly defined in computed. Then, two-way data binding can be carried out on the page to display the results or used for other processing;
  • computed is more suitable for returning a result value after processing multiple variables or objects, that is, if a value in several variables changes, the value we monitor will also change,

For example: the relationship between the list of goods in the shopping cart and the total amount. As long as the quantity of goods in the list changes, or decreases or increases or deletes goods, the total amount should change. The total amount here is calculated using the calculated attribute, which is the best choice

Difference between and watch:

At first, it was always silly to tell when to use watch and when to use computed. Here is my understanding:

watch is mainly used to monitor the changes of vue instances. Of course, the variables it monitors must be declared in data. It can monitor a variable or an object

By comparison, we can easily conclude that both computed and watch have caching mechanisms, and their performance is preferred. Which one is better?

It is easy to conclude from the above that the listening attribute is much more complex than the calculation attribute! Therefore, when a project can use the calculation attribute, methods and monitoring attribute at the same time, we give priority to the calculation attribute, followed by the monitoring attribute, and finally select methods!

Tags: Javascript Vue Vue.js elementUI

Posted by MaDSEGA on Fri, 29 Apr 2022 23:06:33 +0300

Hot Tags

Java Python Javascript Algorithm Front-end Linux C++ data structure Spring Back-end Spring Boot MySQL Database C Android Design Pattern Vue Vue.js Docker leetcode Go Machine Learning Big Data programming language Deep Learning Operation & Maintenance Redis Interview Programming Kubernetes html AI C# SQL css
©2023 Algorithm Zone