Vue.jsの基本 (はじめてのVue.js3入門1-13学習内容)

最低限やること

1.Vueの読み込み

Vueを使えるようにするためにする方法4つ

以下4種類

1.CDN webコンテンツを配信するために最適化されたネットワークのこと
2.直接読み込み
3.NPM（パッケージ管理ソフトの利用）
4.VueCLI

今回は以下で

CDN　webコンテンツを配信するために最適化されたネットワークのこと

<script src="https://unpkg.com/vue@3.1.5"></script>

1.指定のバージョンに確認する
2.@以下がバージョン名になる。

おまけ　バージョンの確認方法

jsファイル内

Vue.version

2.インスタンスの生成

const app = Vue.createApp(
{
  //このインスタンスの中に処理を記述していく。
})

3.　2.のインスタンスを適用していく（マウントする）

app.mount('#app')

const app = Vue.createApp(
{
  // options
}).mount('#app')

Vue変数を使って値を表示できるようにする

フロー

1.Vueが適応される範囲をIDでかこむ
2.表示させたい変数を{{ }}で囲む

1.インスタンスを作成
*1-1:Vue.createApp({}}
*1-2:1-1の中にdata:()をアロー関数で囲む
*1-3:messeage:"表示させたいもの"
2.インスタンスをマウントする

1.dataは必ずdataと記述しないとダメ
2.messeageはhtmlの{{ }}内での変数名さえあってれば問題ない

例

<div id="app">
  <p>{{ message }}</p>
</div>
{{ message }} <-- id外には書かない >

const app = Vue.createApp({
  data:()=>({
    message:"helloVuejs"
  })
})
app.mount('#app')

###　問題1 VueJsを使ってこんにちはと表示させよう

オブジェクト/配列/関数の設定方法

フロー

html側

1.Vueが適応される範囲をIDでかこむ
2.表示させたい変数を{{ }}で囲む
//　↑ここまでは同じ
3.アクセス（呼び出す）
☆配列
*{{ address[番号] }}
☆オブジェクト
*{{ status.キー名 }}
☆関数
*func　関数自体が表示される
*func()　関数が実行され、return値となる

Vue側

1.インスタンスを作成
*1-1:Vue.createApp({}}
*1-2:1-1の中にdata:()をアロー関数で囲む
//　↑ここまでは同じ
☆配列
*address:["神奈川","川崎","新百合ヶ丘"],
☆オブジェクト
*status:{height:164,weight:85}
☆関数
*func:function(){ //関数}
2.インスタンスをマウントする

<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p>{{ messge }}</p>
  
  <p>{{ status.height }}</p>
  <p>{{ status.weight }}</p>
  
  <p>{{ address[0] }}</p>
  <p>{{ address[1] }}</p>
  <p>{{ address[2] }}</p>
  
  <p>{{ func }}</p>
  <p>{{ func() }}</p>
</div>

const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
    address:["神奈川","川崎","新百合ヶ丘"],
    status:{height:164,weight:85},
    func:function(){ return 100}
  })
})
app.mount('#app')

###　問題2 関数,メッセージ、住所を表示させましょう

よくあるエラー集

1.ID違い

IDをわざと間違える

<div id="ap">
  <p>{{ messge }}</p>
</div>

const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

1.ID違い

IDをわざと間違える

<div id="ap">
  <p>{{ messge }}</p>
</div>

const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

*mountの引数がnullで返されます

2.ID外に{{ }}を記述する

{{}}

<div id="ap">
  
</div>
<p>{{ messge }}</p>

const app = Vue.createApp({
  data:()=>({
    messge:"helloVuejs",
  })
})
app.mount('#app')

{{}}が画面にそのまま表示される

3.マウント忘れ

{{}}

<div id="ap">
  <p>{{ message }}</p>
</div>

const app = Vue.createApp({
  data:()=>({
   message:"helloVuejs",
  })
})

→なにも起きません

単語

1.リアクティブ　値を変更したら式の答えも勝手に変わってくれる
2.ディレクティブ
html属性に記述する特別な処理を行うもの
例
v-bind
v-if
v-show
v-for
v-on
v-model