Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ

サンプルコード

連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、deep: true,が必要です。
連想配列のObjectを個々に監視したい場合は、watchのキーをクォーテーションで囲って'individuallyObj.aaa'のようにします。

<div id="vue-app">
  <h2>シンプル</h2>
  <input type="text" v-model="hoge">

  <h2>配列</h2>
  <input type="text" v-model="hogeArr[0]">
  <input type="text" v-model="hogeArr[1]">
  <input type="text" v-model="hogeArr[2]">

  <h2>連想配列 丸ごと</h2>
  <input type="text" v-model="hogeObj.aaa">
  <input type="text" v-model="hogeObj.bbb">

  <h2>連想配列 個々</h2>
  <input type="text" v-model="individuallyObj.aaa">
  <input type="text" v-model="individuallyObj.bbb">
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
      hoge: 'str',
      hogeArr: [
        'arr-0',
        'arr-1',
        'arr-2',
      ],
      hogeObj: {
        aaa: 'obj-aaa',
        bbb: 'obj-bbb',
      },
      individuallyObj: {
        aaa: 'object個々に監視aaa',
        bbb: 'object個々に監視bbb',
      },
    },
    watch: {
      hoge: function(val){
        console.log(val);
      },
      hogeArr: function(val){
        console.log(val);
      },
      hogeObj: {
        handler: function(val){
          console.log(val);
          console.log(val.aaa);
          console.log(val.bbb);
        },
        deep: true,
      },
      'individuallyObj.aaa': function(val){
        console.log(val);
      },
      'individuallyObj.bbb': function(val){
        console.log(val);
      },
    },
  });
</script>

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ

HTML5におけるinput要素のpattern、type属性のおさらい - Qiita

サンプルソース

以下のように書いてみました。

<div id="vue-app">
  <h1>Vue.jsのサンプル 静的なページ</h1>
  <input type="text" v-model="postcode1">
  -
  <input type="text" v-model="postcode2">
<!--/#vue-app--></div>

<script src="js/vue.js"></script>
<script>
var vm = new Vue({
  el: '#vue-app',

  data: {
    postcode1: '',
    postcode2: '',
  },

  watch: {
    postcode1: function(val){
      var num = this.trimNumber(val);
      num = num.substr(0, 3);
      this.postcode1 = num;
    },
    postcode2: function(val){
      var num = this.trimNumber(val);
      num = num.substr(0, 4);
      this.postcode2 = num;
    },
  },

  methods: {
    trimNumber: function(val){
      var regExp = /[0-90-9]+/;
      var matchResult = val.match(regExp);
      return matchResult === null ? '' : matchResult[0];
    },
  },
});
</script>

display:flexの学習 その0001-06 cross axis方向の余白の配分(flexアイテムの配置)を設定する align-content、align-items、align-selfについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、cross axis方向の余白を調整する方法についてです。 以下のいずれかのプロパティを設定することによって調整できます。

  • align-content(flexコンテナに設定するプロパティ)
  • align-items(flexコンテナに設定するプロパティ)
  • align-self(flexアイテムに設定するプロパティ)

align-contentについて

効果があるのはflexアイテムが複数行のとき

align-contentプロパティはflexコンテナに設定するプロパティであり、flexアイテムが複数行になっているときにのみ効果が現れるプロパティです。 よって、flex-wrapがwrapであることも前提になると思います。

サンプルコード

align-contentを使用して、cross axisのcenterに配置するサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

align-itemsについて

ここを読むと解りやすかった

flexコンテナに設定するプロパティです。

基本的には「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」に画像と解説があって解りやすかったです。

サンプルの構文については「align-items - CSS | MDN」が良さそうです。

ただ前提知識として、基本的な用語を理解しておく必要はやっぱりあるかもしれないです。

基本的な用語については「CSS flexible box の利用 - CSS | MDN」が参考になりました。

align-selfについて

align-itemsの値を個別に上書き

