Component based

http://mint-ui.github.io/#!/zh-cn

Register Component

<div id="app">
  <my-cmp></my-cmp>
</div>

var cmp = {
  data: function(){
    return {
      status: 'Critical'
    }
  },
  template: '<p>Server Status: {{status}}</p>',
  methods: {
    changeStatus: function(){
      this.status = 'Normal';
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'my-cmp': cmp
  }
})

<div id="app">
  <my-cmp></my-cmp>
</div>

Vue.component('my-cmp',{
  data: function(){
    return {
      status: 'Critical'
    }
  },
  template: 
   '<p>Server Status: {{status}}</p>',
  methods:{
    changeStatus: function(){
      this.status = 'Normal'
    }
  }
});

// roote View instance
new Vue({
  el: '#app'
})

Global

Local

Why Data should be function?

<div id="app">
  <my-cmp></my-cmp>
  <my-cmp></my-cmp>
</div>

Vue.component('my-cmp',{
  data: function(){
    return {
      status: 'Critical'
    }
  },
  template: 
   '<p>Server Status: {{status}}</p>',
  methods:{
    changeStatus: function(){
      this.status = 'Normal'
    }
  }
});

// roote View instance
new Vue({
  el: '#app'
})

new Vue({
  el: '#app',
  data: {
    title: 'Hello Word'
  },
  methods: {
  }
})

<div id = "app">
  <h2>{{title}}</h2>
</div>

https://codepen.io/ycj1905/pen/GQXqKK

Inc template in an element

<div id="app">
  <my-cmp></my-cmp>
  <my-cmp></my-cmp>
</div>

Vue.component('my-cmp',{
  data: function(){
    return {
      name: 'Evan You',
      gender: 'man'
    }
  },
  template: 
   '<p>Name: {{name}}</p>
    <p>Gender: {{gender}}</p>',
  methods:{
  }
});

new Vue({
  el: '#app'
})

Vue.component('my-cmp',{
  data: function(){
    return {
      name: 'Evan You',
      gender: 'man'
    }
  },
  template: 
   '<div>
      <p>Name: {{name}}</p>
      <p>Gender: {{gender}}</p>
    </div>',
  methods:{
  }
});

new Vue({
  el: '#app'
})

!

How Comp talk to each other

Parent and Child

嗯...?

Sibling

1.Unidirectional Data Flow

2.Event Bus