Vue入门笔记02（基础）

全局组件

Vue.component('alert', {
  template: '<button @click="on_click">全局组件-弹出框</button>',
  methods: {
    on_click: function () {
      alert('Yo');
    }
  }
});

局部组件

//定义局部组件
var Alert2 = {
  template: '<button @click="on_click">局部组件-弹出框2</button>',
  methods: {
    on_click: function () {
      alert('Yo2');
    }
  }
}
var vue = new Vue({
  el: '#app',
  components: {
    alert2: Alert2 //注册局部组件
  }
});

html模板与组件代码分离

<template id="myTitleCom">
  <div>
    <span @mouseover="showTip" @mouseout="hideTip">{{title}}</span>
    <span v-if="isShow">{{tip}}</span>
  </div>
</template>

//将组件的内容定义在html中，并在template中引用html的id
Vue.component('mytitle', {
  template: '#myTitleCom',
  data: function () {
    return {
      title: 'Hello'
    }
  }
});

 计算属性computed

<template id="scoreTableCom">
  <table>
    <tr><td>数学</td><td><input type="text" v-model.number="math"/> </td></tr>
    <tr><td>英语</td><td><input type="text" v-model="english"/></td></tr>
    <tr><td>物理</td><td><input type="text" v-model="physics"/></td></tr>
    <tr><td>总分</td><td><input type="text" v-model="sum"/></td></tr>
    <tr><td>平均</td><td><input type="text" v-model="average"/></td></tr>
  </table>
</template>

Vue.component('score-table', {
  template: '#scoreTableCom',
  data: function () {
    return {
      math: 90,
      english: 80,
      physics: 40
    }
  },
  computed: {    //计算属性使用
    sum: function () {
      return this.math + this.english + this.physics;
    },
    average: function () {
      return (this.sum/3).toFixed(2);
    }
  }
});

 管道过滤filter

<template id="priceCom">
  <div>
    <span>{{price | currency}}</span>
    -
    <span>{{price*8 | currency('usd')}}</span>
  </div>
</template>

Vue.component('price', {
  template: '#priceCom',
  data: function () {
    return {
      price: 10
    }
  }
});
Vue.filter('currency', function (val, unit) { 
  val = val || 0;
  unit = unit || '元';
  return val + ' ' + unit;
});

自定义指令directive

<template id="cardCom">
  <div>
    <div v-pos:red.top.right=card1.pinned class="card">
      <button @click="card1.pinned=!card1.pinned">钉住／取消</button>
      <h3>card1:{{card1.pinned}}</h3>
      This a card content !
    </div>
    <div v-pos:blue.bottom.right=card2.pinned class="card">
    <button @click="card2.pinned=!card2.pinned">钉住／取消</button>
    <h3>card2:{{card2.pinned}}</h3>
    This a card content !
  </div>
  </div>
</template>

//定义组件
Vue.component('card', {
  template: '#cardCom',
  data: function () {
    return {
      card1: {pinned: true},
      card2: { pinned: true}
    }
  }
});
// 定义指令
Vue.directive('pos', function (el, binding) {
  var pinned = binding.value;
  var position = binding.modifiers;
  var warning = binding.arg;

  if(pinned){
    el.style.position = 'fixed';
    for(key in position){
      el.style[key] = '10px';
    }
  }else{
    el.style.position = 'static';
  }
  if(warning) {
    el.style.color = warning;
  }
});

混合使用mixins

var base = {
  data: function() {
    return {
      visible: false
    }
  },
  methods: {
    show: function () {
      this.visible = true;
    },
    hide: function() {
      this.visible = false;
    }
  }
}
Vue.component('mix', {
  template: '<div>' +
  '<h4 @mouseover="show" @mouseout="hide">mixins使用-hover me</h4>' +
  '<span v-if="this.visible">test</span>' +
  '</div>',
  mixins: [base]
});

插槽slot

Vue.component('panel', {
  template: '#panelCom'
});

<template id="panelCom">
  <div class="panel">
    <div class="title">
      <slot name="title">default title</slot>
    </div>
    <div class="content">
      <slot name="content">default content</slot>
    </div>
    <div class="footer">
      <slot name="footer">default footer</slot>
    </div>
  </div>
</template>

<panel>
  <div slot="content">this is the custom content !</div>
</panel>

.panel{border:1px solid #ccc;padding:5px; width:220px;}
.panel .title{border-bottom: 1px solid #ccc;}
.panel .footer{border-top: 1px solid #ccc;}

平级组件通信

var Event = new Vue();
Vue.component('Asay', {
  template: '<div>我说：<input @keyup="on_change" v-model="a_said"></div>',
  data: function () {
    return {
      a_said: ''
    }
  },
  methods: {
    on_change: function () {
      Event.$emit('a-say-something', this.a_said);
    }
  }
});
Vue.component('Bsay', {
  template: '<div>A说：{{a_said}}</div>',
  data: function () {
    return {
      a_said: ''
    }
  },
  mounted: function () {
    var This = this;
    Event.$on('a-say-something', function (data) {
      This.a_said = data;
    })
  }
});