align-selfプロパティをflexアイテムに設定することによって、align-itemsで設定した値を、flexアイテム毎に上書きできます。

サンプルコード

以下のようなサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
  align-self: flex-end;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

display:flexの学習 その0001-05 main axis方向の余白の配分(flexアイテムの配置)を設定する justify-contentについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、main axis方向の余白の配分についてです。

  • main-start側にflexアイテムを詰めて配置する
  • main-end側にflexアイテムを詰めて配置する
  • main-start、main-endに余白を均等に配分してflexアイテム同士はcenterに詰めて配置する
  • main-start、main-end、flexアイテムの間に余白を均等に配分する
  • main-start、main-endには余白を入れず、flexアイテムの間だけに余白を均等に配分する

main-startやmain-endとあるように、flex-directionの値をもとに、縦方向または横方向の余白が調整されます。

画像も合わせた解説はコリス

画像つきの説明によって、flexアイテムと余白の関係性が解りやすいのが「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」でした。

2016年12月14日に公開された記事で、現在の日付から比較的新しくて解りやすかったです。

文字での解説はMDN

文字での説明はサンプルコードも含めて「justify-content - CSS | MDN」がとても解りやすかったです。

以下は引用です。

CSS justify-content プロパティは、コンテナの main-axis に沿ってスペースを flex アイテムの間や周囲へどのように分配するかを定義します。

長さや自動マージンが適用された後に配置が行われることから、flex-grow が 0 ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

display:flexの学習 その0001-04 flexアイテムの並び順を個別に指定する orderについて

参考にさせて頂いたページ

orderについて

flexアイテムに設定するプロパティです。 直感的にわかりやすいので、参考ページから特に補足することもありませんでした。

display:flexの学習 その0001-03 flexアイテムの伸縮比率とベース幅 flex-grow、flex-shrink、flex-basis、flexについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、以下のようなことについてです。flexアイテムに設定するプロパティです。

  • flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率
  • flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率
  • 伸縮していない状態のflexアイテムの幅または高さ

flex-growについて

flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率です。 0を設定すると伸びません。

flex-shrinkについて

flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率です。 flex-shrinkに0を設定すると、flex-basisで設定した値よりも縮まなくなります。 1以上の数値を設定したとき、flex-basisで設定した値よりも縮むようになります。

flexコンテナにflex-wrap: nowrap;を設定している場合は、コンテナよりもはみ出していきます。

flex-basisについて

伸縮していない状態のflexアイテムの幅または高さの設定です。

flex-basis - CSS | MDN」によると、設定できる値の種類は非常に豊富なようです。

autoだとコンテンツが入りきる最小値になります。

flexについて

上記した3つのプロパティを設定できるショートハンドです。

それぞれの値の初期値は以下の通りです。

flex-grow: 0
flex-shrink: 1
flex-basis: auto

flexコンテナにrowが設定されているとき、flexアイテムにflex-basisを設定すると幅に適用されるようです。 flexコンテナにcolumnが設定されているとき、flexアイテムにflex-basisを設定すると高さに適用されるようです。

display:flexの学習 その0001-02 並べる方向と改行 flex-direction、flex-wrap、flex-flowについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、以下のようなことについてです。

  • flexアイテムを縦に並べるか横に並べるか
  • flexアイテムを改行するかしないか

flex-directionについて

flexコンテナにこのプロパティを設定します。

子要素であるflexアイテムを縦に並べるか、横に並べるかを設定できます。

また、flex-direction: row-reverse;を設定することで、右から左へ並べることができ、flex-direction: column-reverse;を設定することで、下から上へ並べることができます。

flex-wrapについて

flexコンテナにこのプロパティを設定します。

flexコンテナの幅または高さに、flexアイテムが入りきらなくなったとき、改行を許可するかしないかを設定します。

以下のような設定から選べるようです。このプロパティでもreverseがあります。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-flowについて

上記した、flex-direction、flex-wrapをまとめて設定できるショートハンドです。