最もシンプルな複数の画面を持つSPA(single page application)を作ります。
ここまで基本を押さえることが出来ればあとは自由にアプリケーションを作れるのではないかと思います。
まずは vue-cli でそのままプロジェクトを作成
まずはこのページの手順に従って Vue3などをインストール後にプロジェクトの作成を行ってください。
プロジェクトのディレクトリへ移動してビルドします。
$ vue create user_app
$ cd user_app
$ npm run build
ブラウザからアクセスするとこの画面が表示されます。
とりあえずアプリケーションが稼働していますね。
これは App.vue から /components/HelloWorld.vue を呼び出して表示しています。
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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>
ここで１点押さえておきたいのは、黄色のラインを引いた
<HelloWorld msg=”Welcome to Your Vue.js App”/>
このタグで HelloWorld の読み込みを指定していて 独自にとして msg という属性が設定され、その値として”Welcome to Your Vue.js App” という値が設定されいるという事です。
親 component から 子 component への値の受け渡しとしてシンプルな方法です。
HelloWorld component のソースの抜粋はこんな感じになっています。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
:
: 【中略】
:
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
: 【中略】
:
</style>受け取る側の HelloWorld コンポーネントでは、自身の属性として props オブジェクトに msg という名前で Stringの型を指定しています。
App.vue の
<HelloWorld msg=”Welcome to Your Vue.js App”/>
タグ内で msg への代入値を変えれば<h1></h1>タグ内で表示されるテキストが変わります。
あたらしいコンポーネント
テストで新しいコンポーネントを作ってみましょう。
New.vue
<template>
<div>
<div class="area1">{{ pipe1 }}</div>
<div class="area2">{{ pipe2 }}</div>
</div>
</template>
<script>
export default {
name: 'New',
props: {
pipe1: String ,
pipe2: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.area1 {
border: 1px #000000 solid;
}
.area2 {
border: 1px #ff0000 solid;
}
</style>これを表示するために App.vue を修正
<template>
<img alt="Vue logo" src="./assets/logo.png">
<New pipe1="これは最初のエリア" pipe2="次のエリア" />
</template>
<script>
import New from './components/New.vue'
export default {
name: 'App',
components: {
New
}
}
</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>こんな感じに修正をしました。
ポイントは黄色いラインの行です。
ビルドしてからブラウザで表示するとこのように表示されます。
App.vue の <New>タグの属性で値を受け取って表示しているのがわかります。
ここで Composition API の簡単な構成をざっくり解説すると下記の様になります。
<template>
ここに HTML のテンプレート
</template>
<script>
ここにプログラム
</script>
<style scoped>
ここに CSS
</style>props の値を自 component 内で変更する
受け取った属性を変更して表示する。
属性を直接書き換えることは、出来なくはないけど Errorが表示される方法です。ただ、一旦値の変更の仕方を知るために試行してみます。
<template>
<div>
<div class="area1">{{ pipe1 }}</div>
<div class="area2">{{ pipe2 }}</div>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
name: 'New',
props: {
pipe1: String ,
pipe2: String
},
setup ( props ) {
const changePipe1 = ( ) => {
props.pipe1 = "test"
}
onMounted( ()=> {
changePipe1()
} )
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.area1 {
border: 1px #000000 solid;
}
.area2 {
border: 1px #ff0000 solid;
}
</style>props で受け取った属性の値を onMounted(コンポーネントがマウントされた時実行) でsetup 内で定義された changePipe1 関数で値を変更しています。
関数の定義については下記の様な形式になります。
setup ( props ) {
const changePipe1 = ( ) => {
props.pipe1 = "test"
}
}定数の定義 const を使い アロー形式の関数を定義します。
ここでのポイントは setup 内で props を扱う場合、 setupを定義する際に引数として props をセットしています。
ブラウザをリロードすると下記の様になります。
さて、この属性を直接書き換える方法は良い方法ではないようですので、一応できるけど推奨ではありません。
コメント