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スキーマを見る
    
    https://api.openbd.jp/v1/schema?pretty
  - カバー画像も取得できる！
  - 詳細もある
  - 目次もあるが、一つのテキストとして帰ってくるので工夫が必要

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>

リアルタイム( ..)φメモメモ Vue、CSSなど

VUEのサクっと使えそうなところ

やりたいこと整理

axiosの復習

CSSで見栄えをどうにかしたい

リアルタイム( ..)φメモメモ　Vue、CSSなど