laravel 入門チュートリアル
まずはここ見てからね。
https://qiita.com/ma7ma7pipipi/items/d58b1a8114f122bf918d
まず、適当なページに以下をコピペ。
ただし、laravelを使っていることが条件
まず基本
<div id="app" v-cloak>
{{--両方同じ意味--}}
<span v-text="message"></span>
<span>@{{message}}</span>
{{--htmlをそのまま表示したい--}}
<span v-html="message"></span>
</div>
さぁ、何も考えずコピペ
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel-Vue-todo</title>
<style type="text/css">
/*初期表示時にテンプレートが一瞬表示されてしまうのを防ぐ*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
@{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
message: 'こんにちわ。Vue.jsです。',
},
});
</script>
</body>
</html>
これで こんにちわVue.jsです。 と表示されましたね。
解説
・ vue.js メインファイル
・ axios.min.js AJAX用
・ underscore-min.js 配列を操作
テキストフィールドの内容を動的に変化させる
<div id="app" v-cloak>
{{--ここの値を変更すると pタグ内のデータも変わる テキストフィールドに message の値を入れる--}}
<input v-model='message'>
{{--pタグ内に message を入れる--}}
<p>
@{{message}}
</p>
</div>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
message: 'こんにちわ。Vue.jsです。',
},
});
</script>
要素をゆったり 消す
Toggleボタンをクリックしたら文字がゆったり消えたり表示されたり。
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<div id="app" v-cloak>
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">ゆったりきえるぅ</p>
</transition>
</div>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
show:true,
},
});
</script>
カウントを増やす
<div id="app" v-cloak>
{{--v-on:click の略 クリックで incremnt メソッドを利用--}}
<button @click="increment">カウントを増やす</button>
<p>@{{ count }}回のクリック</p>
</div>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
count:0
},
//ここで処理を実行。実行語に data に 格納。
methods: {
increment: function(){ //←axios.getでTODOリストを取得しています
this.count++;
}
}
});
</script>
リスト、配列操作
果物を追加したり、消したり。
<div id="app" v-cloak>
果物名 <input v-model="name" />
<button @click="add">果物を増やす</button>
<ul>
{{--items があるだけ 繰り返し表示--}}
<li v-for="(v , key) in fruits">@{{ v.id }} : @{{ v.name }}
<button @click="del(key)">削除</button>
</li>
</ul>
<hr/>
</div>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
name:'レモン',
fruits:[
{ id: 1 , name: 'りんご' , color:'red' },
{ id: 2 , name: 'ぶどう' , color:'purple' },
{ id: 3 , name: 'みかん' , color:'orange' },
],
list: ['夢','希望','勇気']
},
//ここで処理を実行。実行後に data に 格納。
methods: {
add: function(){
//underscore.js で 最大のIDを取得
var max = _.max(this.fruits, function (d) {
return d.id;//id の一番高いデータ返す
});
this.fruits.push({
id: max.id + 1,
name: this.name,
color: 'yellow'
});
},
del: function(key){
this.fruits.splice(key,1);
},
},
});
</script>
果物に値上げ機能をつける
500円以下の場合のみ セールと表示させる。
<div id="app" v-cloak>
<h2>果物を表示</h2>
<input v-model="name" />
<button @click="add">果物を増やす</button>
<ul>
{{--items があるだけ 繰り返し表示--}}
<li v-for="(v , key) in fruits">@{{ v.id }} : @{{ v.name }} @{{ v.price }} 円
{{-- 値段が 500円以下なら なら セール と表示 --}}
<span v-if="v.price < 500"> セール</span>
<button @click="del(key)">削除</button>
<button @click="up(key)">値上げ</button>
</li>
</ul>
<hr/>
</div>
<script>
const app = new Vue({
el: '#app',
//ここに入ってきたデータは自動的にテンプレートに反映される
data: {
name:'初期値',
fruits:[
{ id: 1 , name: 'りんご' , price:100 },
{ id: 2 , name: 'ぶどう' , price:700 },
{ id: 3 , name: 'みかん' , price:1500 }
]
},
//ここで処理を実行。実行語に data に 格納。
methods: {
add: function(){
var max = _.max(this.fruits, function (d) {
return d.id;//id の一番高いデータ返す
});
this.fruits.push({
id: max.id + 1,
name: this.name,
price: 700
});
},
del: function(key){
this.fruits.splice(key,1);
},
up: function (key) {
this.fruits[key].price += 33;
}
},
});
</script>