【Vue.js】Vue SFC Playground が便利 〜 そして伝説へ 〜

お久しぶりです

お久しぶりです❗️

最後の投稿から、どれくらいかな❓もう半年以上経ちましたね〜
いや、本当は元旦にでも挨拶しようかなと思ってはいたのですが「もう少し後でいいや」なんて惰眠を貪っていたら、すっかり時期が過ぎてしまいました🪁

月１ペースですが、ぼちぼち再開していこうかなと思います。
もちろん、皆さんの記事も読んでいきますよ✨

Vue SFC Playground

※ 技術的な内容となります
さて、今している事は何かというと「Vue.js」の入門書、まあIT書籍を書いてます📝

で、SFCでちょっとした動作を試す時に便利だなと思ったのが『 Vue SFC Playground 』なのです。
（「 SFC 」は ロジック、テンプレート、スタイル を1つのファイル（ .vue ファイル ）に纏めるファイル形式 ）

Vue.js公式（ https://vuejs.org ）

の「 Playground 」をクリックすると遷移します

バージョンは現段階では v3.2.2〜v3.2.31が選べる模様

ざっくり説明すると

スクリプト側では、'Hello World!'なのでString型、これをrefオブジェクトとしてラッピングしてますね。
これにより「リアクティブな状態」にし msg に代入している訳です。

テンプレート側では、 v-modelディレクティブで双方バインドさせてます。

素のJavaScriptで書くと結構なコード量になるのですが「Vue.js」で書くとこんなにも簡潔なコードで書くことが出来るのです💡

入力欄の「World!」を消してみると、それに応じて上の見出し表示も「World!」が消える

流れとしては
「Vue SFC Playground」を軽く紹介
↓
「CDN（Content Delivery Network）」を使って基本構文を説明（これが本書の大部分）
ただしCDNの場合、SFC形式では無い書き方。
↓
環境構築ツール「Vue Cli」もしくは「Vite」を使って、複雑なコンポーネントのやり取りを説明
といった感じでしょうか。出来れば「Vite」の方を使いたいかな。

まあ出版したら固定記事を更新しておきます。

そして伝説へ

久しぶりなので、もう少し書きましょかね。

津田沼のミーナのとある場所の看板

津田沼の「すた丼」屋は、ありがたい事に10時から開店してます。

店内から、美人のお姉さん店員さんが見え …… じゃ無かった、美味しそうなニンニク醤油の匂いが鼻腔を刺激したので思わず入店❗️

　　　伝　説　の　す　た　丼

「すた丼」は豚のバラ肉をニンニク醤油ダレで味付けした丼物🧄🐷

「にく増し」にして税込880円なり

さあ来たぞ

風邪予防の為にも、スタミナを付けないとね

生タマゴをかけて、一気に完食しました😋

ちなみに

最近の麦茶のパッケージは春イメージですね🌸

オリジナルタンブラーの抽選

早速、応募にて

次々に

入力を

していきます

６缶セットなので、ちょうど６ポイント

応募完了

２回目、３回目もいきたいものですな🌾

まあ、もし抽選に当たったら記事にしますね👍

【辛島信芳の著書】
IT技術などに興味のある方は、是非ご覧になってください

辛島信芳: books, biography, latest update