彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。
2021.07.12
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;
}
}
});
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,
SNSで話題「世界一即戦力な男」が書籍化
2014.08.15
6年間引きこもっていた彼（菊池良さん）が
WEB会社LIG[リグ]から内定を勝ち取りました。
彼の就活{活動}がすごい、自ら就活のためのサイトを開設し、
そして会社から面接連絡を待つというスタンス。
ちなみにサイト名が「世界一即戦力な男・菊池良から新卒採用担当のキミへ」っていうサイトです。
洒落が聞いてて面白い。面白いだけではなくデザインもしっかりしているから、
LIGから内定を頂いたんだろうけど、一番は感心したのはSNSで注目を得たところ。
実際、SNSで注目を集めるのは難しい。
WEBデザイン技術のほか、SNSのマーケティングの知識がないと
ここまで伸びないので、それなりに知識があったんだと思います。
なので奇跡的でも運よくでもない。
よし！！自分も菊池良さんの真似をして就活をしようとしたら
結果的に後悔する可能性が比較的に高いので、余程、自分の技術に
自信のある人にしか自分はオススメしません。
ちなみに「世界一即戦力な男・菊池良から新卒採用担当のキミへ」っていう
サイトでPRしていることは、裏を返せば負の要素ばかりです。
その負の要素が結果的に他の人と違っていて、
会社から注目を集めることになっただろうと思います。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
6, LIG, SNS, web, おすすめ, キミ, ココ, サイト, スタンス, ため, デザイン, ところ, ほか, マーケティング, よし, リグ, 一, 世界一, 人, 会社, 内定, 即戦力, 可能性, 実際, 就活, 彼, 後悔, 感心, 技術, 担当, 採用, 新卒, 書籍, 注目, 活動, 男, 知識, 自ら, 自信, 自分, 良, 菊池, 話題, 連絡, 開設, 面接,