マガジンのカバー画像

vue.js学習記録

39
https://onl.la/NKyVitn こちらの書籍で勉強した内容をログの代わりに書いていきます。
運営しているクリエイター

2022年2月の記事一覧

Vue.js勉強記録その8 コンポーネントを使おう Section3-3 Ver1

Vue.js勉強記録その8 コンポーネントを使おう Section3-3 Ver1

書籍でvue.jsを勉強しています。ログがわりに書いていきます。

今日は、Chapter3のSection3。いよいよプロジェクトによる開発です。

この書籍を勉強中です。

■プロジェクトによる開発・プロジェクトで開発しようしばらくコードは出て来ず、プロジェクトについての説明が、数ページ書かれる。

最初の方で作って、放置していたプロジェクトを再利用する感じで説明されます。

プロジェクト内の

もっとみる
Vue.js勉強記録その7 一度テキストを離れてサンプル作り

Vue.js勉強記録その7 一度テキストを離れてサンプル作り

いつも、この書籍で勉強していますが、どうやら次から本格的にプロジェクトなるものを使った勉強が始まるらしいので、一度ここまでの内容を使ってサンプルを作ってみました。

猫のスライドショーです

■サンプル紹介次へと前へを押すと、画像が切り替わります。画像のプリロード的な処理がわからなかったので、ボタンを押すたびに一瞬ブランクになりますねw

<h1 class="bg-secondary text-

もっとみる
Vue.js勉強記録その6 コンポーネントを使おう section3-2 ver3

Vue.js勉強記録その6 コンポーネントを使おう section3-2 ver3

こちらの書籍で勉強中。

今回でsection3-2を終わらせます!

■v属性を使いこなす
・イベント処理とmethods前回は、クリックに対してイベントを設定しました。

今回は、inputタグに数字が入力された時のイベント処理です。

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1><div id="app" class

もっとみる
Vue.js勉強記録その5 コンポーネントを使おう section3-2 ver2

Vue.js勉強記録その5 コンポーネントを使おう section3-2 ver2

こちらの書籍で勉強しています!

今日は、Chapter3 のSection3-2の続きから!!

■v属性を使いこなす

・v-onでイベントをバインドする今度はイベント。イベントが出てくると、一気にプログラムらしくなって楽しくなってきますね。

今回は、まず最初に出来ないパターンのコードが出てきて、その後に正しい書き方を紹介されています。

まずは、出来ないパターンのコード

<h1 clas

もっとみる
Vue.js勉強記録その4 コンポーネントを使おう section3-2 ver1

Vue.js勉強記録その4 コンポーネントを使おう section3-2 ver1

こちらの本を、絶賛勉強中。

勉強の記録を残します。今回は、Chapter3のSection3-2 v属性を使いこなすを進めます。

■v属性を使いこなす・v-bindで属性を設定する前回やった、v-bindでコンポーネントに対して属性を設定している。

<p>Hello {{name}}</p>

こんな感じのtemplateに対して、

<hello name='ISHIKAWA' />

もっとみる
Vue.js勉強記録その3  コンポーネントを使おう section3-1

Vue.js勉強記録その3 コンポーネントを使おう section3-1

こちらの本を、絶賛勉強中。

勉強の記録を残します。今回から、長くなりすぎない様にsection毎に記事を残します。

■コンポーネントの基本をマスター・コンポーネントってなに?コンポーネントに関して説明されています。再生利用可能な「部品」という表現がされています。とりあえず今のところ、xdのコンポーネントと同じ様なものだと認識しています。あってるかな?

・コンポーネントの定義と利用アプリケーシ

もっとみる
Vue.js勉強記録その2 -Chapter2 Vue3の基本をマスターしよう!

Vue.js勉強記録その2 -Chapter2 Vue3の基本をマスターしよう!

■2-1 Vue3の基本的な仕組み
Chapter1で最初に書いたコードを改造して、簡単なカウンター的なコードを書く。(関数doActionの記述は、なんとなくアロー関数に書き換えてみた。)

<body> <h1>Vue3</h1> <div id="app"> <p>{{message.toUpperCase() + "[" + new Date().toLocaleStr

もっとみる
Vue.js勉強記録その1

Vue.js勉強記録その1

最近仕事がオンラインに移行して、通勤のために使っていた時間が空くことが多いです。

ひたすら晩酌の時間に当てていたのですが、それだと時間が勿体なさすぎる気がするので、勉強の時間をちょっとでも取ろうと思いました。(晩酌はやめませんw)

普段授業で教えている内容を、さらに昇華できるように、今教えているHTMLやCSS、JS、Wordpressなどの中から、知識を深めていくことも考えましたが、やっぱり

もっとみる