Movatterモバイル変換

[0]ホーム
URL:

LoginSignup
75

Go to list of users who liked

85

Share on X(Twitter)

Share on Facebook

Add to Hatena Bookmark

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue.js入門(Vue.jsの初心者は必ず読め‼︎)

Last updated atPosted at 2024-03-28

Vue.jsとは

JavaScriptのフレームワークです。

Vue.jsのメリット

  • 学習コストが低い
  • ライブラリやツールが豊富
  • 速くて軽い(Vue.jsを使うと、ウェブページがとても速くて、サクサク動く)
  • 何かが変わるとすぐにわかる( Vue.jsを使うと、何かが変わったら、自動的にその変化が表示される)
  • いろんなパーツを組み立てられる
  • HTML要素を部品化
  • 安定してプロジェクトを進められる

Reactと比べたらどうか？

現場で使っているならVue.jsやればいいですが、どちらもやっていないならReactがおすすめです。
ただ求人と給与を見てもReactもVue.jsはあまり大差ないみたいです。会社と個人によるかなと。

Reactの方が割と学習者が多いので、競合がReactより少ないVue.jsをやるのもありかと思います。
最終的は、どちらもできるといいと思います。

Vue.jsの3系になってから2系より難易度が上がっています。

環境構築しなくてもできる

普通にHTMLやCSSを使うのと同じ感覚でもVue.jsの環境は作れます。

index.html
<html><head>  <meta charset="utf-8" />  <!---CDN(Vue.jsが用意してくれるサーバーから読み込み)-->  <script src="https://unpkg.com/vue@next"></script>  <!---ローカルにインストールしたい場合は、npm install vue@next -->  </head>  <body>  </body></html>
でVue.jsが読み込まれて

使えるようになります。

簡単な操作

簡単な操作をしていきます。Vue.jsのプログラムを書いていきます。以下のプログラムを参考にしてみてください。バージョンはVue.jsの3系です。

index.html
<html><head>  <meta charset="utf-8" />  <!---CDN(Vue.jsが用意してくれるサーバーから読み込み)-->  <script src="https://unpkg.com/vue@3.0.0"></script>  <!---ローカルにインストールしたい場合は、npm install vue@next --></head><body>  <div>    app1: {{ message }} <!--Vueコンポーネントのデータを表示 -->  </div>  <div>    app2: {{ message }} <!--Vueコンポーネントのデータを表示 -->  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          message : 'Hello Vue.js'        }      },    }    const App2 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          message : 'Vue.js 面白い'        }      },    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント    app2 = Vue.createApp(App2) //Vueアプリケーションを作成    app2.mount('#app2') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 0.56.49.png

クリックイベント(v-on)

クリックイベントを書いていきます。クリックイベントのv-onを使ったりします。
incrementメソッドを使ったことでVueコンポーネントの中にmethodsメソッドを定義したりしています。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <p>{{ count }}回クリックした</p>    <button v-on:click="increment">+</button> <!--v-on:clickでクリックイベントを登録 -->    <button v-on:click="decrement">-</button> <!--v-on:clickでクリックイベントを登録 -->  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          count: 0        }      },      methods: { //methodsメソッドを定義        increment() { //incrementメソッドを定義          this.count+=1 //countをインクリメント        },        decrement(){          this.count-=1 //countをデクリメント        }      }    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 1.19.54.png

これでボタンを押すと数字が変わるようになりました。

v-onの省略形＠

v-on:clickとありますが、これは省略形で書くと@clickとなります。

<button @click="increment">+</button><button @click="decrement">-</button>

v-if(if文)

次はif文です。条件分岐を書くこともできます。
ex) この条件の時は表示、この条件の時は表示しない　みたいな

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <span v-if="seen">ルフィ</span>  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          seen: true　//seenがtrueなら表示、falseなら非表示        }      },    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 1.29.23.png

ボタンもつけていきます。今度はボタンをクリックしたら非表示になるようにします。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <span v-if="seen">ルフィ</span>    <button v-on:click="off">非表示</button> <!--ボタンをクリックするとoffメソッドが実行される-->  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          seen: true　//seenがtrueなら表示、falseなら非表示        }      },      methods: {        off: function(){          this.seen = false //seenをfalseにする offメソッドが実行されると、seenがfalseになり、ルフィが非表示になる        }      }    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

v-bind(属性の設定)

