Vue.js Records of fine Science

V-bind:class the way to use:

1. Object and method:: class= "{' Active ': isActive}"

At this point, when IsActive is true, it has the active

2. Array syntax: When you need to apply more than one class, you can use array syntax.

: class = "[Activecls,errorcls]",

var New Vue ({   el:"#app",   data:{        activecls:' active ',        errorcls:' ERROR '      } })    

Built-in Directives

V-cloak:

When the network speed is slow and the vue.js is not finished loading, the words {{message}} will appear on the page until the Vue

Create an instance, the compiled template Dom will be replaced, so may flash, as long as the addition of a CSS can be resolved

[V-cloak] {
Display:none;
}

This is very useful for simple projects, in projects with engineering, such as Webpack and Vue-router, there is only one empty div element in the project HTML, and all the rest is done by the routing to mount the different components.

So you don't need v-cloak.

V-once

The element that defines it is rendered once, including all child nodes of the element or component, and is not re-rendered with data changes after rendering.

if= "type=== ' name '" > <label> user name </label> <input placeholder= "Enter username" key= "name-input" &G        T </template> <template VElse> <label> mailbox </label> <input placeholder= "Enter Mailbox" key= "Mail-input" > </tem plate> <button @click = "Handletoggleclick" > Toggle input type </button> </div> <script type= "text/j Avascript ">varApp =NewVue ({el:"#app", data:{type:' Name '}, methods:{Handletoggleclick:function(){                     This. Type = This. Type = = = ' name '? ' Mail ': ' Name '; }            }        })    </script></body>
Vue when rendering elements, for efficiency, as far as possible to reuse the existing elements instead of re-rendering, such as the above example, if you do not add a unique key on input, switch the content of input is the same, plus key after the switch will be re-rendered.
V-for
V-for can iterate over integers in addition to the usual functions.
<span vfor = "N In" >{{n}} </span>
Output 1 2 3 4 5 6 7 8 9 10
Array update
When the array is modified, Vue detects changes to the data, so the view rendered with V-for is also updated immediately. Vue contains a set of methods for observing array variations, so that they change the array and also the departure view is updated:

 
 

  
  
 
   
Push ()
 
   
Pop ()
 
   
Shift ()
 
   
Unshift
 
   
Splice ()
 
  
 
 
? Sort
? Reverse ()
It is important to note that there are changes in the array where Vue is undetectable and does not depart from the view update:
1. Set items directly by index, such as app.books[3]={...}
2. Modify the array length, such as App.books.length=1
There are two ways to solve the first problem:
The first is the built-in set method of Vue:
Vue.set (app.books,3, {   name:"Secret",   Author:"ZX"  })
If you are using the Webpack in a modular way, the default is not to import vue, you can use $set, such as:
this. $set (app.books,3, {name:"Secret", Author:"ZX"})
Another way:
App.books.splice (3,1, {name:"Secret", Author:"ZX"})
Solving the second problem can also be done in such a way:
App.books.splice (1);
Modifier
Add the dot "." After the @-bound event, followed by a suffix to use the modifier. Vue supports the following modifiers:
. Stop
. prevent
. Capture
. Self
. Once
Specific uses are:
// Block Click event bubbling // Submit events no longer reload             pages <form @submit. prevent= "handle" ></form>             //modifiers can be concatenated <a @click. stop.prevent= "Handle" ></a >       //Modifier    <form @submit only. prevent></form>                      //Add event listeners using Event capture Mode <div @click. capture= " Handle ">...</div>      //<div @click When the event is triggered by the calcium element itself. self=" Handle ">...</div>      //Trigger only once , the components also apply to            <div @click. once= "Handle" >...</div>
When you listen to an event on a form element, you can also use a key modifier, such as when you press a specific key, to invoke the method:
Call Vm.submit () only when KeyCode is 13 o'clock
<input @keyup. 13= "Submit" >
You can also configure the specific keys yourself:
vue.config.keycode.f1=112;
Globally defined, you can use @keyuo.f1
In addition to a specific keycode, Vue also provides some shortcut names, which are aliases:

 
 

  
  
 
   
. Enter
 
   
. tab
 
   
. Delete
 
   
. ESC
 
   
. Space
 
   
. Up
 
   
. Down
 
   
. Left
 
   
. Right
 
  
 
 
These modifier keys can be combined or used together with the mouse:

 
 

  
  
 
   
. Ctrl
 
   
. alt
 
   
. Shift
 
   
. Meta (window key for command,windows)
 
  
 
 
V-model
Changing the value of a form when using form binding, such as input textarea, triggers data updates.
radio button:
When used alone, V-model is not required, as long as V-bind binds a Boolean type value to
<div id= "App" >    <input type= "Radio": checked= "Picked" >           <label> radio button </label>              </div><script>    varnew  Vue ({        el:"#app",        data:{            Picked:true        }    )</script>        
If it is combined to achieve the effect of mutually exclusive selection, V-model and value need to be used to match.
<input type= "Radio" v-model= "Picked" value= "HTML" id= "HTML" ><br/><input type= "Radio" v-model= "Picked" Value= "CSS" id= "CSS" ><br/><input type= "Radio" v-model= "Picked" value= "JS" id= "JS" ><br/>
<p> Selected items are:{{picked}}</p>
data:{        picked:' JS '     }
In this case, different radio are selected, mutually exclusive and change the value of the data picked, which causes the view to change.
In the same vein, using a checkbox and radio is basically consistent, using V-bind to bind a value of Boole type alone.
Multiple simultaneous use:
<input type= "checkbox" v-model= "Picked" value= "HTML" id= "HTML" ><br/><input type= "checkbox" V-model= " Picked "value=" CSS "id=" CSS "><br/><input type=" checkbox "v-model=" Picked "value=" JS "id=" JS "><br/ ><p> Selected items are:{{picked}}</p>
data:{        picked:[' js ', ' HTML '     }
In the drop-down box, use:
<select v-model= "selected" >    <option>html</option>    <option>js</option>    <option>css</option></select>
data:{  selected:' HTML '  }
When Dangselect is a multi-Select Case, the selected is an array.
In the practical business, it is sometimes necessary to bind a dynamic data, which can be implemented by V-bind:
<input type= "Radio" v-model= "Picked": value= "Value" ><p>picked:{{picked}}</p><p>value:{{ Value}}</p>
data:{         picked:false,         value:"123"     },
When elected, the picked is the value ' 123 ' that will become value.
check box:
<input type= "checkbox" v-model= "Toggle":true-value= "value1":false-value= "value2" ><p >{{toggle}}</p><p>{{value1}}</p><p>{{value2}}</p>
data:{        Toggle:false,        value1:' A ',        value2:' B '      },
Tick, the value of toggle True-value is a, uncheck the value of toggle is False-value, that is, B.
Drop-down box:
<select v-model= "selected" >    <option:value= "{number:123}" >123</option></select><p >{{selected.number}}</p>
After selection, selected becomes an object, at which point selected.number=123
Modifier for V-model
The. Lazy V-model Default is the data in the Input Event synchronization entry box, using the modifier. Lazy changes to synchronize in the Change event, in the case of a lost focus or a carriage return trigger
. number you can convert the input to the number type.
. Trim automatically filters the leading and trailing spaces
Vue.js Records of fine Science