Weitere ähnliche Inhalte Ähnlich wie チュートリアルではじめるVue.js (20) チュートリアルではじめるVue.js14. 以下の関係にある
<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
app.message = ‘ビールがとても飲みたいです。’
①
①
②
②
③
③
15. 以下の関係にある
<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
app.message = ‘ビールがとても飲みたいです。’
①
①
②
②
③
③
③インスタンスにある
②プロパティの値を
①の要素の該当箇所(②)にセットする
30. 以下のコードを写経して
ブラウザで開こう
<!DOCTYPE html>
<div id="app">
<span v-bind:title="message">
マウスのカーソルを合わせてみて
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
app.message = ‘ビールがとても飲みたいです。’
Vueの機能を使って、
appインスタンスのmessageプロパティを
HTMLのtitle属性にセットする
ということを表している
41. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
ループはv-forを使う
v-forの中身はPHPの
foreachに似てるので、
親しみやすいのでは?
43. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
v-on:拾うイベント
処理メソッドを定義
44. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
メソッドは
methodsセクションに書く
46. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
47. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
これがコンポーネント
48. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
コンポーネント化すると
カスタムタグとして使えるようになる
49. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
prop:このコンポーネントが受取る引数
template:実際に書き込むHTML
50. 以下のコードを写経して
ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
引数に渡す変数は、
Vueインスタンスが持っているデータの
名前と被るとエラーになるので注意
55. 目標
<!DOCTYPE html>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
最終的に、
この部分を別ファイル化して使います。
64. bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
});
</script>
bladeを修正
65. bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
});
</script>
bladeを修正
コンパイルしたjsの読込み
66. bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
});
</script>
bladeを修正
変数などは利用側で定義する
67. bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
});
</script>
bladeを修正
app.js上で定義したコンポーネント名を使う
(普通のコンポーネントと同じ)
[app.js]
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
68. bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
});
</script>
bladeを修正
コンポーネントの引数に
利用側の変数をバインドさせる
(普通のコンポーネントと同じ)
[app.js]
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
[Example.vue]
<template>
<li>{{ todo.text }}</li>
</template>
<script>
export default {
props: ['todo'],
mounted() {
console.log('Component mounted.')
}
}
</script>
69. $ php artisan serve
ちゃんと動くか試そう
127.0.0.1:8000にアクセスして
リストが表示されればOK
Hinweis der Redaktion Vue.jsから見たらAPI Vue.jsから見たらAPI