Web言語マスター復活への道/16日目

alice

2021年8月9日 01:20

集中したいんですけどできない、そんな一日になりました。やること多すぎてどれに手付けたらいいか。。金銭絡む事務処理系が面倒ですね😔

目標

・vue.js補完
・Firebase

今日の作業

・vue.js
基礎練習。今まで意味わからず書いてましたが、{{ }} に入る文字が.jsの文字列に代入されるってことだったんですね。そう考えると応用きいて便利です

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>Vue.js Test</title>
   <link rel="stylesheet" href="main.css">
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
</head>

<body>
   <div id="map">
       <h1>{{ msg }}</h1>

       <p>greeting: {{ greeting + ", Vue "}}</p>
       <p>answer: {{product.instock ? "Yes" : "No" }}</p>
       <a href="{{ href }}">vue.js</a>
   </div>
   <script src="main.js"></script>
</body>

</html>

main.js

const app = new Vue({
   el: "#map",
   data: {
       msg: "hello vue",
       greeting: "Hello",
       product: {
           instock: true
       href: https://test
       }
   }
})

カウンター
v-on:clickを用いて、カウンターを作成することができる。ここで初めて知りましたが、v-xxは略してもよいみたいです。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>Vue.js Test</title>
   <link rel="stylesheet" href="main.css">
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
</head>

<body>
   <div id="app">
       <div :class="{ negative: count < 0 }">{{ count }}</div>
       <button v-on:click="increase">increase</button>
       <button v-on:click="decrease">decrease</button>
   </div>
   <script src="main.js"></script>
</body>

</html>

main.css

.negative {
   color: red;
}

main.js

const vm = new Vue({
   el: "#app",
   data(){
   return {
       count: 0
   }
},
   methods: {
       increase() {
           this.count++;
       },
       decrease(){
           this.count--;
       }
   }
})

結果

・firebase

所感

vue.jsは理解し始めたところなので、udemyで講座買って勉強してみようと思います。（確認したらセール中になっていたので
firebaseは個人的に相性いいような気がします。操作してて楽しいです。

この記事が気に入ったらサポートをしてみませんか？