1.

Vue.jsのインストール方法(ファイルのダウンロード)

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

ファイルのダウンロード

公式サイトにアクセス。

開発用の(vue.js)および

本番用の(vue.min.js)をダウンロードする。

 

ファイルの読み込み

以下、簡単なサンプルを用いてvue.jsを読み込みます。

index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="vue.js"></script>
    <script src="sample.js"></script>
  </body>
</html>

 

sample.js
var app = new Vue({
  el: '#app',
  data: {message: 'Vue Sample'}
})

index.htmlにアクセスして'Vue Sample'が表示されれば完了です。

 

以上でvue.jsの導入は完了です。

開発/本番の切り替えはプログラムで行ってください。(言語によってさまざまの方法があるので割愛します)

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法

人気ページ

最近更新/作成されたページ