refirio.org

Memo

■便利な機能
■スロットを使う

C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
    <HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!">
      <p>This is sample compoment.</p>
    </HelloWorld>


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <div><slot /></div>
  </div>
</template>


<slot /> の部分に「This is sample compoment.」が表示される

■名前付きスロットを使う

C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
    <HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!">
      <p>This is sample compoment.</p>
      <p slot="a">Message A.</p>
      <p slot="b">Message B.</p>
    </HelloWorld>


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <div><slot /></div>
    <div><slot name="a" /></div>
    <div><slot name="b" /></div>
  </div>
</template>


<slot name="a" /> の部分に「Message A.」が表示される
<slot name="b" /> の部分に「Message B.」が表示される

■アニメーション

C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template>
  <div id="app">
    <HelloWorld title="HelloWorld"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <button v-on:click="doAction">
      {{ btn }}
    </button>
    <transition name="transit">
      <p v-if="flg" class="trans">トランジション</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
  },
  data: function() {
    return {
      message: 'Transition Sample!',
      flg: true,
      btn: '表示/非表示',
    };
  },
  methods: {
    doAction: function() {
      this.flg = !this.flg;
    }
  }
}
</script>

<style>

/* 共通 */
.trans {
  width: 150px;
  background-color: #FFDDDD;
  padding: 10px;
  color: #FF4500;
}

.transit-enter-active {
  transition: 1.0s;
}
.transit-leave-active {
  transition: 1.0s;
}

/* フェードイン・フェードアウト */
/*
.transit-enter-active {
  transition: opacity 1.0s;
}
.transit-leave-active {
  transition: opacity 1.0s;
}
.transit-enter {
  opacity: 0;
}
.transit-enter-to {
  opacity: 1.0;
}
.transit-leave {
  opacity: 1.0;
}
.transit-leave-to {
  opacity: 0;
}
*/

/* 平行移動 */
/*
.transit-enter, .transit-leave-to {
  transform: translateX(200px) translateY(-200px);
  opacity: 0.1;
}
*/

/* 拡大縮小 */
/*
.transit-enter, .transit-leave-to {
  transform: scale(5.0);
  opacity: 0.1;
}
*/

/* 回転 */
/*
.transit-enter, .transit-leave-to {
  transform: rotateZ(360deg);
  opacity: 0.1;
}
*/

</style>
■計算アプリを作成>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue create calc_app
>cd calc_app
>npm run serve


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\App.vue
<template>
  <div id="app">
    <Calc v-bind:title="message" v-on:result-event="endCalculate"/>
    <hr>
    <div><table v-html="log"></table></div>
  </div>
</template>

<script>
import Calc from './components/Calc.vue'

export default {
  name: 'app',
  components: {
    Calc
  },
  data: function() {
    return {
      message: 'Calculation',
      result: []
    };
  },
  created: function() { // インスタンスが生成されたとき
    var log = localStorage.getItem('log');
    if (log != null) {
      this.result = JSON.parse(log);
    }
  },
  computed: { // 値が変わったとき
    log: function() {
      var table = '<tr><th>式</th><th>値</th></tr>';
      for (var i in this.result) {
        table += '<tr><td>' + this.result[i][0] + '</td><td>' + this.result[i][1] + '</td></tr>';
      }
      return table;
    }
  },
  methods: { // メソッド
    endCalculate: function(exp, res) {
      this.result.unshift([exp, res]);
      var log = JSON.stringify(this.result);
      localStorage.getItem('log', log);
    }
  }
}
</script>

<style>
table th, table td {
  border: 1px solid #000;
}
</style>


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\components\Calc.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <p>
      <input size="30" value="" v-model="formula">
      <button v-on:click="calculate">計算する</button>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Calc',
  props: {
    title: String,
  },
  data: function() {
    return {
      message: '式を入力してください:',
      formula: '',
    };
  },
  methods: { // メソッド
    calculate: function() {
      var expression = 'function f() { return ' + this.formula + '; } f();';
      var answer = eval(expression);

      this.message = '計算結果: ' + answer;
      this.$emit('result-event', this.formula, answer);
    }
  }
}
</script>
Memo

Advertisement
