JavaScript MVVM library Vue. js getting started learning note _ javascript class library

This article mainly introduces the MVVM library Vue of JavaScript. js learning notes, Vue. js is an emerging js library. It is mainly used to bind and combine view components for response data. For more information, see I. Abbreviation of v-bind

 
 
 Button
 Button

Ii. Abbreviation of v-on

3. Filter

{{ message | capitalize }}

Iv. Conditional Rendering

v-ifYesNo
 Sorry
 Not sorry
template-v-if
 
   Title 
  
Paragraph 1
 
  
Paragraph 2
 v-showHello!

5. list rendering

v-for
 
 
 
  
  
 {{ item.message }} 
 
 
var example1 = new Vue({ el: '#example-1', data: { items: [  { message: 'Foo' },  { message: 'Bar' } ] }}); 
 
 
 
  
  
 {{ parentMessage }} - {{ $index }} - {{ item.message }} 
 
 
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [  { message: 'Foo' },  { message: 'Bar' } ] }});

Array Change Detection
Vue. js encapsulates the Variation methods of the observed array, so they can trigger view update. The encapsulated methods include 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
 
 
 
   
   
  
{{ item.msg }}
 
   
  
 
  
 
 
 

Object v-

 
 
 
  
  
 {{ $key }} : {{ value }} 
 
 
new Vue({ el: '#repeat-object', data: { object: {  FirstName: 'John',  LastName: 'Doe',  Age: 30 } }}); 

Value range v-

 {{ n }} 

Vi. Method and event Processor
Method Processor

 Greet
Var vm = new Vue ({el: '# example', data: {name: 'vue. js '}, // define the method methods: {greet: function (event) in the 'Methods' object) {// In the method, 'eas' points to vm alert ('hello' + this. name + '! ') // 'Event' is the native DOM event alert(event.tar get. tagName) }}) // you can call the vm method in JavaScript code. greet (); //-> 'Hello Vue. js! '

Inline statement Processor

 Say Hi Say What
new Vue({ el: '#example-2', methods: { say: function (msg) {  alert(msg) } }});

Sometimes you also need to access native DOM events in the inline statement processor. You can use the special variable $ event to pass it into the method.

SubmitMethods: {say: function (msg, event) {// now we can access the native event object event. preventDefault ()}};

# Event Modifier

# Key Modifier

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 $ remove} else {alert ('can \'t delete more! ')}}}});

VII. Transition
CSS transition

