Vue CLIでのVue.jsの書き方が分かりません。

Question

Vue.jsを半年以上学び、SPAというものに気になった為、Vue CLIを使ってみようと考えました。

しかし、Vue CLIを使い始めたのは良いのですが、Vue CLIでのVue.jsの書き方が分かりません。

普段なら動いていたものが、Vue CLIにコピペすると画面が真っ白になってしまいます。
エラーは表示されていません。

試しに使ってみたかっただけなので、やろうとしていることは、下記リンクのような表示非表示です。
https://qrunch.net/@aBcSiwClZ6Xycv2h/entries/Z2EfxsaGyvjHCbSs

何か特別な書き方があるのでしょうか？
もしあるならば、その書き方の勉強方法を教えていただきたいです。

追記：
コンポーネントのvueファイルに以下を入れました。

    <p @click="active" style="display: inline-block; cursor: pointer;">  
        <span v-if="isActive">  
            内容を非表示にする  
        </span>  
        <span v-else>  
            内容を表示する  
        </span>  
    </p>  
    <div v-if="isActive">  
        <ul>  
            <li>内容1</li>  
            <li>内容2</li>  
            <li>内容3</li>  
            <li>内容4</li>  
            <li>内容5</li>  
        </ul>  
    </div>  
</div>  
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
var toggle = new Vue({  
  el: '#js-toggle',  
  data: {  
    isActive: true  
  },  
  methods: {  
    active: function () {  
      this.isActive = !this.isActive  
    }  
  }  
})
</script>

https://qrunch.net/@aBcSiwClZ6Xycv2h/entries/Z2EfxsaGyvjHCbSsに書いてあるものをそのままコピペしても同じ状況です。

Comments

[hwatarig]

どこのファイルにどういう内容をコピペしたのかを質問文に記載してください。

Answer 1

何か特別な書き方があるのでしょうか？

記載されているコードを見る限り、これまではhtmlファイルにvue.jsを読み込んでvueを利用されていたのだと思います。
Vue CLIで使うコンポーネントはvueファイルでできていて、これを単一ファイルコンポーネントと呼びます。単一ファイルコンポーネントでの書き方はhtmlファイルに書いていた時と少し違います。

記載されているコードでいうと、

var toggle = new Vue({  
  el: '#js-toggle', 

この部分が不要です。
export default の中でname、props、data、methodsを定義してください。

勉強方法を知りたいということなので、公式ガイドの単一ファイルコンポーネントのページを貼っておきます。「単一ファイルコンポーネント」で調べてみるのも良いかと思います。

単一ファイルコンポーネント — Vue.js

Answer 2

参考URLのトグルは、ちょっとわかりませんでした。ごめんなさい。
ただ、表示/非表示のの切り替えを試したかっただけなら、
↓のようにdata()にTrue/Falseを切り替えるための変数を持たせておくだけだと思います

  <template>
  <div>
    <p
      @click="isActive=!isActive"
      style="display: inline-block; cursor: pointer;"
    >
      <span v-if="isActive">
        内容を非表示にする
      </span>
      <span v-else>
        内容を表示する
      </span>
    </p>
    <div v-if="isActive">
      <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return { isActive: false }
  }
}
</script>