コンポーネント/インスタンス オプションの順序

よく使うのだけ抜粋。

export default {
  name: '',
  components: {},
  filters: {},
  mixins: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {},
}

他のも詳しく知りたい場合はこちら、
参照：コンポーネント/インスタンス オプション順序

要素の属性の順序

• is
• v-for
• v-if, v-else-if, v-else
• v-show
• v-cloak
• v-pre
• v-once
• id
• ref
• key
• v-model
• v-on
• v-html
• v-text

参照：要素の属性の順序

初めに

ここ最近Vue.jsの勉強をしているが、今日はまとまった時間が取れないのでドキュメントが読めない。そこでアニメーションを作って楽しむことにした。

どんなアプリか

映画でよくあるパスワードを破るシーン

文字がA, B, C, ... と勢いよく次々に表示され、パスワード解除！みたいなシーンを再現してみる。

実装

v-on ディレクティブでSTARTボタンを押したら文字がA, B, C, ... と次々に表示されるようにする。
念のためSTOPボタンも用意。

  <div id="app">
    <button v-on:click="rotateStart()">START</button>
    <button v-on:click="rotateStop()">STOP</button>
    <p>{{ character }}</p>
    <p>{{ message }}</p>
  </div>

アルファベットはリストにしてぐるぐる回るように。
sleep で0.05秒で文字が切り替わるよう設定。

var app = new Vue({
  el: '#app',
  data: {
    character: '',
    message: '',
    isTrue: true,
    cipher: 'HELLO WORLD'
  },
  methods: {
    rotateStart: async function() {
      var aplhabetList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
      var cipherList = this.cipher.split('');
      var count = 0;
      var cipherIndex = 0;
      while (this.isTrue) {
        this.character = aplhabetList[count % 26];
        if (cipherList[cipherIndex] === this.character) {
          this.message += this.character;
          if (cipherList.length === cipherIndex + 1) {
            this.character = 'You broke the code!!'
            break;
          } else {
            cipherIndex++;
          }
        } else if (cipherList[cipherIndex] === ' ') {
          this.message += ' ';
          cipherIndex++;
        }
        await this.sleep(50);
        count++;
      }
    },
    rotateStop: function(){
      this.isTrue = false
      this.message = ''
    },
    sleep: time => new Promise(resolve => setTimeout(resolve, time))
  }
})

• 画面更新後

• START押下後

動いてる！楽しい！

• 自然停止

datatableの並び替えについて

デフォルトのソートは便利ですが、「100円、200円」のような文字列の場合、思うような並び替えができません。

昇順の並び替えですので、「みかん」⇒「りんご」の順番で並び替えてほしいところ。

カスタムソートを実装する

<v-data-table
  :custom-sort="custom"           
>

カスタムソートを実装するにはcustom-sortを定義し、ソート条件を作成します。
以下の例では、値段の並び替えの場合、文字列から数値を取り出し比較しています。

  methods: {
    custom: function(items, index, isDesc) {
      items.sort((a, b) => {
        if (index[0] === 'price') {
          var priceA = a[index].replace(/[^0-9]/g, '');
          var priceB = b[index].replace(/[^0-9]/g, '');
          if (!isDesc[0]) {
            return priceA - priceB;
          } else {
            return priceB - priceA;
          }
        } else {
          if (!isDesc[0]) {
            return a[index] < b[index] ? -1 : 1;
          } else {
            return b[index] < a[index] ? -1 : 1;
          }
        }
      });
      return items;
    }

使用したテストデータです。

  data () {
    return {
      headers: [
        { text: '名前', value: 'name',},
        { text: '値段', value: 'price' },
      ],
      items: [
        { name: 'りんご', price: '50円',},
        { name: 'みかん', price: '10円',},

カスタムソート実装後、理想の並び順で表示されるようになりました。

GTM って何よ？

google analytics や adwords のタグをかんたんに管理できる。
今後は直接挿入でなく、これを使ってくべきですね。

やり方教えてよ

まずはアカウントを作ろう

https://tagmanager.google.com/

英語のポップアップ（利用規約)が出るので、OKする

ここまででアカウント作成OK

Analyticsの設定

タグを選択し、新規をクリック。
タグの設定をクリック。

Google アナリティクス:ユニバーサル アナリティクスを選択

Google アナリティクス設定の 新しい変数を選択

トラッキングIDにあなたの Analytics のIDを入れる

で保存。
今度はトリガー選択をクリックし、 All Pages を選択し、保存。

ここまでできたら、タグを有効にするために公開しましょう。

これで公開され、Analytics の設定が完了しました。

続いて、vue.js で利用してみましょう。

※古いAnalyticsタグは削除しておいたほうが良いかも

vue2 で使う場合は必ずバージョンを指定。
でないと、vue3 用のが入ってしまいバグる

npm install vue-gtm@3.0.0-vue2

インスコok

続いて使うにはapp.jsの最下部らへんに

app.js

import VueGtm from 'vue-gtm';

Vue.use(VueGtm, {
    id: 'GTM-hoge92',//your
});

ページにアクセスしてテストしてみよう

はい！
アクセスがカウントされていますね。

Google広告のコンバージョンとか取得するには？

https://www.kwm.co.jp/blog/cv_tag_setting2019/

を参考に設定すると良い。
ちなみに、google広告をクリックしていないと、コンバージョンに反映されない。
なので、有料でクリックする必要がある。