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

アップロードできるものが少なくて、報告書みたいな感じになってます。たぶんこれこの後も続くと思います。

目標

・ruby on rails 動画視聴初日

・vue.js 動画視聴1セクション

本日の作業

・ruby on ralis　動画視聴

rubyインストール、オブジェクト（array,hash..)など初歩的な知識勉強
cliベースでやりやすいです。最初だけなのかな、、？

・vue.js動画視聴

animated, transitionを使ってオブジェクトの移動を試しました。動くと面白いとおもえます
下記コードの意味は、"hello"という文字が浮かび上がったり消えたりします。

App.vue

<div class="main">
    <button @click="show =!show>切り替え</button>
<transition name="fade">
 <p>hello</p>
</transition>

---------------------------------------------------------
<script>
export default {
 data() {
   return {
     show: true,
   };
 },
};
</script>
---------------------------------------------------------

<style scoped>
.fade-enter {
 opacity: 1;
}
.fade-enter-active {
 transition: opacity 0.5s;
}
.fade-enter-to {
 opacity: 0;
}
.fade-leave {
 opacity: 0;
}
.fade-leave-active {
 transition: opacity 0.5s;
}
.fade-leave-to {
 opacity: 1;
}
</style>

後半circleとかの作成もあったんですが、コードがわからなくなってしまったので視聴しただけです。後でやり直しです。

所感

今まで積み上げてきたもの崩したくないなーと思って続けてます。あとみんなここらへんでつまづくんだろうなー、この勉強法最短ではないんだろうなーと思いながら続けてます。決めたタスクが終わらないって辛いですね。