Basic grammar of vue

1. Template grammar

1.1 Mustache grammar

{{msg}}		//Getting the value of msg variable in data in html

1.2 Html assignment

v-html="" 	//Output content as an html tag. html() is similar

1.3 Binding Properties

v-bind:id="" //attr() is similar

1.4 expression

{{1?'Success':'Failure'} // Trinomial Operational Expressions

1.5 Text Assignment

v-text = ""		// Similar to the {}} function of vue for text display

1.6 instruction

v-if=""		//Conditional judgement

1.7 filter

//Character Filter Numeric Filter Fields Value Filter Amount Format Letter Case
{{message | capitalize}}    		//Method 1
v-bind:id="rawld | foprmatld" 		//Method two
		

2. Common Basic Grammar

2.1 Determine whether the class name indicates that the class name is valid

2.1.1 Internal grammar of an object

//active is the class name of style
//IsActive is a variable in data, isActive is true, showing class; false, not showing class name 

v-bind:class="{active:isActive,'text-danger:hasError'}"  
		

2.1.2 is an array grammar

//Writing data previously written in objects directly into data works the same way
<div v-bind:class="[activeClass,errorClass]">
data:{
  activeClass:'active',
  errorClass:'text-danger'
}

2.2 Write style embedded in label

//ActeColor and fontSize are variable names in data
v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

2.3 Conditional Rendering

 v-if 
 v-else  
 v-else-if
 v-show 
 v-cloak

The conditional result is true

V-IF v-else v-else-if//Render the corresponding Dom node

v-show//Render the corresponding Dom node and set CSS display:block

The conditional result is false

(v-if v-else v-else-if//do not render the corresponding Dom node)

v-show//Render the corresponding Dom node and set CSS display:none

 v-cloak //Actually it's not conditional rendering. It's too slow on the Internet or too fast on requests. Dom resources load slowly. You can use v-cloak to hide html code.

2.4 Event Processor

2.4.1 Event Binding

v-on:click="greet" 
@click="greet"		//Green is the method name of methods

2.4.2 event modifier

v-on:click.stop  	//stop Stops Event Bubbles
v-on:click.prevent	//prevent blocking button default event submit prevents page refresh
v-on:click.self 	//self binds events only to the current button. If the current button has child elements, click on child elements to trigger events
v-on:click.once		//Once can only trigger the button event once

v-on:keyup.enter	//"enter" trigger
v-on:keyup.tab		//Keyboard `tab'
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right

2.5 vue component

1. Global and local components 

2. Father-Child Component Communication-Data Transfer
	Parent component - > child component pops 
3.slot 

2.5.2 Father-Child Component Communication-Data Transfer

Dynamic passing value

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Counter v-bind:num="num"></Counter>
  </div>
</template>

<script>
  import Counter from './Counter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:100,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    Counter
  },
}
</script>

It can also be realized that both parent and child components update data and complete bi-directional synchronization of event action data.

​