JavaScript MVVM Library vue.js Introductory Learning notes _javascript class Library

First, v-bind abbreviation

<!--complete syntax-->
<a v-bind:href= "url" ></a>

<!--abbreviation-->
<a:href= "url" ></a >

<!--complete syntax-->
<button v-bind:disabled= "somedynamiccondition" >Button</button>

<!--abbreviation-->
<button:d isabled= "Somedynamiccondition" >Button</button>

Second, v-on abbreviation

<!--complete syntax-->
<a v-on:click= "dosomething" ></a>

<!--abbreviation--> <a
@click = " DoSomething "></a>

Third, filter

{{message | capitalize}}}

Four, conditional rendering

V-if
 
 

V. List rendering for

V-for
<ul id= "example-1" >
 <li v-for= "item in Items" >
 {{item.message}}
 </li>
</ul>
var example1 = new Vue ({
 el: ' #example-1 ',
 data: {
 items: [
  {message: ' Foo '},
  {m Essage: ' Bar '}}}
);
 
<ul id= "Example-2" >
 <li v-for= "item in Items" >
 {parentmessage}}-{{$index}}}-{{item.message }
 </li>
</ul>
var example2 = new Vue ({
 el: ' #example-2 ',
 data: {
 Parentmessage: ' Parent ',
 items: [
  {message: ' Foo '},
  {message: ' Bar '}
 }}]
;

Array change detection
Vue.js Packs The mutation method of the observed array, so they can trigger the view update. The methods to be packaged are: push (), pop (), Shift (), unshift (), splice (), sort (), reverse ()

Example1.items.push ({message: ' Baz '});
Example1.items = Example1.items.filter (function (item) {return
 item.message.match (/foo/);
}); 
Template-v-for
<ul>
 <template v-for= "item in Items" >
 <li>{{item.msg}}</li>
 <li class= "divider" ></li>
 </template>
</ul> 

Object V-for

<ul id= "Repeat-object" class= "demo" >
 <li v-for= "value in Object" >
 {{$key}}}: {{value}
 } ;/li>
</ul>
new Vue ({
 el: ' #repeat-object ',
 data: {
 object: {
  FirstName: ' John ',
  LastName: ' Doe ',
  age:30
 }
 }
); 

Domain v-for

<div>
 <span v-for= "N in ten" >{{n}} </span>
</div>

Vi. methods and event handlers
Method Processor

<div id= "Example" >
 <button v-on:click= "greet" >Greet</button>
</div>

var vm = New Vue ({
 el: ' #example ',
 data: {
 name: ' Vue.js '
 },
 ///////In ' methods ' object defined method
 methods: {
 Greet:function (event) {
  //method ' this ' points to VM
  alert (' Hello ' + this.name + '! ')
  ' Event ' is native DOM event
  alert (Event.target.tagName)}}}
)

//You can also call methods
in JavaScript code Vm.greet (); -> ' Hello vue.js! '

Inline Statement Processor

<div id= "Example-2" >
 <button v-on:click= "Say (' Hi ')" >say hi</button> the <button v-on
 : click= "Say (' What ')" >say what</button>
</div>
new Vue ({
 el: ' #example-2 ',
 Methods: {
 say:function (msg) {
  alert (msg)}}}
);

It is sometimes necessary to access native DOM events in the inline statement processor. You can use a special variable $event pass it into the method

<button v-on:click= "Say (' hello! ', $event)" >Submit</button>
 methods: {
 say:function (msg, event) {
 //Now we can access the native event object
 event.preventdefault ()
 }
};

# # Event Modifier

<!--Prevent Click event bubbling-->
<a v-on:click.stop= "Dothis" ></a>

<!--commit event no longer overload page-->
< The form v-on:submit.prevent= "OnSubmit" ></form>

<!--modifier can be concatenated-->
<a v-on: Click.stop.prevent= "Dothat" >

<!--only modifiers-->
<form v-on:submit.prevent></form>

# # Key modifier

<!--only at KeyCode is 13 o'clock call Vm.submit ()-->
<input v-on:keyup.13= "Submit" >
<!--ditto-->
& Lt;input v-on:keyup.enter= "Submit" >
<!--abbreviation syntax-->
<input @keyup. enter= "Submit" >

All key aliases: Enter,tab,delete,esc,space,up,down,left,right

# # Other Instances

New Vue ({
 el: ' #demo ',
 data: {
 Newlabel: ',
 stats:stats
 },
 methods: {
 add:function (e) {
  E.preventdefault ()
  if (!this.newlabel) {return
  ;
  }
  This.stats.push ({
  label:this.newLabel,
  value:100
  });
  This.newlabel = ';
 },
 remove:function (stat) {
  if (This.stats.length > 3) {
  this.stats. $remove (stat); Note the $remove
  } else {
  alert (' can\ ' t delete more! ')}}}
);

Vii. transition
CSS Transitions

<div v-if= "Show" transition= "expand" >hello</div>
then for. Expand-transition, Expand-enter and. Expand-leave Add CSS Rules:/

* Required/*
expand-transition {
 transition:all. 3s ease;
 height:30px;
 padding:10px;
 Background-color: #eee;
 Overflow:hidden;
}

/*. expand-enter defines the starting state of entry////
* Expand-leave defines the end state of departure/*
Expand-enter,. expand-leave {
 height:0;< c43/>padding:0 10px;
 opacity:0;
}

You can implement different transitions through dynamic binding on the same element:

<div v-if= "show": transition= "Transitionname" >hello</div> 
new Vue ({
 el: ' ... ',
 data: {
 Show:false,
 transitionname: ' Fade '
 }
}

In addition, you can provide JavaScript hooks:

Vue.transition (' expand ', {

 beforeenter:function (EL) {
 el.textcontent = ' Beforeenter '
 },
 enter: Function (EL) {
 el.textcontent = ' Enter '
 },
 afterenter:function (EL) {
 el.textcontent = ' Afterenter '
 },
 entercancelled:function (EL) {
 //handle cancellation
 },

 Beforeleave: Function (EL) {
 el.textcontent = ' Beforeleave '
 },
 leave:function (EL) {
 el.textcontent = ' Leave ' c27/>},
 afterleave:function (EL) {
 el.textcontent = ' Afterleave '
 },
 leavecancelled:function (el ) {
 //handle cancellation
 }
});

VIII. components
1. Registration

Define
var mycomponent = vue.extend ({
 Template: ' <div>a custom component!</div> '
});

Registered
vue.component (' my-component ', mycomponent);

Create the root instance
new Vue ({
 el: ' #example '
});
<div id= "Example" >
 <my-component></my-component>
</div>

or written directly:

Vue.component (' My-component ', {
  Template: ' <div>a custom component!</div> '
});

 Create the root instance
new Vue ({
 el: ' #example '
});
<div id= "Example" >
  <my-component></my-component>
</div>

2. Passing Data using prop
Example One:

Vue.component (' child ', {
 //Declaration props
 Props: [' msg '],
 ///prop can be used in the template
 //can be set
 with ' this.msg ' Template: ' <span>{{msg}}</span> '
});
<child msg= "Hello!" ></child>

Example two:

  Vue.component (' child ', {
  //CamelCase in JavaScript
  props: [' mymessage '],
  Template: ' <span>{{ Mymessage}}</span> '
 });
 <!--kebab-case in HTML-->
 <child my-message= "hello!" ></child>

3. Dynamic Props

<div>
 <input v-model= "parentmsg" >
 <br>
 <child v-bind:my-message= "Parentmsg" ></child>
</div>

The abbreviation syntax for using V-bind is usually simpler:

<child:my-message= "Parentmsg" ></child>

4.Prop binding Type
prop Default is one-way binding: when a parent component's properties change, it is passed to the subassembly, but the reverse does not. This is to prevent the child component from unintentionally modifying the state of the parent component-which makes the application's data flow difficult to understand. However, you can also use the. sync or. Once binding modifier modifier explicitly to force bidirectional or single binding:

Comparison syntax:

<!--default is one-way binding-->
<child:msg= "parentmsg" ></child>

<!--bidirectional binding-->
<child: Msg.sync= "Parentmsg" ></child>

<!--single bind-->
<child:msg.once= "Parentmsg" ></child >
Other examples:

<modal:show.sync= "ShowModal" >
 
 
 

5.Prop Verification
component can specify authentication requirements for props. This is useful when components are used by others, because these validation requirements form the component's API to ensure that others use the component correctly. At this point the value of the props is an object containing the validation requirements:

Vue.component (' example ', {
 props: {
 //underlying type detection (' null ' means any type can be)
 Propa:number,
 //required and string
 PROPB : {
  type:string,
  required:true
 },
 //number, with default value
 propc: {
  type:number,
  default:100 The
 default value of//object/array should be returned by a function
 propd: {
  type:object,
  default:function () {return
  {msg: ' Hello '}}}
 ,
 //Specify this prop for bidirectional binding
 ///If the binding type is not correct will throw a warning
 prope: {
  twoway:true
 },
 Custom validation function
 Propf: {
  validator:function (value) {return
  value >
  }
 },
 // Conversion function (1.0.12 new)
 //Convert value before setting value
 PROPG: {
  coerce:function (val) {
  return val + '//convert value to string
  }
   },
 proph: {
  coerce:function (val) {
  return Json.parse (val)//Convert JSON string to object
  }
 }< c45/>});

Other instances:

Vue.component (' modal ', {
 template: ' #modal-template ',
 props: {show
 : {
  Type:boolean,
  Required:true,
  twoway:true 
 }
 }
);

6. Registration

Define
var mycomponent = vue.extend ({
 Template: ' <div>a custom component!</div> '
});

Registered
vue.component (' my-component ', mycomponent);

Create the root instance
new Vue ({
 el: ' #example '
});
<div id= "Example" >
 <my-component></my-component>
</div>

or write directly:

Vue.component (' My-component ', {
  Template: ' <div>a custom component!</div> '
});

 Create the root instance
new Vue ({
 el: ' #example '
});
<div id= "Example" >
  <my-component></my-component>
</div>

7. Passing Data using prop
Example One:

Vue.component (' child ', {
 //Declaration props
 Props: [' msg '],
 ///prop can be used in the template
 //can be set
 with ' this.msg ' Template: ' <span>{{msg}}</span> '
});
<child msg= "Hello!" ></child>

Example two:

  Vue.component (' child ', {
  //CamelCase in JavaScript
  props: [' mymessage '],
  Template: ' <span>{{ Mymessage}}</span> '
 });
 <!--kebab-case in HTML-->
 <child my-message= "hello!" ></child>

8. Dynamic Props

<div>
 <input v-model= "parentmsg" >
 <br>
 <child v-bind:my-message= "Parentmsg" ></child>
</div>

The abbreviation syntax for using V-bind is usually simpler:

<child:my-message= "Parentmsg" ></child>

9.Prop binding Type
prop Default is one-way binding: when a parent component's properties change, it is passed to the subassembly, but the reverse does not. This is to prevent the child component from unintentionally modifying the state of the parent component-which makes the application's data flow difficult to understand. However, you can also use the. sync or. Once binding modifier modifier explicitly to force bidirectional or single binding:

Comparison syntax:

<!--default is one-way binding-->
<child:msg= "parentmsg" ></child>

<!--bidirectional binding-->
<child: Msg.sync= "Parentmsg" ></child>

<!--single bind-->
<child:msg.once= "Parentmsg" ></child >

Other instances:

<modal:show.sync= "ShowModal" >
 
 
 

10.Prop Verification
component can specify authentication requirements for props. This is useful when components are used by others, because these validation requirements form the component's API to ensure that others use the component correctly. At this point the value of the props is an object containing the validation requirements:

Vue.component (' example ', {
 props: {
 //underlying type detection (' null ' means any type can be)
 Propa:number,
 //required and string
 PROPB : {
  type:string,
  required:true
 },
 //number, with default value
 propc: {
  type:number,
  default:100 The
 default value of//object/array should be returned by a function
 propd: {
  type:object,
  default:function () {return
  {msg: ' Hello '}}}
 ,
 //Specify this prop for bidirectional binding
 ///If the binding type is not correct will throw a warning
 prope: {
  twoway:true
 },
 Custom validation function
 Propf: {
  validator:function (value) {return
  value >
  }
 },
 // Conversion function (1.0.12 new)
 //Convert value before setting value
 PROPG: {
  coerce:function (val) {
  return val + '//convert value to string
  }
   },
 proph: {
  coerce:function (val) {
  return Json.parse (val)//Convert JSON string to object
  }
 }< c45/>});

Other instances:

Vue.component (' modal ', {
 template: ' #modal-template ',
 props: {show
 : {
  Type:boolean,
  Required:true,
  twoway:true 
 }
 }
);

11. Distributing content using slot
the <slot> element is used as the content distribution slot in the component template. This element itself will be replaced.
Slot with the name attribute are called named slot. Content with slot attributes is distributed to named slot that match the name.

For example, suppose we have a multi-insertion component whose template is:

<div>
 <slot name= "One" ></slot>
 <slot></slot>
 <slot name= "two" > </slot>
</div>

Parent Component Template:

<multi-insertion>
 <p slot= "One" >One</p>
 <p slot= "Two" >Two</p>
 <p >default a</p>
</multi-insertion>

The render result is:

<div>
 <p slot= "One" >One</p>
 <p>default a</p>
 <p slot= "two" >two </p>
</div>