Vue.js Study notes (directives)

Presumably like the front-end development of the small partners have more or less exposure to the concept of MVVM, speaking of MVVM, the first time to think of is Angularjs,knockoutjs and so has been widely used in the MVVM framework, I did not have a lot of understanding in this respect, Recently in the process of making contact with the Vue.js, which is a small and exquisite, excellent performance of the MVVM framework, it can be said that beginners are easier to get started, the framework of the English document is very good, but the Chinese version of the visit is not too stable, translation needs to be improved, so I study again, record their own thinking, Share your learning experience with everyone.

The first article is to talk about vue.js in the directives is the directive, in the vue.js instruction is a notification library to do some specific DOM operation of the password, in the HTML to behave in the following form:

< element   Prefix-directiveid = "[argument:] expression [| filters ...]" > </ element >

Directives is divided into 1.Reactive directives, 2.Literal directives, 3.Empty directives, the following combined with specific APIs to illustrate their role:

1.Reactive directives (response instruction)

Reactive directives can be bound to a Vue instance or an expression evaluated in the context of the Vue instance, when the bound object changes, the update () in the instruction will respond asynchronously at the next system unit time, let's take a look at the specific usage:

v-text: Updates the textcontent of the element, in fact the insertion value in the form of {{mustache}} in HTML is also compiled into a v-text instruction for a textnode.

v-html: Update the innerHTML of the element, due to the possibility of inserting malicious code, when used to ensure that the source security.

V-show: Determines whether the element is displayed as normal or empty in the Web page, based on the true or false of the bound value.

V-class: This directive has an optional parameter, the binding value (typically the class name) is added to the classlist of the element when there is no parameter, and once the binding value is detected, the corresponding class in the classlist is changed. The argument's true or FALSE when the parameter is supplied determines whether the bound value (class) is added to the classlist of the element in which it is located, as shown in the following example:

<v-class= "  red    : Haserror,  bold   : Isimportant,  hidden: Ishidden "></span>

v-attr: Updates Some of the attributes (represented by parameters) of the element in which it resides.

<v-attr= "width:w, height:h"></canvas>

V-style: Updating the style of the element, the browser vendor prefix is added intelligently, so that we can write the style. This directive has an optional parameter, if the binding value is string, the binding value is set to the style.csstext of the element, and if the bound value is object, the style key value pair in object is placed in the element's style object;

<v-style= "Mystyles"></div>

// Mystyles can either be a String:"color:red; Font-weight:bold; " // or an Object: {  ' red ',  //  both CamelCase and Dash-case works  fontweight: ' Bold ' ,  ' Font-size ': ' 2em '}

When supplying a parameter, the parameter indicates the corresponding value of the CSS property:

<v-style= "  top:top + ' px ',  left:left + ' px ',  background-color: ' RGB (0,0, ' + bg + ') '></div>

v-on: Adds and updates an event listener for an element, which can be a handler function or a function statement.

<DivID= "Demo">  <av-on= "Click:onclick">Trigger a handler</a>  <av-on= "click:n++">Trigger An expression</a></Div>

We can provide parameters for the handler function, where this refers to the current ViewModel, which in the following example changes the text value of an element by passing in the This parameter:

 <  ul  id  = "list"   >  <  li  v-repeat  = "Items"   v-on  = "Click:toggle (This)"  >  {{text}} </ li  >  </ ul  >  

New Vue ({  ' #list ',  data: {    items: [      True  },      false }    ]  },  methods: {    function  (item) {      =!  Item.done    }}  )

We can also pass in $event, which represents the DOM event that triggers the handler, and the following example passes in the $event block event bubbling:

<v-on= "Click:submit (' hello! ', $event)">submit</  Button>

