記録

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


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

超Vue.js 2 入門 完全パック – Vueでアプリを作りたい方必見! (Vue Router, Vuex含む)

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

【LT】2週間でVue.jsを学び、SPA作った話。
<!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. 記録

    移住して高知県で働きたい方へ{仕事事情}

    移住して高知県で働きたい方へ仕事情報を記載します。まず、高知県で有…

  2. 記録

    教養としての投資の奥野 一成さんの語りが良い感じ。

    8月になりましたね。今頃、未来の自分は何をしているのかなぁなどと思い…

  3. 記録

    複数のカードをひとつのカードへ

    https://www.youtube.com/watch?v=tx…

  4. 記録

    何を考えているのか分からない人々。私?俺?自分?ですか?

    何を考えているのか分からない人々。世の中には無口な人がいる。そう…

  5. 記録

    僭越ながらSSL化しました。

    僭越ながらSSL化しました。今まで、httpとhttpsが共存して…

  6. 記録

    明日へ続く愚痴。

    この頃、体調不良です。睡眠は大切ですよと本当に思います・・・。…

PAGE TOP