Vue基本操作備忘録

(個人の意見・感想も含まれているので、必ずしも正しい情報ではないので、予めご了承ください。
　また、間違った点がありましたら指摘していただきまけますと幸いです。)

エディターにはCodePenなるものを使ってみる。
書いたコードがリアルタイムで画面に表示される。
勉強として使うには非常にいいツールなのでは。
CodePen

当記事はFlaskと一緒に使うことを前提として進めています。

はじめに

チュートリアルの一番初めです。
自分なりにどのように作用し合っているのか確認してみましょう。

…と思ったけど、公式ドキュメントはちょっと重かった、、、

書籍を参考に

Vueの基本的な考え方としては、

「Vue」というオブジェクトを作成し、
HTMLの特定のタグに割り当て、
表示を組み込む。

Vueオブジェクトの作成する処理

Vueオブジェクトを作成するとき、作成に必要な情報をオブジェクトにまとめたものを引数に指定する。

new Vue({
    el:'#app',
    data: {
        vue_msg: 'This is Vue.js!'
    }
});

el では組み込みたいタグを指定している。
上の例でいうと、idがapp の中身に適用している

<div id="app">
...
</div>

このVueが適用される範囲をコンテナと呼ぶ
vue_msg はコンテナ内では変数として利用できる。

<h2> {{ vue_msg }} </h2>

Flaskのjinjaと区別する

jinjaテンプレートと区別するために、
コンテナの前後を {% raw %} ～ {% endraw %}
で区切るらしい。

コンポーネント

ここの理解が一番大変そう。
書籍を参考にしてみたけど一旦公式ドキュメント参考に

html　test.html

<div id="components-demo">
  <button-counter></button-counter>
</div>

js test.js

// Create a Vue application
const app = Vue.createApp({})

// Define a new global component called button-counter
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button v-on:click="count++">
      You clicked me {{ count }} times.
    </button>`
})

app.mount('#components-demo')

すると下記添付のように、
クリックするとカウントが増えていくボタンが生成される。
詳しく見てみよう。

①定数「app」を宣言。
Vue.createApp 関数を発動。
②appに component を付けて、「button-counter」(第一引数)という部品を作る。

コンボーネントとは、「表示」「データ」「処理」を一体化したものだという。
色々便利な部品と考えていいかもしれない。

③data()によって変数を宣言。(count)
countを返してくれる？ってこと？

④テンプレートを宣言する(宣言であっているのかな？)
この中にはHTML形式で、作りたいタグを作る。
バッククオーテーションで囲うのかな？

(⑤ ディレクティブ「v-on:click」
クリックすると変数のcountをインクリメントしていく。)

⑥完成したら、app定数をid=vomponents-demo にマウントさせる。

うーん、、、、むずい。

HTMLに組み込む場合

先程は別々のファイルで実行していたが、HTMLに埋め込む。

コンポーネントのテンプレート

<script type="text/x-template" id="テンプレートのID">
    ......表示内容......
</script>

type="text/x-template"を記載すればscriptタグ内にHTMLタグを記述できるらしい。

コンポーネントのオブジェクト

Vue.component( コンポーネント名 ,{
    template: テンプレートの指定
});

コンポーネントの利用

<コンポーネント名 />

これを記載すれば、その箇所に先程作成したコンポーネントを埋め込める。

続きは次回へ

参考書籍