/** *{  methods    : {function  (MSG, e) {      E.stoppropagation ()  }}}/** *

When listening to keyboard events, in order to determine the key values, the filter can be written in the following two forms:

<!---<v-on= "Keyup:submit | key"> 

<!---<v-on= "Keyup:submit | Key Enter"  >

When ViewModel destroys, v-on-bound events are automatically eliminated, and we do not have to clean up these binding events in person, which also prevents memory leaks.

V-model: Create a two-way binding for form elements that will be described in more detail in subsequent articles

v-if: Inserts or removes an element based on the true or false of the bound value, as in the example we will determine whether the two <p> elements are inserted into <template> based on the correctness of the test

<v-if= "Test">  <p>Hello </ P >  < P >World</p></template> 

v-repeat: Creates a child viewmodel for each item in a bound array or object, or creates a corresponding number of sub-viewmodel for the bound numeric value. and is updated at any time based on changes to the binding value. When a parameter is not supplied, the ViewModel directly uses the allocation unit in the binding array as its $data, and if the value is not an object, a data wrapper object is created and the value is set $value on the alias key.

< ul >  <  v-repeat= "users">    {{name}} {{email}}  </  li></ul>

If a parameter is provided, we will create a data wrapper object that will use the parameter as the object's key to access the properties in the object template:

< ul >  <  v-repeat= "user:users">    {{User.Name}} {{user.email}   } </ Li > </ ul >

v-with: This instruction can only be used in conjunction with the following V-component directive, which allows the child viewmodel to inherit the parent ViewModel's data, and we can pass in the parent ViewModel's Property object or a single property. Access in sub-ViewModel:

// parent Data looks like this {  User: {    ' Foo Bar ',    ' [email protected] '   }

Inheriting objects:

<v-with= "user">  <!--   -{{  name}} {{email}}</my-component>

Inherit a single property:

<v-with= "MyName:user.name, myEmail:user.email">  <!-- -- {{  MyName}} {{Myemail}}}</my-component    >

V-events: This directive can only be used in conjunction with the following V-component directive, which allows the parent ViewModel to listen to events on the ViewModel, and we should be careful to distinguish between v-on and v-events,v-events listening by vm.$emit()creates a Vue component system event, rather than a DOM event. For example, we illustrate:

<!---<v-component= "Child"  v-events  = "Change:onchildchange"></div>

When the child ViewModel calls this. $emit (' Change ', ...) The Onchildchange () method of the parent ViewModel is triggered, and the attached parameter to the emit function is passed to the Onchildchange () method.

2.Literal directives (literal instruction)

The literal instruction is not bound to an object, the literal instruction is to pass their arguments as a pure string to the bind () function once, the literal instruction can accept the {{mustache}} expression, but the expression will be executed only once during the compilation phase, will not bind the data changes:

Here's a look at the specific API:
v-component: As mentioned earlier, this is the use of our pre-declared and registered component constructors to compile the current element into a sub-viewmodel to achieve data inheritance, and later articles will detail the component system.

v-ref: Create a reference to the child ViewModel in the parent ViewModel to facilitate access to the child components in the parent ViewModel:

<id= "parent">  <v-component = "User-profile" V-ref = "Profile" ></ Div > </ Div >

var New Vue ({el: ' #parent ' })/  Access sub-component var child = Parent.$.profile

This directive can only be used with v-component and v-repeat一起使用，与v-repeat一起使用时，其value是与绑定数据数组对应的子组件数组。

V-el: Creates a reference for the current DOM element for use by its own Vue instance, such as <div v-el= "HI" > allows vm.$$.hi access to the DOM element

v-partial : Replaces the innerHTML in the current DOM element with the pre-registered partial, with two ways of writing {{mustache}} to allow DOM elements to be updated with data changes:

<!---<v-partial= "{{partialid}}"> </div>

Another way to do this is to have no data following the update effect:

< Div > {{> My-partial}} </ Div >

v-transition: Adds an animation effect to the current DOM element when the parameter value is specified, and subsequent articles detail

3.Empty directives (literal instruction)

v-pre: This instruction instructs the compiler to skip the current DOM element and all its child elements, in order to save compilation time for elements that do not need to be compiled during our programming

V-cloak: Before the current element is compiled, the directive will exist, which we typically use to hide the original {{mustache}} template when the element compilation is incomplete, which can be written in CSS:

{ display:}

Vue.js Study notes (directives)