Vue.jsの練習②

引き続き、『忍者コード』のVue.jsの練習問題を解いていきます。

練習ページ：https://skblogwp.com/practice/javascript/article_005/

今回やりたいこと
HTML
CSS
Vue.js
まとめ

今回やりたいこと

Vue.jsが効いていない状態ではstyleが効いていない文字を、Vue.jsでstyleを有効にする。

HTML

▼表示エリア

<div id="app_2">
     <div v-bind:class="{active:isActive}">
          Active!!
     </div>
</div>

▼外部JSファイル読み込みは<body>終了の直前に

　<!-- 外部JavaScriptファイル -->
　<script src="/practice/common/js/vue_app_2.js"></script>
</body>

▼もちろん、CDNの読み込みも忘れずに

<!--Vue.jsCDN読み込み-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11"></script>

CSS

Vue.jsが有効の際のstyleを記述する。

/*[start]js記事005用*/
#app_2{
    width: 30%;
    margin: 30% auto;
    padding: 1rem;
    background: #40B983;
    color: #ffffff;
    text-align: center;
    box-shadow: 6px 6px #ddd;
}
/*[finish]js記事005用*/

Vue.js

var app2 = new Vue({
    el: "#app_2",
    data: {
      isActive: true
    },
  });

new Vue({...})
→ 新しくVueインスタンス（実体）を作成する構文です。Vueアプリの「心臓部」となる部分です。

var app2
→ 作成したVueインスタンスを変数app2に代入しています。この変数を使って、後からアプリの状態にアクセスしたり操作したりできます。

el（エレメント）は、Vueアプリを「どのHTML要素に紐づけるか」**を指定するプロパティです。

data オブジェクトは、Vueインスタンスが管理するリアクティブなデータを定義する場所です。

isActive という変数を定義し、初期値を true に設定しています。

まとめ

Vueでは、v-bindでclassのつけ外しができるようになります。
‘isActive’がtrueであれば‘active’というclassが有効になり、styleが適用されます。falseになれば無効になります。