VUEのサクっと使えそうなところ
- Vueインスタンスの基本 ⇒とにかくJSON
<body>
<div id="app">
子要素を記述
</div>
</body>
<script>
const app = new Vue({
el: '#app', //要素（element）を指定する。今回はidで指定。
data: { //プロパティをまとめて記述
message: 'Hello World!',
},
},
methods: { //関数もまとめて記述
sayHi: function() {
this.message = 'hello vuejs' //Vueインスタンスを表すthisを忘れずに
return 'Hi'
}
});
- チートシート的な何か
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<p v-once>{{ message }}</p>
<p>{{ sayHi() }}</p>
<div v-html="html"></div>
<a v-bind:href="url">google</a>
<a :[attribute]="url">google</a>
<a :href="urltw">google</a>
<a v-bind="twitterObject">Twitter</a>
<p >現在は{{ number }}回クリックされています</p>
<botton v-on:click="number += 1">カウント１（直接記述）</botton>
<botton v-on:click="countup()">カウント2（関数呼び出し）</botton>
<p v-on:mousemove="changeMousePosition($event)">マウスを載せてください
<span v-on:mousemove.stop="">反応しないでください</span>
</p>
<p>X:{{x}},Y:{{y}}</p>
<a v-on:click="noEvent" href="hhtps//google.com">Google１</a>
<a v-on:click.prevent="" href="hhtps//google.com">Google２</a>
<input type="text" v-on:keyup.enter="myAlert">
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
number: 0, //initial
x: 0,
y: 0,
ok: true,
html: '<h1>h1desu</h1>',
url: 'https://google.com',
attribute: 'href',
urltw: 'https://twitter.com',
twitterObject: {
href: 'https://twitter.com',
id: 31
},
},
methods: {
sayHi: function() {
this.message = 'hello vuejs'
return 'Hi'
},
countup: function(){
this.number += 1
},
changeMousePosition: function(event){
//event.stopPropagation(); //前の処理を停止？
this.x = event.clientX;
this.y = event.clientY;
},
noEvent: function(event) {
event.preventDefault(); //デフォルトの挙動をさせない
},
myAlert: function() {
alert('test');
}
}
});
</script>
</html>
やりたいこと整理
- 書誌情報API openBD を使う
- openBD 使い方
- REST APIなのでgetReqをたたくだけ
- 検索に必要な情報はISBN(13桁）のほう
- ↑書籍のバーコードの上段の数値
- 取得できる内容
-
JSONスキーマを見る
-
カバー画像も取得できる！
-
詳細もある
-
目次もあるが、一つのテキストとして帰ってくるので工夫が必要
-
axiosの復習
- errorってどうすんだっけ
axios.get(https://~~~~)
.then(response => {
//axiosで成功した時の処理
})
.catch(error => {
//失敗した時の処理
})
CSSで見栄えをどうにかしたい
- マテリアルデザインでサクサク仕上げたい
- 軽量CSSフレームワーク spectre.cssを発見
-
使い方は以下のサイトを参考にする
https://segakuin.com/css/spectre/ -
グリッドレイアウトがサクっとできるのが良い
- 1行？は12列に分割される。それを何個使うかを指定するだけ！
<div class="columns">
<div class="column col-8">
<p > タイトル ：{{ book.title }} </p>
<p> ISBN ：{{ book.isbn }} </p>
<p> 著者 ：{{ book.author }} </p>
<p> 出版社 ：{{ book.publisher }} </p>
</div>
<div class="column col-4">
<img :src= "book.coverURL" >
</div>
<div class="column col-12">
<p class="text-small"> 詳細 <br>{{ book.discription}} </p>
<p class="text-small"> 目次 <br>{{ book.contents}} </p>
</div>