Vue.js -. 4 instructions Notes

v-cloak: to solve the speed problem delayed flashes
v-text = msg: and {{}} expression, there is no flicker problem, but can not add anything else around, covering the original content innerText
v-HTML = msg: innerHtml, as labels can be printed
v-band: src = 'msg ': an element binding properties; can be written: src = 'msg' js expression may also write: the src = ' "..//" + MSG'
V- on: click = 'show': a corresponding event in the process of binding mechanism mehods bound object or represents @

Event modifier
@ click.stop prevent the event from bubbling
@ click.prevent prevent the default event, such as jumps, submit
@ click.self achieved only click on the current element is the only trigger function can also prevent bubbling. But only the current element
@ click.once triggered only once

Vue will monitor data changes in data. Auto-sync, do not control, and rendering the page

Arrow function to solve the problem this scope. This is equal to the interior of this exterior

v-model two-way data binding, only the use of form elements

Class and inline style can be written in an object manner or in the form of an array of objects: style = "color: 'red', font-size: '18px'"


v-for: loop array
<P-V = for "(Item, I) in List"> ------------- {{{{I}}}} Item </ P>
Item : each, i array: the index. Similar for in

Cyclic object
<= for P-V "(Val, Key, I) in User"> ------------- {{Val}}} {} {Key </ P>
Val: Key , key: value. n

The number of iterations
<p v-for = "count in 10"> count </ p>

When using the v-for loop, or especially when the need for uniqueness, you can use: key property is bound uniqueness of

v-if: true or delete elements to create a
v-show will not be deleted. Just switch the display elements: none style


Value is not necessarily the only expression, may be a method <p> {{search ()}} </ p>

 

filter

Role: formatted text

Called: {{name | filter NameD ( '123')}} // can pass a plurality of parameters. You can call multiple filters

Definitions: Vue.filter (NAMED, function (Data, SD) {
return Data + "12 is" + sd.repace (/ Mad / g, 'thank you') // regular replacement may be, can be a string
})

Custom global key modifier
Vue.config.keyCodes.f2 = 113

Custom command

v-focus

el: native binding element DOM object
Vue.directive ( 'Focus', {
the bind: function (EL) {}, // whenever a binding is performed, not into dom, but only in memory can once
inserted: function (el) {} // when the element into dom
updated: function (el) {} // update when performing assembly
})

Guess you like

Origin www.cnblogs.com/ruogu/p/10943095.html