vue

【Nuxt.js】$slotsを使ってみよう

#vue #nuxt #プログラミング #エンジニア

🎈 WPでも公開中です
https://wp.me/pc9NHC-1iY

前置きあまり見かけない$slotsのご紹介🌟

$slotsはVue公式の
render関数で使用されています。

vm.$slots のアクセスは、描画関数 によるコンポーネントを書くときに最も便利です。
vm.$slots

ただrender関数はNuxt

もっとみる
スキありがとうございます!よければシェアお願いします♪

アプリを作ろう(8):VueでのJavaScript連携

・templateの中でscriptの変数値をどうやって使うのか
・属性値として変数値をどうやって使うのか
・なぜcolor='{{ background }}'のようには書けないのか

改めてv-date-pickerのソースを見てみましょう。

<template><v-app> <v-container> <v-card> <h1>Hello Nuxt</h1>

もっとみる

アプリを作ろう(7):export defaultの記述を理解する

前回に引き続き、Vue/Nuxtで記述するJavaScriptについて解説します。前回お見せしたVueのJavaScript部分をもう一度確認しましょう。

<script>export default { data: () => ({ date: "", }),};</script>

このexport defaultとはなんなのでしょうか。それにはまず、Vue/Nuxtがどのように動いてい

もっとみる

アプリを作ろう(6):JavaScriptの基本

前回のVuetifyの説明の最後にv-date-pickerを紹介しましたが、そのサンプルをもう一度見てみましょう。

青い部分に本来なら選択した日付が表示されるはずですが、表示されていません。これは前回省略したv-modelが指定されていないためです。

v-modelは簡単にいうと日付情報を格納しておくための変数の指定場所になります。では変数はどのように指定すればよいのか、ということをこの記事

もっとみる

【Nuxt.js】コンポーネントを自動インポートしよう

#vue #nuxt #プログラミング #エンジニア  

🎈 この記事はWP専用です
https://wp.me/pc9NHC-1iI

前置きコンポーネントを呼び出す際は
この2つが必要ですよね?💡
・import文
・componentsフィールドの定義

<template><div class="page"> <ButtonDefault /></div></template><sc

もっとみる
スキありがとうございます!よければシェアお願いします♪
1

アプリを作ろう(5):Vuetifyの導入

Vuetifyとは一番最初に紹介したアプリをもう一度見てみましょう。

https://shindoi2021.netlify.app/

これをHTMLで一から作るとなると結構骨が折れます。全体を覆っている角丸の四角形ですらCSSで角丸の半径を指定したり、影をつけたりしないといけません。

Vuetifyでは外観が精錬されたパーツを簡単に実装できるように提供してくれています。この角丸の四角はv-

もっとみる

Webフロントエンジニア向けのメンターサービス開始について

2021年5月から『Webフロントエンジニアを目指す方へのメンターサービス(オンライン)』を開始します。

当社についての詳細はこちら
https://comsica.com/

このサービスを始めようと思ったきっかけは、面接や知り合いの未経験者エンジニアの方の話を聞いて、『初学者の方の受け皿が少ない』という現状を知り、なんとかできないかと考えたからです。
具体的にはProgateなどでプログラミ

もっとみる

アプリを作ろう(4):Vue/Nuxtのインストール

package.jsonの作成いよいよアプリを作っていきます。まずはVue/Nuxtのインストールです。
Vue/NuxtはNode.jsを使って動作します。そのためにはまずNode.jsの設定ファイルを作る必要があります。

VS Codeでworkspaceのフォルダを開き、更に新しいフォルダを作りましょう。名前はなんでも構いませんが、ここではfirst_appにします。

first_app

もっとみる

アプリを作ろう(3):Node.jsのインストール

・Windowsはインストーラを使ってインストール
・Macはbrewを使ってインストール
・Linuxはaptとnpmとnを使ってインストール

Node.jsとはこの記事ではNode.jsの詳しい説明は省略します。
簡単に言うと「サーバーで動いているプログラム」になります。サーバーでNode.jsを起動し、そのうえでアプリを動かし、WebページやWebアプリを提供することができます。
アプリを

もっとみる