Vue中常用API

let AppLayout = {
  template: '<div class="container">' 
    + '<header> <slot name="header"></slot>< /header>' 
    + '<main> <slot>默认内容</slot> </main>' 
    + '<footer> <slot name="footer"></slot> </footer>' 
    + '</div>'
}

let vm = new Vue({
  el: '#app',
  template: '<div>' 
    + '<app-layout>' 
      + '<h1 slot="header">{{title}}</h1>' 
      + '<p>{{msg}}</p>' 
      + '<p slot="footer">{{desc}}</p>' 
    + '</app-layout>' +
  '</div>',
  data() {
    return {
      title: '我是标题',
      msg: '我是内容', 
      desc: '其它信息'
    } 
  },
  components: {
    AppLayout
  } 
})

let Child = {
  template: '<div class="child">' +
  '<slot text="Hello " :msg="msg"></slot>' +
  '</div>',
  data() {
    return {
      msg: 'Vue'
    } 
  }
}

let vm = new Vue({
  el: '#app',
  template: '<div>' 
    + '<child>' 
    + '<template slot-scope="props">' 
      + '<p>Hello from parent</p>' 
      + '<p>{{ props.text + props.msg}}</p>' 
    + '</template>' 
    + '</child>' + 
  '</div>',
  components: {
    Child 
  }
})

let A = {
  template: '<div class="a">' +
  '<p>A Comp</p>' +
  '</div>',
  name: 'A'
}

let B = {
  template: '<div class="b">' +
  '<p>B Comp</p>' +
  '</div>',
  name: 'B'
}

let vm = new Vue({
  el: '#app',
  template: '<div>' +
  '<keep-alive>' +
  '<component :is="currentComp">' + '</component>' +
  '</keep-alive>' +
  '<button @click="change">switch</button>' + '</div>',
  data: {
    currentComp: 'A'
  },
  methods: {
    change() {
      this.currentComp = this.currentComp === 'A' ? 'B' : 'A' 
    }
  },
  components: {
    A,
    B 
  }
})

let vm = new Vue({
  el: '#app',
  template: '<div id="demo">' +
    '<button v-on:click="show = !show">' 
        + 'Toggle' +
    '</button>' +
    '<transition :appear="true" name="fade">' 
        + '<p v-if="show">hello</p>' + 
    '</transition>' +
  '</div>',
  data() {
    return {
      show: true
    } 
  }
})

// css
.fade-enter-active, .fade-leave-active { 
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0; 
}

let vm = new Vue({
    el: '#app',
    template: '<div id="list-complete-demo" class="demo">' +
        '<button v-on:click="add">Add</button>' +
        '<button v-on:click="remove">Remove</button>' +
        '<transition-group name="list-complete" tag="p">' +
            '<span v-for="item in items" v-bind:key="item" class="list-complete-item">' 
                + '{{ item }}' +
            '</span>' +
        '</transition-group>' +
    '</div>',
    data: {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        nextNum: 10
      },
      methods: {
        randomIndex: function () {
            return Math.floor(Math.random() * this.items.length) 
        },
        add: function () {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
        },
        remove: function () {
            this.items.splice(this.randomIndex(), 1) 
        }
      } 
   })
   
   // css
   .list-complete-item { 
       display: inline-block; 
       margin-right: 10px;
    }
    
    .list-complete-move {
      transition: all 1s;
    }
    
    .list-complete-enter, .list-complete-leave-to { 
        opacity: 0;
        transform: translateY(30px);
    }
    
    .list-complete-enter-active {
        transition: all 1s;
    }
    
    .list-complete-leave-active { 
        transition: all 1s; 
        position: absolute;
    }