【vue.js】Vue CLIを使ってVue.jsの導入

ローカル環境でvueを使ってみたので備忘録

準備：下記にしたがってローカル環境作成

reffect.co.jp

要約

#Vue CLIインストール (Vue.jsアプリ作成のため)
npm install -g @vue/cli

#Vue.jsアプリ作成 [app-name]を任意のアプリ名にする。
設定はすべてデフォルトでOK。
vue create [app-name]

#Vue.js開発ローカルサーバ起動（ここでエラー発生）
npm run serve

1. 文字列を渡す

2. v-bind

3. v-if

4. v-for

5. v-on

6. v-model

リファレンス

jp.vuejs.org

1. 文字列を渡す

public/index.html(デフォルトのまま)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>

</body>
</html>

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

src/App.vue

<template>
<div id="app">
<p>{{ message }}</p>//ここで渡された文字列を表示
<p>{{ message2 }}</p>//ここで渡された文字列を表示
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
message: 'Hello Vue!', //ここで文字列を渡す
message2: 'Hello'//ここで文字列を渡す
}
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

http://localhost:8080/

下記のように表示されたらOK

f:id:kayo445:20200524200417p:plain

2. v-bind：属性を指定して文字列を渡す

src/App.vue　のみ変更(変更点は赤文字)

<template>
<div id="app">
<p v-bind:class="red">{{ message }}</p>
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
message: 'Hello Vue!',
red: 'red'
}
}

}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red {
color: red;
}
</style>

http://localhost:8080/

下記のように表示されたらOK（class="red" になっていることが分かる）

f:id:kayo445:20200524201222p:plain

3. v-if

src/App.vue

<template>
<div id="app">
<p v-if="seen">{{ message }}</p>
<p v-if="seen2">{{ message2 }}</p>
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
message: 'Hello Vue!',
message2: 'Hello!',
seen: true,
seen2:false
}
}
}
</script>

http://localhost:8080/

下記のように表示されたらOK(Hello Vue!のみ表示され、Hello!は表示されない)

f:id:kayo445:20200524204729p:plain

4. v-for

src/App.vue

<template>
<div id="app">

// v-vind:keyが必要
<p v-for="g in greetings" v-bind:key="g.id">{{ g.text }}</p>
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
greetings: [
{ text: "Hello"},
{ text: "Konnichiwa"},
{ text: "Hola"}
]
}
}
}
</script>

http://localhost:8080/

下記のように表示されたらOK

f:id:kayo445:20200524210015p:plain

5. v-on

src/App.vue

<template>
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverse">reverse</button>
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
message: "Hello Konnichiwa Hola"
}
},
methods:{
reverse: function () {
this.message = this.message.split('').reverse().join('')
}
}
}
</script>

http://localhost:8080/

クリック前

f:id:kayo445:20200524210727p:plain

クリック後

f:id:kayo445:20200524210740p:plain

6. v-model

src/App.vue

<template>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
</template>

<script>

export default {
name: 'App',
data: function () {
return {
message: "Hello Konnichiwa Hola"
}
}
}
</script>