記録

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。


vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように!!ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ?を使用して書くほうが短いコードで書けるので良いなと実感。

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな(時間がない?^^;)。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん(@HEP1147)、凄いところ!!ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>
var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});
  

活動支援よろしくお願いします

ブロックチェーン技術の語りにはっと思った、2030年世界の大変化(中田敦彦解説)前のページ

そこの君、自らの力で毎日100円稼げるか?次のページ

関連記事

  1. 記録

    ファイナルファンタジー15の体験版をしてみた_(:3」∠)_

    ファイナルファンタジー15の体験版をしてみた結果_(:3」∠)_ど…

  2. 記録

    FF14をプレイしています。土日祝の朝頃から

    先日からFF14をプレイしています、まだFF14の中でもソロです、ヘ…

  3. 記録

    岡村靖幸:okamurayasuyuki.infoって(´Д`)

    岡村靖幸さんっていう音楽家がいるのですけど、このひと薬物使用での逮…

  4. 記録

    僧侶YOUTUBERが般若心経を音にのせる。

    僧侶YOUTUBERが般若心経を音にのせる。このお坊さん、ニコ…

  5. 記録

    夜な夜なサーバー移行。

    夜な夜なサーバー移行。ほぼ徹夜してサーバー移行を行いました。ち…

PAGE TOP