質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

226閲覧

vue.js propsとは

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/01/04 05:58

編集2022/01/12 10:55

コンポーネントがよくわかりません。
これはなにをしているのでしょうか。
またコンポーネントの中のpropsとはなんなのでしょうか。

あと、v-bind:todo="item"の意味もよろしければ教えてください(>___<)

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>Hello</title> 6 <script src="https://npmcdn.com/vue/dist/vue.js"></script> 7 <script src="./vue7.js"></script> 8 <!--<link rel="stylesheet" href="./css/1.css"></link>--> 9</head> 10 11<body onload="sample_func();"> 12 <div id="app-7"> 13 <ol> 14 <!-- 15 各 todo-item の内容を表す todo オブジェクトを与えます。 16 これにより内容は動的に変化します。 17 また後述する "key" を各コンポーネントに提供する必要があります。 18 --> 19 <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> 20 </ol> 21 </div> 22</body> 23 24</html>

javascript

1function sample_func() { 2 Vue.component('todo-item', { 3 props: ['todo'], 4 template: '<li>{{ todo.text }}</li>' 5 }) 6 7 var app7 = new Vue({ 8 el: '#app-7', 9 data: { 10 groceryList: [ 11 { id: 0, text: 'Vegetables' }, 12 { id: 1, text: 'Cheese' }, 13 { id: 2, text: 'Whatever else humans are supposed to eat' } 14 ] 15 } 16 }) 17}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

propsは親コンポーネントから与えられるデータのことです。自分で値を変更することはできません。いま、todo-itemtodoという prop を受け取りますよーと宣言していて、テンプレート内でもtodoを使っています。

js

1 Vue.component('todo-item', { 2 props: ['todo'], 3 template: '<li>{{ todo.text }}</li>' 4 })

今の場合、親であるapp7todo-itemコンポーネントのtodo prop に値を渡しています。

html

1<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

v-bind:todo="item"todoという名前の prop に対して、itemという変数の値を結びつける/バインドするということです。

v-forは理解されていますか?js の for ... ofみたいなものですが、今の場合配列groceryListの各要素に対してtodo-itemを生成するということです。そしてitemが各要素の値になります。

js

1 groceryList: [ 2 { id: 0, text: 'Vegetables' }, 3 { id: 1, text: 'Cheese' }, 4 { id: 2, text: 'Whatever else humans are supposed to eat' } 5 ]

となっているので、先程のテンプレートはこのように展開できます。

html

1<todo-item v-bind:todo="{ id: 0, text: 'Vegetables' }"></todo-item> 2<todo-item v-bind:todo="{ id: 1, text: 'Cheese' }"></todo-item> 3<todo-item v-bind:todo="{ id: 2, text: 'Whatever else humans are supposed to eat' }"></todo-item>

そしてtodo-itemのテンプレートは'<li>{{ todo.text }}</li>'なのでこうなります。

html

1<li>Vegetables</li> 2<li>Cheese</li> 3<li>Whatever else humans are supposed to eat</li>

投稿2018/01/04 07:49

編集2018/01/04 07:52
karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

私もvueは最近勉強しているのですがこれは少しわかるので答えさせて頂きます。
propsは「部品と中身の切り離し」を行っています。
テンプレートの機能で<todo-item>のタグは<li>に変換されるというところまでは
おわかりになっているかと思いますがそのテンプレートの中身に表示するものは
使う側のvueインスタンスにある特定のデータです(今の場合はgroceryListのtext)
ですが一つのvueインスタンスにのみ依存するやり方では似たようなものを
何個も作る必要が出てきて、「テンプレート」ではなくなってしまいます。
そこでpropsを使って中身だけ指定できることによって、他のインスタンスからでも
再利用を可能にしていると私は理解しています。

v-bind:todo="item"というのはその手前にあるv-for="item in groceryList"のitemのことを
指しています。配列groceryListを回して一つずつ変数itemに入れて処理している感じです。
拙い説明ですが参考になれば幸いです。

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>Hello</title> 6 <script src="https://npmcdn.com/vue/dist/vue.js"></script> 7</head> 8 9<body onload="sample_func();"> 10 <div id="app-7"> 11 <ol> 12 <!-- 13 各 todo-item の内容を表す todo オブジェクトを与えます。 14 これにより内容は動的に変化します。 15 また後述する "key" を各コンポーネントに提供する必要があります。 16 --> 17 <todo-item v-for="item in groceryList" v-bind:todo="item" :key="item.id"></todo-item> 18 </ol> 19 </div> 20 21 <div id="app-8"> 22 <ul> 23 <todo-item v-for="item in otherData" v-bind:todo="item" :key="item.no"></todo-item> 24 </ul> 25 </div> 26</body> 27 28</html> 29 30<script> 31function sample_func() { 32 Vue.component('todo-item', { 33 props: ['todo'], 34 template: '<li>{{ todo.text }}</li>' 35 }) 36 37 var app7 = new Vue({ 38 el: '#app-7', 39 data: { 40 groceryList: [ 41 { id: 0, text: 'Vegetables' }, 42 { id: 1, text: 'Cheese' }, 43 { id: 2, text: 'Whatever else humans are supposed to eat' } 44 ] 45 } 46 }); 47 var app8 = new Vue({ 48 el: '#app-8', 49 data: { 50 otherData: [ 51 { no: 3, text: 'こんな風に' }, 52 { no: 4, text: '違うインスタンスのデータを' }, 53 { no: 5, text: '連結できます' } 54 ] 55 } 56 }); 57 58} 59 60</script>

投稿2018/01/04 07:03

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問