Vue ディレクティブ

yuyuyuriko78 commented 4 years ago

ディレクティブとは

directive：指示
- Vue.jsに何らかの指示を行うしくみのこと。
v-という接頭辞がつく

参考　 https://blog.capilano-fw.com/?p=530 https://chietech.com/2019/05/04/vue-js-directive/#v-show

yuyuyuriko78 commented 4 years ago

v-text

HTMLタグ内のテキストを指定する（ただのテキストとして）

v-text="--"と指定したテキストをバインディングする。
HTMLコードも、普通のテキストとして扱われる。タグなどを検知してくれない。

v-html

HTMLタグ内のテキストを指定する（HTMLとして）

v-html="--"と指定したテキストをバインディングする。
HTMLコードを、ちゃんとHTMLコードとして扱ってくれる。タグを検知する。

<div id="app">
  <div v-text="name"></div>
  <div v-html="name"></div>
</div>
<script>
  new Vue({
    el: "#app",
    data:{
      name: "東京都<br>大阪府"
    }
  });
</script>

東京都<br>大阪府
東京都
大阪府

yuyuyuriko78 commented 4 years ago

v-class

yuyuyuriko78 commented 4 years ago

v-on

イベントを指定する。

v-on:action = "function()"
- action属性：アクションの種類を指定する。
- "function()"：Vueインスタンス内のメソッド名が入る。actionというイベントが起こったら実行する。
v-on :action = "function()"は@action = "function()"と省略できる
- 省略形のほうが可読性が上がるのでおすすめ）

アクション名	詳細
click	クリックされたとき
focus	フォーム要素にフォーカスが当たったとき
blur	フォーム要素からフォーカスが外れたとき
select	フォーム要素内のテキストが選択されたとき
change	フォーム要素の選択肢や入力内容が変わったとき
submit	フォーム要素を送信しようとしたとき
reset	フォームがリセットされたとき
---	---
---	---
---	---

例①　ボタンをクリックすると「クリックされました」というポップアップが表示される

<div id="app">
<button type="button" v-on:click="onClick()">ボタン</button>
</div>
<script>
new Vue({
  el: "#app",
  methods: {
    onClick: function() {
       alert("クリックされました");
    }
  }
});
</script>

例②　

yuyuyuriko78 commented 4 years ago

v-bind

Vueインスタンスの値→HTMLに出力（一方通行）

Vueインスタンスの値が変わると、HTMLが変わる。

<div id="app">
<a v-bind:html="url">リンク</a>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    url: "http://yahoo.co.jp"
  }
});
</script>

yuyuyuriko78 commented 4 years ago

v-model

Vueインスタンスの値↔HTML（双方向！！）

Vueの値が変わるとHTMLが変わる
だけではなく、HTMLの値が変わるとVueの値が変わるという逆の方向でもつながる
- →インプットデータのバインディングにはv-bindではなくv-modelを使用する

例１： ①入力ボックスの中身が変更されたら、リアルタイムで「name」の値が変わる ②「name」の値が変更されたらリアルタイムで入力ボックスの中身も変わる

<div id="app">
<input type="text"  v-model="name">
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      name: "hanako"
    }
  });
</script>

例２： ①

yuyuyuriko78 commented 4 years ago

v-bindとb-modelの違い

v-bind：VueからHTMLの一方通行
v-model ：VueとHTMLの双方向

<div id="app">
  v-bind[{{ data1 }}]
  <div><input type="text" v-bind:value="data1"></div>
  <br><br>
  v-model[{{ data2 }}]
  <div><input type="text" v-model="data2"></div>
</div>
<script>
var app = new Vue({
   el: "#app",
  data: {
    data1: "data1",
    data2: "data2"
  }
});

yuyuyuriko78 commented 4 years ago

v-if

条件によって表示内容を変える（HTML要素そのものを変える）

v-if="条件式"
- 条件式にはbooleanを返す条件式を書く。
条件が満たされないときは、何も表示されない。

例：テストが満点だったとき「満点です！」と表示させる（この場合80点なので何も表示されない）

<div id="app">
  <div v-if="score === 100">満点です！</div>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    score = 80
  }
});
</script>

v-else-if, v-else

2つ以上の条件式を追加する

例：60点以上のとき「合格です」、60点未満のとき「不合格です」と表示させる

<div id="app">
  <div v-if="score === 100">満点です！</div>
  <div v-else-if="score>=60">合格です。</div>
  <div v-else>不合格です。</div>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    score = 80
  }
});
</script>

yuyuyuriko78 commented 4 years ago

v-show

条件によって表示内容を変える（HTML要素は不変）

真偽値によって表示/非表示を切り替える
style属性のdisplay: nome;を追加し、表示と非表示を切り替える
DOM上には存在する
- →表示・非表示の切り替えが頻繁に行われる要素に関して、表示にかかるコストを下げることができる！（メリット）
else/else-ifは使えない。複数の条件分岐をしたいときはv-ifを使用する。

yuyuyuriko78 commented 4 years ago

v-transition

aa

yuyuyuriko78 commented 4 years ago

v-el

aa

Atsuhiko commented 4 years ago

v-on でボタンを押したら Flask に情報が飛んで、Flask で POST 側では受けて DB に書き込むというコードを書きたいです。よろしくお願いします。

Atsuhiko / Web-App