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.