Hello
Then. expand-transition ,. expand-enter and. expand-leave add CSS rules:/* required */. expand-transition {transition: all. 3 s rows; height: 30px; padding: 10px; background-color: # eee; overflow: hidden ;}/*. expand-enter defines the start status *//*. expand-leave defines the end state of exit */. expand-enter ,. expand-leave {height: 0; padding: 0 10px; opacity: 0 ;}

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

hello
 new Vue({ el: '...', data: { show: false, transitionName: 'fade' }}

In addition, JavaScript hooks can be provided:

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' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation }});

8. Components
1. Registration

// Define var MyComponent = Vue. extend ({template :'
A custom component!
'}); // Register Vue. component ('My-component', MyComponent); // create the root instance new Vue ({el:' # example '});
 
  
Or you can directly write it as: Vue. component ('My-component ', {template :'
A custom component!
'}); // Create the root instance new Vue ({el:' # example '});
  
  

2. Use prop to pass data
Instance 1:

Vue. component ('child ', {// declare props: ['msg'], // prop can be used in the template // you can use 'this. msg 'set template: '{msg }}'});
 

Example 2:

  Vue.component('child', {  // camelCase in JavaScript  props: ['myMessage'],  template: '{{ myMessage }}' }); 
  
 

3. Dynamic props

The abbreviated v-bind syntax is generally simpler:

4. Prop binding type
Prop is one-way binding by default: When the attributes of the parent component change, it will be transmitted to the child component, but in turn will not. This is to prevent the child component from inadvertently modifying the status of the parent component-which makes the data flow of the application hard to understand. However, you can also use the. sync or. once binding modifier to explicitly force two-way or one-time binding:

Comparison Syntax:

 
 
 
 
 
 Other instances:
 
  
Custom header
 

5. Prop Verification
The component can specify verification requirements for props. This is useful when components are used by others because these verification requirements constitute the component's API and ensure that others use the components correctly. In this case, the props value is an object that includes verification requirements:

Vue. component ('example ', {props: {// basic type detection ('null' means any type can be) propA: Number, // required and string propB: {type: String, required: true}, // Number, with the default value propC: {type: Number, default: 100 }, // The default value of the Object/array should be returned by a function: propD: {type: Object, default: function () {return {msg: 'hello '}}}, // specify this prop as a two-way binding // If the binding type is incorrect, a warning propE: {twoWay: true} will be thrown. // The Custom verification function propF: {validator: function (value) {return value> 10 }}, // Conversion function (New in 1.0.12) // convert the value propG: {coerce: function (val) before setting the value) {return val + ''// convert the value to a string}, propH: {coerce: function (val) {return JSON. parse (val) // convert a JSON string to an object }}}});

Other instances:

Vue.component('modal', { template: '#modal-template', props: { show: {  type: Boolean,  required: true,  twoWay: true  } }});

6. Registration

// Define var MyComponent = Vue. extend ({template :'
A custom component!
'}); // Register Vue. component ('My-component', MyComponent); // create the root instance new Vue ({el:' # example '});
 
  

Or you can directly write it as follows:

Vue. component ('My-component ', {template :'
A custom component!
'}); // Create the root instance new Vue ({el:' # example '});
  
  

7. Use prop to pass data
Instance 1:

Vue. component ('child ', {// declare props: ['msg'], // prop can be used in the template // you can use 'this. msg 'set template: '{msg }}'});
 

Example 2:

  Vue.component('child', {  // camelCase in JavaScript  props: ['myMessage'],  template: '{{ myMessage }}' }); 
  
 

8. Dynamic props

The abbreviated v-bind syntax is generally simpler:

9. Prop binding type
Prop is one-way binding by default: When the attributes of the parent component change, it will be transmitted to the child component, but in turn will not. This is to prevent the child component from inadvertently modifying the status of the parent component-which makes the data flow of the application hard to understand. However, you can also use the. sync or. once binding modifier to explicitly force two-way or one-time binding:

Comparison Syntax:

Other instances:

 
   custom header 
 

10. Prop Verification
The component can specify verification requirements for props. This is useful when components are used by others because these verification requirements constitute the component's API and ensure that others use the components correctly. In this case, the props value is an object that includes verification requirements:

Vue. component ('example ', {props: {// basic type detection ('null' means any type can be) propA: Number, // required and string propB: {type: String, required: true}, // Number, with the default value propC: {type: Number, default: 100 }, // The default value of the Object/array should be returned by a function: propD: {type: Object, default: function () {return {msg: 'hello '}}}, // specify this prop as a two-way binding // If the binding type is incorrect, a warning propE: {twoWay: true} will be thrown. // The Custom verification function propF: {validator: function (value) {return value> 10 }}, // Conversion function (New in 1.0.12) // convert the value propG: {coerce: function (val) before setting the value) {return val + ''// convert the value to a string}, propH: {coerce: function (val) {return JSON. parse (val) // convert a JSON string to an object }}}});

Other instances:

Vue.component('modal', { template: '#modal-template', props: { show: {  type: Boolean,  required: true,  twoWay: true  } }});

11. Use slot to distribute content
The element serves as the content distribution slot in the component template. The element itself will be replaced.
A slot with the name feature is called a named slot. Content with slot features will be distributed to named slots with matched names.

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

Parent component template:

  
  
One
 
  
Two
 
  
Default A
 

Rendering result:

 
One
 
Default A
 
Two