Vue.js 3 コンポーネントの使い方 ー 応用

投稿者: Auther | 7 ヶ月, 3 週間 前 | 0 のコメント

h関数によるレンダリング

htmlオブジェクトの生成

h(タグ名、属性情報、内部の要素)

<script>
import { h } from 'vue'

export default {
  name: 'HelloWorld',
  data() {
    return {
      title: 'HelloWorld',
      message:'This is sample message.',
    }
  },
  render() {
    return  h('div',{
        class:'alert alert-warning'
      },
      [
        h('h2', this.title),
        h('p', this.message)
      ])
    }
}
</script>
App.vue
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

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


JSX

テキストではなく、HTMLのコードそのものを扱うことができる

export default {
  name :'HelloJSX',
  data() {
    return {
      title: 'HelloJSX',
      message:'This is sample message.',
    }
  },
  render(h) {
    return (
      <div class="alert alert-primary">
        <h2>{ this.title }</h2>
        <p>{ this.message }</p>
      </div>
    )
  }
}

App.vue

<template>
  <div id="app">
    <HelloJSX />
  </div>
</template>

<script>
import HelloJSX from './components/HelloJSX.jsx'

export default {
  name: 'app',
  components: {
    HelloJSX
  }
}
</script>

propsを使う場合

export default {
  name :'HelloJSX',
  props: {
    title: String,
    msg: String
  },
  render(h) {
    return (
      <div class="alert alert-primary">
        <h2>{ this.title }</h2>
        <p>{ this.msg }</p>
      </div>
    )
  }
}
<HelloJSX title="OK, Vue3" 
  msg="※属性で設定したメッセージ。" /> //ここで指定できる

属性の指定

export default {
  name :'HelloJSX',
  props: {
    title: String,
    msg: String
  },
  data() {
    return {
      cls_title: 'text-danger h1',
      cls_msg: 'text-primary h5'
    }
  },
  render(h) {
    return (
      <div class="alert alert-primary">
        <h2 class={this.cls_title}>{ this.title }</h2>
        <p class={this.cls_msg}>{ this.msg }</p>
      </div>
    )
  }
}

Getter/Setter

算出プロパティ:処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができる。

2倍と2乗の算出プロパティ

<template>
  <div class="alert alert-primary">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <p class="h5">val: {{val}}</p>
    <div class="form-group text-left">
      <label>* 2:</label>
      <input type="number"
        v-model="a" class="form-control">
    </div>
    <div class="form-group text-left">
      <label>^ 2:</label>
      <input type="number"
        v-model="b" class="form-control">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
  },
  data() {
    return {
      message: '算術プロパティの利用。',
      val: 0,
    }
  },
  computed: {
    a: {
      get() {
        return this.val * 2
      },
      set(value) {
        this.val = Math.floor(value / 2)
      },
    },
    b: {
      get() {
        return this.val * this.val
      },
      set(value) {
        this.val = Math.floor(Math.sqrt(value))
      },
    },
  },
  created() {
    this.val = 10
  },
}
</script>

ウオッチャ

特定の値が変更された時、様々な値を変更する必要がある時に便利

<template>
  <div class="alert alert-primary">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <div class="form-group text-left">
      <label>Value:</label>
      <input type="number" v-model="val"
        class="form-control">
    </div>
    <table class="bg-white table mt-4">
      <tr><th>add:</th><td>{{add}}</td></tr>
      <tr><th>sub:</th><td>{{sub}}</td></tr>
      <tr><th>multiple:</th><td>{{mult}}</td></tr>
      <tr><th>divide:</th><td>{{div}}</td></tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      title: 'Watchers',
      message: '値の監視',
      val: 0,
      add: 0,
      sub: 0,
      mult:0,
      div: 0,
    }
  },
  watch:{
    val(newValue, oldValue) {
      console.log(oldValue + ' -> ' + newValue)
      this.val = newValue
      var val = parseInt(this.val)
      this.add = Math.floor(val + 2)
      this.sub = Math.floor(val - 2)
      this.mult = Math.floor(val * 2)
      this.div = Math.floor(val / 2)
   }
  },
  created(){
    this.val = 6
  },
}
</script>

イベントの伝搬

<template>
  <div class="alert alert-primary">
    <h1>{{ title }}</h1>
    <pre v-on:click="clear">{{ message }}</pre>
    <hr>
    <div id="out" class="out" v-on:click="a_event">A
      <div id="mid" class="mid" v-on:click="b_event">B
<--- 伝搬をストップする場合 <div id="mid" class="mid" v-on:click.stop="b_event">B --->
        <div id="in" class="in" v-on:click="c_event">C
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: function(){
    return {
      title: 'Event',
      message: 'イベントの伝播について。\n',
    }
  },
  methods: {
    a_event(event) {
      this.message += "A-Event [" + event.target.id
        + ' → ' + event.currentTarget .id + "]\n"
    },
    b_event(event) {
      this.message += "B-Event [" + event.target.id
        + ' → ' + event.currentTarget .id + "]\n"
    },
    c_event(event) {
      this.message += "C-Event [" + event.target.id
        + ' → ' + event.currentTarget .id + "]\n"
    },
    clear() {
      this.message = 'イベントの伝播について。\n'
    }
  },
}
  
</script>
<style>
pre {
  font-size:16pt;
  line-height: 1.25;
}
div.out {
  padding: 0px;
  background-color: #eee;
  width:300px;
  height:200px;
}
div.mid {
  padding: 0px;
  background-color: #ddd;
  width:200px;
  height:170px;
}
div.in {
  padding: 0px;
  background-color: #ccc;
  width:100px;
  height:140px;
}
</style>

キーイベント

<template>
  <div class="alert alert-primary">
    <h1>{{ title }}</h1>
    <pre>{{ message }}</pre>
    <hr>
    <div>
      <input type="text" class="form-control"
        v-on:keypress="type"
        v-on:keydown.delete="clear"
        v-on:keydown.space="space"
        v-on:keydown.enter="enter"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      title: 'Event',
      message: '',
    }
  },
  methods: {
    type(event) {
      if (event.key == 'Enter'){ return }
      this.message += event.key + ' '
      event.target.value = ''
    },
    clear() {
      this.message = ''
    },
    space() {
      this.message += '_ '
    },
    enter(event) {
      var res = this.message.split(' ').join('')
       this.message = res.split('_').join(' ')
       event.target.value = ''
    }
  },
}
</script>

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(4) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (113) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力