A, v-text and v-html
<span v-text="msg"></span>
<div v-html="html"></div>
Precautions:
1, the difference between v-text and v-html similar to the distinction innertext and innerhtml, v-text render text form only, v-html tag is able to identify and render,
2, on the site dynamic rendering any HTML is very dangerous, because easily lead to XSS attacks. V-html only on trusted content, not the content ten million user-submitted
3, in a single file in the assembly, the style is not applied scoped within the v-html, or can use the global style using css modules vue-loader in (css-loader file in webpack.config.js added modules : true)
Two, v-show and v-if
<h1 v-show="ok">Hello!</h1>
<h1 v-if="awesome">Vue is awesome!</h1>
Precautions:
1, is a v-if as instruction, it must be added to an element. But if you want to switch between multiple elements? At this time, it can be a <template> element as invisible package elements, and using v-if above. The final rendering results will not contain <template> element.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2, may be used to match the v-else v-if, like in the if else js
3, v-show simply switch the CSS property display elements
4, v-if inert, only the first is true when it is rendered, v-show like no matter how the conditions will render
5, v-if the event listener and subassemblies will be appropriate destruction and reconstruction, and v-show simply switch the display of hidden elements
6, characteristic v-if decisions when switching overhead is relatively large, so the use of v-show when switching frequent, infrequent when using v-if
7, when the v-if used in conjunction with v-for, v-for priority than v-if higher
Three, v-for and key
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
<div v-for="item in items" v-bind:key="item.id">
<! - Content ->
</div>
Precautions:
1, vue "old multiplexed": data element changes when the position of the element is not changed, but the update data elements, this model is highly effective
2, but reuse of the old weaknesses will disrupt the dependencies between the elements, so unless deliberately rely on the default behavior is recommended to place the key to reuse old
3, Key value must be a unique identifier, duplicate key value can not appear
Four, v-on monitor events
1, <button v-on: click = "counter + = 1"> Add 1 </ button> expression may be used in the event
2, <button v-on: click = "greet"> Name Greet <button /> can be used to call a method of complex event processing logic when
3, <button v-on: click = "say ( 'what')"> Say what </ button> inline JavaScript statement can invoke a method, argument passing
4, event modifier: <- click event to continue to prevent the spread -!>
<a v-on:click.stop="doThis"></a>
<! - an event no longer reload the page ->
<form v-on:submit.prevent="onSubmit"></form>
<-! Modifier can be connected in series ->
<a v-on:click.stop.prevent="doThat"></a>
<! - only modifier ->
<form v-on:submit.prevent></form>
<! - Use event capture mode when adding an event listener ->
<-! That event triggered the first element itself in this process, before it handed over to the internal processing elements ->
<div v-on:click.capture="doThis">...</div>
<-! Event.target only when the handler is triggered when the current element itself ->
<! - that is, the event is not triggered from inside element ->
<div v-on:click.self="doThat">...</div>
<! - click event will only be triggered once ->
<a v-on:click.once="doThis"></a>
<! - only invoked when the `key` is` Enter` `vm.submit ()` ->
<input v-on:keyup.enter="submit">
When using the modifier, the order is important; the appropriate code is generated in the same order. Therefore, use v-on:click.prevent.self will prevent all clicks , but v-on:click.self.prevent only prevents clicks on the element itself.