vue js basic syntax

What is vue

  • vue is the mainstream js framework in front-end. The difference between vue and library is:
  • Libraries are more specific sets encapsulated for developers to use, and specific to a certain aspect of the collection (methods and functions). Libraries do not have control, control in the hands of users, query the functions needed in the library in their own applications, we can understand libraries from the perspective of encapsulation;
  • Framework, as its name implies, is a set of architectures that provide users with a solution equivalent to a complete solution based on their own characteristics, and control is exercised within the framework itself, where users develop in accordance with a specification specified by the framework.
  • Current mainstream front-end frameworks include React, Angular in addition to Vue

What are the advantages of Vue

  • Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue is designed for bottom-up incremental development. Vue's core libraries focus solely on the view layer and are very easy to learn from, as well as other libraries or existing items.Object Integration. On the other hand, Vue is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.
    Vue,js, for the fourth consecutive time in the annual comprehensive rankings, added more than 30k star to its GitHub in 2019
  • Vue Reference Site

Vue Basic Syntax

1. Import vue.js

Initialize Vue objects by introducing vue.js externally

  • Introduction of external cdn
  • Local Import

2. Template Rendering

  • After introducing the vuejs file, you need to instantiate the vuejs object in the <script>tag to use the vuejs template syntax in the web page, that is, render the variables in the vue object with the {{template variable}} template syntax
<div id="app">
 {{message}} 
</div>
<script src="./vue.js"></script>
<script>
var app = new vue({
	el:'#app',
	data:{
		message: 'He11o vue!'
	}
})
</script>

3.vue Interpolation

In vuejs syntax, variables can be directly defined in data attributes of instantiated vue objects, rendered directly into web pages or temporal element attributes by template rendering

<div id="app">
	{{message}}
  <h1 :title='obj.age'>
	{{obj.name}}
   </h1>
</div>
<script src="./vue.js "></script>
<script>
var app = new vue({
  el: '#app',
  data: {
	message: 'He11o vue!'
	obj:{
      name: 'Zhang San",
	  age:8
	}
  }
})
</script>
  • data attributes in vue objects can be rendered not only with text/attributes, but also with binding switch class attributes and style
<div id="app">
<!-- 1,binding class Class name, added as a string-->
	<div :class='classstr'>I added the class name as a string</div>
<!--2,Binding class names as objects,Judging the Boolean value of an attribute in an object to add class-->
	<div :class='classobj'>Binding Class Names to Objects</div>
	<button @click='classobj.red = !classobj.red'>switch</button>
<!--3.Bind class names as arrays-->
	<div :class='classArr'>Bind class names through arrays</div>
<!--1.Add Styles as Strings-->
	<div :style='colorstr'>Add Styles as Strings</div>
<!--2.Add Styles as Objects-->
	<div :style='colorobj'>Add Styles as Objects</div>
<!--3.Add Styles as Arrays-->
	<div :style='[colorobj, colorobj2]'>Add Styles as Arrays</div></div>
<script>
new vue({
	el:'#app',
	data:{
	classstr:'red font-size25',
	classobj:{
	red:true,
	'font-size25 ' :true
},
classArr:['red', 'font-size25'],
colorstr: ' color:green',
colorobj:{
	color: ' green ',
	fontsize: ' 30px'
},
colorobj2:{
	fontweight: 'bo1d'
		}
	}
})
</script>

4.Vue filter

vuejs provides an API that can be used to filter content in the current template rendering grammar, filtering content text in web pages

<div id="app">
	<div>
	{{num | max10}}
	</div>
</div>
<script>
new vue({
el: '#app',
data: {
	num: '111'
	},
//Filter object, which can contain multiple filters
filters:{
//Set the display to 10 when num exceeds 
//value is a parameter that needs to be filtered
max10(value){
	if(value > 10)
	return 10
	}
  }
})
</script>

Note: The filters object is a filter property in vuejs, which can store several different filters, each filter function has a return value.

4. Computing attributes

  • Calculated attributes are used to listen for multiple data, each time a page loads, the functions in the calculated attributes execute immediately, but as long as the original data is not modified, the recalculation will not be triggered. Calculated attributes will use the cached results after calculation, and the results will be recalculated and cached only when the original data is modified. Calculated attributes can be used as data in the data.Use the same.
<div id="app">
	 <div>num Currently is:{{num}}</div>
  	<div>1.current num Value is{{message}}</div>
 	<div>2.current num Value is{{msg}}</div>
	<button v-on:click='change'>change num Value of</button>
</div>
<script>
	new vue({
	  el: '#app',
	  data: {
		num: 1,
		message:'Odd Number'
	},
	methods: {
	//The following code executes after each click
	change(){
		this.num = Math. floor(Math .random( * 2)
		//Judging Even and Odd Numbers
		this.message = this.num%2=0 ?'Even numbers':'Odd Number'
		console.log('The function was called')
	}
},
//Computing attributes
computed:{
//Calculating a property automatically listens for the value of this.num and is called only if the value of this.num is affected in the function
	msg(){
		console.log('Calculated property called')
		return this.num % 2 =- o?'Even numbers':'Odd Number'
		}
	}
})
</script>

Tags: Javascript html5 Vue.js

Posted on Wed, 29 Sep 2021 12:00:08 -0400 by PDP11