JQueryをVue3に置き換えてみよう【サンプルあり】

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 「id:app」の中にVueアプリケーションを作成 -->
<div id="app">
    <header>

        <!-- ハンバーガーメニュー -->
        <!-- クリックイベントとクラスをバインド -->
        <button type="button" class="btn js-btn" @click="openMethod">
            <span class="btn-line" :class="{open:isOpen}"></span>
        </button>

        <!-- ハンバーガーメニューを押したら出るメニュー -->
        <nav>
        <ul class="menu" :class="{open:isOpen}">
            <li class="menu-list">メニュー1</li>
            <li class="menu-list">メニュー2</li>
            <li class="menu-list">メニュー3</li>
            <li class="menu-list">メニュー4</li>
            <li class="menu-list">メニュー5</li>
        </ul>
        </nav>
    </header>
</div>

<!-- CDNでVue.js読み込み -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

// VueからcreatApp関数と、ref関数をインポート
const { createApp, ref } = Vue
const app = Vue.createApp({
    setup() {

        // リアクティブ変数を作成
        const isOpen = ref(false);

        // ハンバーガーボタンを押した際のイベント
        const openMethod = () => {
            isOpen.value = !isOpen.value;
        };
        return {
            openMethod,isOpen
        };
    }
});

//「id="app"」内に表示
app.mount('#app');

<button type="button" class="btn js-btn" @click="openMethod">
    <span class="btn-line" :class="{open:isOpen}"></span>
</button>

v-on:イベントの種類="メソッド名"

もしくは

@イベントの種類="メソッド名"

<span class="btn-line" v-bind:class="{open:isOpen}"></span>

もしくは

<span class="btn-line" :class="{open:isOpen}"></span>

// trueの場合は、openクラスが付与される
<span class="btn-line" v-bind:class="{open:true}"></span>

// falseの場合は、openクラスなし
<span class="btn-line" v-bind:class="{open:false}"></span>

const { createApp, ref } = Vue

// createAppでアプリケーション作成
const app = Vue.createApp({
    
省略

});

//「id="app"」内に表示
app.mount('#app');

const app = Vue.createApp({

    // リアクティブなデータとメソッドを定義
    setup() {

        // リアクティブ変数を作成
        // 初期値としてfalseを設定
        const isOpen = ref(false);

        // ハンバーガーボタンを押した際のメソッド（イベント）
        // 処理の内容は、trueとfalseを切り替えるだけ
        const openMethod = () => {
            isOpen.value = !isOpen.value;
        };

        // 定義した変数とメソッドを返す
        return {
            openMethod,isOpen
        };
    }

});

<div id="app">
  <div class="wrap">
    <ul class="tab_btn">

      <!-- v-forを使用してタブの一覧作成
      クリックイベントとアクティブ時のクラス設定 -->
      <li v-for="(tab, index) in tabs" :key="index" @click="activeMethod(index)" 
          :class="{ active: active === index }">
        {{ tab }}
      </li>
    </ul>
    
    <!-- v-if でタブのコンテンツの表示を切り替える -->
    <ul class="tab_content">
      <li v-if="active === 0">タブ1 content</li>
      <li v-else-if="active === 1">タブ2 content</li>
      <li v-else-if="active === 2">タブ3 content</li>
    </ul>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

const { createApp, ref } = Vue
const app = Vue.createApp({
    setup() {

      // タブの一覧
      const tabs = ref(['タブ1', 'タブ2', 'タブ3']);
      
     // アクティブなタブを示す変数
      const active = ref(0);

      // タブをクリックした際のイベント
      // アクティブなタブの番号を入れる
      const activeMethod = (tab) => {
        active.value = tab;
      };

      return {
        activeMethod,
        active,
        tabs
      };
    }
});

<ul class="tab_btn">
  <li v-for="(tab, index) in tabs" :key="index" @click="activeMethod(index)" 
      :class="{ active: active === index }">
    {{ tab }}
  </li>
</ul>

<ul class="tab_content">
  <li v-if="active === 0">タブ1 content</li>
  <li v-else-if="active === 1">タブ2 content</li>
  <li v-else-if="active === 2">タブ3 content</li>
</ul>

// タブの一覧
const tabs = ref(['タブ1', 'タブ2', 'タブ3']);
      
// アクティブなタブを示す変数
const active = ref(0);

// タブをクリックした際のイベント
// アクティブなタブの番号を入れる
const activeMethod = (tab) => {
    active.value = tab;
};

<div id="app">
  <div class="wrap">
    <button @click="isOpen = !isOpen">Toggle</button>
    <transition name="slide-fade">
      <div v-show="isOpen" class="content">Content</div>
    </transition>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

.content {
  padding: 10px;
  border: 1px solid #000;
  transition: 0.3s ease-out;
  transform-origin: top;
}

/* アニメーション開始前の状態 */
.slide-fade-enter-from, .slide-fade-leave-to {
  transform: scale(1,0);
  opacity: 0;
}

/* アニメーション終了状態 */
.slide-fade-enter-to, .slide-fade-leave-from {
  transform: scale(1,1);
  opacity: 1;
}

const { createApp, ref } = Vue
const app = Vue.createApp({
    setup() {

      // 開閉状態を表す変数
      const isOpen = ref(false);

      return {
        isOpen
      };
    }
});
app.mount('#app');

<!-- ボタンクリックで開閉を切り替え -->
<button @click="isOpen = !isOpen">Toggle</button>

<!-- transitionコンポーネントにslide-fadeという名前を付けています。
これにより付与されるクラスを指定できます。 -->
<transition name="slide-fade">
    <div v-show="isOpen" class="content">Content</div>
</transition>

/* アニメーション開始前の状態 */
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: scale(1,0);
  opacity: 0;
}

/* アニメーション終了状態 */
.slide-fade-enter-to,
.slide-fade-leave-from {
  transform: scale(1,1);
  opacity: 1;
}