Vue Getting Started note # data binding syntax

#数据绑定语法 ##文本:

The underlying form of data binding, using the "mustache" syntax (double curly braces) (specifically checked for mustache with "moustache" interpretation as: mustache; upper lip beard, moustache, at least I think very image of)

Example: https://jsfiddle.net/miloer/035ase08/

#html <div id= "app" ><input type= "text" v-model= "message" ><div> No stars: {{message}}</div>< Div> from the orangutan you:{{*message}}</div></div> #jsnew Vue ({    el: ' #app ',    data: {        message: ' Hello world! '    }})

"+" in front of the * is the original data, the future data changes will not be updated again.

#JavaScript An expression

The bound data supports JavaScript expressions:

{{name+ ' Hi '}}
{{Message.split ("). Reverse (). Join (")}}

https://jsfiddle.net/miloer/035ase08/4/

#过滤器

{{Msg| | capitalize }}

Filters can be concatenated
{{message | filtera | filterb}}

Filters can also accept parameters

{{message | filtera ' Arg1 ' arg2}}

#指令

The directive (directives) is a special feature with a prefix v- . The value of an instruction is limited to a binding expression , and its duty is to apply certain special behaviors to the DOM when the value of its expression changes.
<p v-if="End" >hello! </p>
When end is true, a Hello is displayed

#修饰符

The modifier (Modifiers) is a special suffix that begins with a half-width period . , which indicates that the instruction should be bound in a special way. For example, the .literal modifier tells the directive to parse its value into a literal string instead of an expression <a v-bind:href.literal="/a/b/c" ></A >

#缩写

 <a v-bind:href= "url" ></ a> = <a : Href= "url" ></A>     

<v-on:click="dosomething" ></<a @click="dosomething" ></ a>        

V-model

• type: varies depending on the type of form control.
• Limit:
  • <input>
  • <select>
  • <textarea>
• Param Attributes: usage: creates a two-way binding on a form control.
  • lazy
  • number
  • debounce
• See also: form control bindings

v-if

• Type:*
• usage: renders an element based on the true or false condition of the value of the expression. The element and its data bindings/components are destroyed and rebuilt at the time of the switchover. If the element is <template> , it will be presented with its contents as a conditional block.
• See also: conditional rendering

V-bind

• abbreviation::
• Type:* (with argument) | Object (without argument)
• Parameters:attrOrProp (optional)
• modifier: usage: dynamically binds one or more attribute, or a component prop to an expression. class style supports other types of values, such as arrays or objects, when binding or. When binding prop, prop must be declared in the subassembly. You can specify different binding types with modifiers. When there are no parameters, you can bind to an object. Note at this time class and the style binding does not support arrays and objects.
  • .sync– Two-way binding, only for prop bindings.
  • .once– One-time binding, only for prop bindings.
  • .camel– Name the property of the binding back to the hump. Bindings that can be used only for ordinary HTML attributes, typically used to bind SVG features named by the hump, such as viewBox .
• See also:
  • Class and Style Bindings
  • Component Props

v-on

• abbreviation:@
• Type:Function | Inline Statement
• Parameters:event (required)
• . 1.0.11+   When you listen to a custom event, inline statements can access a   $arguments   property, which is an array that contains the   that is passed to the subassembly The parameters of the $emit   callback.
  • . Stop  – call   event.stoppropagation () .
  • . Prevent  – calls   Event.preventdefault () .
  • . Capture  – use capture mode when adding event listeners. The
  • . Self  – only triggers a callback if the event is triggered from the listener-bound element itself.
  • . { KeyCode | Keyalias}  – triggers the callback only on the specified key.

• Example:
  

  <!--method Processor--<buttonv-on:click="Dothis" ></Button><!--inline Statements--<buttonv-on:click="Dothat (' Hello ', $event)" ></Button><!--abbreviations--<Button @click="Dothis" ></Button><!--stop bubbling--<Button @click.stop="Dothis" ></Button><!--block default behavior--<Button @Click.prevent="Dothis" ></button><!--block default behavior, no expression-- <form @submit.prevent> </form><!--concatenation modifier-->< span class= "tag" ><button @click.stop.prevent= " Dothis "></button><!--key modifier, key alias--><input @keyup.enter= "OnEnter" >< Span class= "line" ><!--key modifier, key code--><input @ Keyup.13= "OnEnter";

  Listen for custom events on subcomponents (the event handler will be called when the subassembly Fires "My-event"):

  <my-component @my-event="Handlethis" ></my-component><!--inline statement -- <my-component @my-event="Handlethis (123, $arguments)" ></my-component>

And a little example of just learning Vue: https://coding.net/u/Miloer/p/weui_vue/git

Reference: http://vuejs.org.cn/guide/

Original: http://www.cnblogs.com/moustache/p/5441928.html

Vue Getting Started note # data binding syntax