Vue.js でHTMLの属性や要素の値を動的に更新するためのディレクティブで、
HTMLの属性や要素の値をVue.jsのデータと結びつけたい時に、Vue.jsのデータの変更に応じて、HTMLの属性や要素の値が自動的に更新されます。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body><!--CSSのスタイルを記述--><style>   .lightblue {    color:lightblue;  }  .orange {    color: orange;  }</style>  <div>    <!--HTML属性は展開されないので、v-bindを使う-->    <p v-bind:class="class1">水色</p>    <!--省略した書き方-->    <p :class="class2">オレンジ</p>  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          class1: 'lightblue',          class2: 'orange'        }      },    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 2.38.03.png

v-for

v-forはVue.jsでのループ処理です。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <ul>      <li v-for="todo in todos">        {{ todo.text }}      </li>    </ul>  </div>  <script>    const App1 = { //Vueコンポーネントを定義      data() { //dataメソッドを定義 Vue.jsにこのデータを返すという宣言        return {          todos: [            { text: 'Laravel' },            { text: 'Next.js' },            { text: 'Ruby on Rails'},          ]        }      },    }    app1 = Vue.createApp(App1) //Vueアプリケーションを作成    app1.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 2.39.17.png

部品化(components)

HTML要素を部品化して、再利用できるようにしたものです。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <ul>      <template1></template1>    </ul>  </div>  <script>    const App1 = {} //Vueコンポーネントを定義    const app = Vue.createApp(App1) //Vueアプリケーションを作成    app.component('template1',{ //Vueコンポーネントを定義      template:`      <button>ボタン</button>      <br>      `    })    app.mount('#app1') //VueアプリケーションをHTML要素にマウント  </script></body></html>

スクリーンショット 2024-03-29 2.53.27.png

props

親コンポーネントから子コンポーネントにデータを渡すためのもので、
親コンポーネントで定義されたデータや属性を子コンポーネントに渡すことができます。

ここでは静的な文字で表示させます。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <ul>      <template1 prop1 = "次へ"></template1>      <template1 prop1 = "前へ"></template1>    </ul>  </div>  <script>    const App1 = {    } //Vueコンポーネントを定義    const app = Vue.createApp(App1) //Vueアプリケーションを作成    app.component('template1',{ //Vueコンポーネントを定義      props: ['prop1'],      template:`        <button>{{prop1}}</button>        <br>      `    })    app.mount('#app1') //VueアプリケーションをHTML要素にマウント</script></body></html>

スクリーンショット 2024-03-29 3.09.57.png

次は、動的な文字で作成します。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <ul>      <template1 prop1 = "次へ"></template1>      <!-- 動的 :propはv-bindの省略形-->      <template1 :prop1 = "varString"></template1>    </ul>  </div>  <script>    const App1 = {      data() {        return{          varString: '前へ'        }      },    } //Vueコンポーネントを定義    const app = Vue.createApp(App1) //Vueアプリケーションを作成    app.component('template1',{ //Vueコンポーネントを定義      props: ['prop1'],      template:`        <button>{{prop1}}</button>        <br>      `    })    app.mount('#app1') //VueアプリケーションをHTML要素にマウント</script></body></html>

スクリーンショット 2024-03-29 3.14.58.png

そしてcomponentはループ処理をさせることができます。

index.html
<html><head>  <meta charset="utf-8" />  <script src="https://unpkg.com/vue@3.0.0"></script></head><body>  <div>    <template1             v-for= "item in itemList"            :prop1 = "item"            prop2 = "だ"    ></template1>  </div>  <script>    const App1 = {      data() {        return {          itemList: [            {id: 0, text: '0番'},            {id: 1, name: '1番'},            {id: 2, name: '2番'}          ]        }      }    } //Vueコンポーネントを定義    const app = Vue.createApp(App1) //Vueアプリケーションを作成    app.component('template1',{ //Vueコンポーネントを定義      props: ['prop1','prop2'],      template:`      <li>{{ prop1.id }}は{{ prop1.text }}{{prop2}}</li>`    })    app.mount('#app1') //VueアプリケーションをHTML要素にマウント</script></body></html>

スクリーンショット 2024-03-29 3.34.04.png

Vue.jsとの組み合わせ(Vue-router、Vuex、Nuxt.js)

Vue.jsは単体で使うことはあまりないです。他のものと組み合わせて使います。

  • Vue-router
    ルーティングのことです。

  • Vuex
    データの状態管理のことです。

  • Nuxt.js
    Vue.jsのフレームワークのことです。

Vue.jsのチュートリアルとガイド（公式ドキュメント）

Vue.js の公式ドキュメントにはチュートリアルがあり、環境構築無しでブラウザ上で学べます。

ここにやり方が載っています。

これがガイドです。

資料

75

Go to list of users who liked

85
2

Go to list of comments

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
75

Go to list of users who liked

85

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[8]ページ先頭
©2009-2025 Movatter.jp