Youdaの新しいプチビューの実装

<本文>
  <script src="https://unpkg.com/petite-vue" 初期化を延期する></script>
  <div v-scope="{ カウント: 0 }">
    <button @click="count--">-</button>
    <span>{{ カウント }}}
    <button @click="count++">+</button>
  </div>
</本文>

<!-- Alpine.js -->
<div x-data="{ 開く: false }">
  <button @click="open = true">ドロップダウンを開く</button>
  <ul x-show="開く" @click.away="開く = false">
    ドロップダウン本文
  </ul>
</div>

<本文>
  <div v-scope="{ カウント: 0 }">
    <button @click="count--">-</button>
    <span>{{ カウント }}}
    <button @click="count++">+</button>
  </div>
  <!-- 本文の下部に配置します -->
  <script src="https://unpkg.com/petite-vue"></script>
  <スクリプト>
    PetiteVue.createApp().マウント()
  </スクリプト>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    作成App().マウント()
  </スクリプト>
  
  <div v-scope="{ カウント: 0 }">
    <button @click="count--">-</button>
    <span>{{ カウント }}}
    <button @click="count++">+</button>
  </div>  
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    作成App({
      カウント: 0,
      インクリメント() {
        this.count++
      },
      減算() {
        this.count--
      }
    }）。マウント（）
  </スクリプト>
  
  <div v-スコープ>
    <button @click="decrement">-</button>
    <span>{{ カウント }}}
    <button @click="増分">+</button>
  </div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    作成アプリ({
      カウント: 0
    }).mount('#app')
  </スクリプト>
  
  <div id="アプリ">
    {{ カウント }}
  </div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    作成アプリ({
      onMounted1(el) {
        console.log(el) // <span>1</span>
      },
      onMounted2(el) {
        console.log(el) // <span>2</span>
      }
    }).mount('#app')
  </スクリプト>
  
  <div id="アプリ">
    <span @mounted="onMounted1($el)">1</span>
    <span @mounted="onMounted2($el)">2</span>
  </div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
  'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。

  関数 Counter(props) {
    戻る {
      $template: '#counter-template',
      カウント: props.initialCount、
      インクリメント() {
        this.count++
      },
      減算() {
        this.count++
      }
    }
  }

  作成App({
    カウンタ
  }）。マウント（）
</スクリプト>

<テンプレート id="カウンターテンプレート">
  <button @click="decrement">-</button>
  <span>{{ カウント }}}
  <button @click="増分">+</button>
</テンプレート>

<!-- 再利用 -->
<div v-scope="カウンター({ 初期カウント: 1 })"></div>
<div v-scope="カウンター({ 初期カウント: 2 })"></div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp, reactive} をインポートします。

    constストア = リアクティブ({
      カウント: 0,
      インクリメント() {
        this.count++
      }
    })
    //カウントを1増やす
    ストア.増分()
    作成App({
      店
    }）。マウント（）
  </スクリプト>

  <div v-スコープ>
    <!-- 出力 1 -->
    <span>{{ ストア.count }}</span>
  </div>
  <div v-スコープ>
    <button @click="store.increment">+</button>
  </div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    
    定数autoFocus = (ctx) => {
      ctx.el.focus()
    }

    createApp().directive('auto-focus', autoFocus).mount()
  </スクリプト>

  <div v-スコープ>
    <v-オートフォーカスを入力 />
  </div>
</本文>

<本文>
  <スクリプトタイプ="モジュール">
    'https://unpkg.com/petite-vue?module' から {createApp} をインポートします。
    
    作成App({
      ユーザーリスト: [
        { 名前: '张三', 年齢: { a: 23, b: 24 } },
        { 名前: 'Li Si'、年齢: { a: 23、b: 24 } }、
        { 名前: '王五'、年齢: { a: 23、b: 24 } }
      ]
    }）。マウント（）
  </スクリプト>

  <div v-スコープ>
    <!-- サポート -->
    <li v-for="{ 年齢 } をユーザーリストに追加">
      {{ 年齢.a }}
    </li>
    <!-- サポートされていません -->
    <li v-for="{ 年齢: { a } } ユーザーリスト内">
      {{a}}
    </li>
  </div>
</本文>