Vue備忘録 with Flask

{% block content %}
<div class="mb-3" id="msg">{{ message }}</div>

<!-- Vie.js container -->
<div id="app" class="m-5">
  <mycomp />
</div>

<!-- mycomp's template -->
{% raw %}
<script type="text/x-template" id="mycomp-template">
  <p class="alert alert-primary h5">
    Hello! This is My-Component!
  </p>
</script>
{% endraw %}

<!-- Vue.js script -->
<script>
// mycomp object
Vue.component('mycomp',{
  template: 'mycomp-template',
});  

// start vue
new Vue({
  el: '#app'
});
</script>
{% endblock %}

今回の課題

突然ソースを出してみましたが、今回はこちらを倒していきます。

Vueオブジェクト

Vueコンポーネントを作成する際に、
mycomp というコンポーネント名を付ける。
これによって <mycomp /> という記述でコンポーネントを呼びだせる。

template の箇所でどのテンプレートに処理を付加させるかを決定している。
今回の処理は__mycomp-template__ をidとして指定している箇所に
Vueが適用される。

最後に、(最初でもいいと思うが)どこのタグ内にVueを適用するかを
new Vue を用いて宣言する。

これでVueが使える状態になったのではないか。

テンプレート部

Vueの処理を受ける見た目を作成する。
scriptタグである必要はあるのだろうか...?
rawもここを囲むのか...?

色々思う所はあるが、先に進んでみよう。

表示部

見事 <mycomp /> で見た目ができた。

Vue.jsは4つの部分で構成されている

・Vue.jsコンテナ
・コンポーネントのテンプレート
・コンポーネントのスクリプト
・Vue.jsオブジェクト作成

プログラムの中心は「コンポーネントのテンプレート」「コンポーネントのスクリプト」となる。

と、Vueオブジェクトの作成方法は2種類あるみたいだね。
今後どういう違いがあるのかを明確にできればいいかな。

プロパティ

作成したテンプレートに動的な値を入れられるようにする。
例えば前回の例で、
<mycomp /> というテンプレートを作成した。

ここに、class、idのように、内部的な値を渡したい。
それを可能にするのがプロパティである。
https://qiita.com/raisack8/items/49f21906dbc7576000e9

早速コード

<!-- Vue.js container -->
<div id="app">
  <mycomp name="Hanako" 
    msg="This is my first message. hum..." />
</div>

<!-- mycomp's template -->
{% raw %}
<script type="text/x-template" id="mycomp-template">
  <div>
    <p>
      Hi! I'm {{ name }}
    </p>
    <p>
      {{ msg }}
    </p>
  </div>
</script>
{% endraw %}

<!-- Vue.js script -->
<script>
//mycomp object
Vue.component('mycomp',{
  template: '#mycomp-template',
  props:['name', 'msg']
})
//....
</script>

テンプレートの中で変数を使っている。。

テンプレートを作成している中で、変数を扱いたくなったら、一旦{{}}で変数名を囲み、Vueスクリプトの中に props を使って変数を配列で宣言させる
ここでは"name"、"msg"を変数として使えるよってこと

参考書籍