以下のようにすることで、hpが300以上のmonsterにだけ、「強い！」という文字を足すことができます。 See the Pen v-forとv-ifを連携して特定のdateにだけ効果を付与したい by りっしー (@hiwriterprogram) on CodePen. また、v-forと同じタグの中で、先ほど…

SPAにも重要な機能であるページ切り替え。これを実現するのが、v-ifとv-showです。以下はv-ifを使用し、selectオプションによって表示内容を切り替えるというもの。 See the Pen v-ifで表示切り替え by りっしー (@hiwriterprogram) on CodePen. 以下はv-sho…

See the Pen SVGとv-bindの連携 by りっしー (@hiwriterprogram) on CodePen. 参考 基礎から学ぶ Vue.js

通常、imgタグ内に属性やサイズなどを指定する際には以下のような書き方をしなければなりません。 <img id="1" alt="商品1サムネイル" width="200" height="200" src="......"> しかし、これでは1つ1つ書き込む手間も、修正にかかる時間も大きく、html自体の可視性も下がってしまいます。 Vue.jsのv-bindを使用すれば、最初にかかる手…

1つ目は、JSのdataオブジェクトに設定した中身をv-onのclassやstyleに直接指定する方法です。 See the Pen QeNyqY by りっしー (@hiwriterprogram) on CodePen. 2つ目は、上記の方法の簡略版。オブジェクトをdataに作っておき、html側にはシンプルに記述する…

v-onを使うもの See the Pen クリックごとに数が増えるボタン by りっしー (@hiwriterprogram) on CodePen. $refsを使うもの See the Pen $refsを使ったカウントアップボタン by りっしー (@hiwriterprogram) on CodePen. 2つの違いは？ 1つ目はdataにcount…

See the Pen transitionを利用したフェードイン・フェードアウト by りっしー (@hiwriterprogram) on CodePen.

See the Pen v-forの基本的な使い方 by りっしー (@hiwriterprogram) on CodePen.

See the Pen Vue.jsの基本出力 by りっしー (@hiwriterprogram) on CodePen.

[Vue warn]Cannot find element: #appが出る時の解決法としては、以下の2つ。 bodyタグの最後にnew Vue()を記述 DOMContentLoadedイベントハンドラ内でnew Vue()を行う DOMContentLoadedイベントハンドラ内でnew Vue()を行う document.addEventListener('DOM…

LaravelとVue.js Vuex Vue Router学習用に使用したサイトや使える素材サイトをまとめています。情報あればコメントにお願いします〜！ チュートリアル Vue.js Vuex Vue Routerを使ってメッセージ送信機能 qiita.com 説明は割と端折られているところもありま…

See the Pen VoaLPG by りっしー (@hiwriterprogram) on CodePen. 手順 Vee-Validateプラグインのインポート(CDNからが手軽） Vee-ValidateをJS側で有効化（useメソッド） form要素に検証ルールを付与 errorsメソッドで検証後のエラーをキャッチ V-Validate…

参考 フック関数 フック関数の引数 addEventLisrtener追加も可能！ See the Pen ydZdJQ by りっしー (@hiwriterprogram) on CodePen. 参考 速習Vue.js 速習シリーズ 山田祥寛 フック関数 //以下の「bind」はフック関数と言う bind:(el,binding)=>{ el.style.…

<div id="app"> <form> <label for="tax">消費税8%の場合：</label> <input type="text" id="tax" v-model.number="tax" @change="onchange"> </form> {{ onchange() }} </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="template.js" charset="utf-8"></script> var app = new Vue({ el: '#app', d…

<form> <label for="kb">1KB：</label> <input type="radio" id="kb" v-model="unit" @change="onchange" <!--v-bindには配列型オブジェクトのデータが渡せる--> :value="{ name: 'キロバイト', size: 1024 }" /><br> <label for="mb">1MB：</label> </form>

<div id="app"> <form> <lavel for="name" ></lavel> <textarea id="name" v-model="myName"></textarea> <div>{{myName}}</div> <lavel for="性別">性別</lavel> <input type="radio" v-model="gender" value="男性"> </form></div>

Vue.jsを使えば簡単にキーコマンドを作ることができます。以下は、textarea入力中に「ali + h」を押すとウィンドウアラートでメッセージが出現するという仕組み。 <div id="app"> <form> <lavel for="message">メッセージ：（ヘルプは「alt + h」で！）</lavel> <textarea id="message" @keyup.alt.72="help" v-model="message"></textarea> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue">

<div id="app"> <button v-for="tab in tabs" v-bind:key="tab.id" v-on:click="currentTab = tab.id"> <span v-bind:class="tab.id">{{ tab.text }}</span> </button> <component v-bind:is="currentTabComponent"></component></div>

<div id="app" class="articleArea"> <datas-joblist v-for="list in joblist" v-bind:todo="list" v-bind:key="list.id"></datas-joblist> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> // templeteを使う際のタグ名をつける Vue.component('datas-joblist', {…

<div id="app"> <ul> // v-forで展開するが、itemsの部分はscriptの配列と合致していればなんでもいい。 //また、「i」自体も特に意味を持っていない。$iや$valのようなものと考える。 <li v-for="i in items">{{i.product}}:{{i.price}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el:'#app', data:{ //itemsの部分はv-…

<div id="app"> <input type="text" v-model="budget" />の中で買えるもの <ul> <li v-for="item in bestproducts" v-bind:key="bestproducts.id">{{item.product}}:{{item.price}}円</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { budget : 10000…

<div id="app"> <h1>消費税計算(消費税0.8%の時)</h1> <input type="text" v-model="badget">円 <h2>税込価格に変えると</h2> <p>{{ badgetChnage }}円の価値があります。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el:'#app', data:{ badget: 100 },…

<html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue.jsの練習</title> </head> <body> <div id="app"> 普通のoptionボタンを用意。v-modelというディレクティブを設定 <select v-model="selected"> <option disabled value="">選択してください</option> <option>Hello</option> <option>Good afternoon</option> <option>…</option></select></div></body></html>

<html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue.jsの練習</title> </head> <body> <div id="app"> <p>{{message1}}</p> <p>{{message2}}</p> //書き換え用のボタンを設置して、v-on:イベントを設置。 //"toggleLoginType"は任意の名前です。 <button v-on:click="toggleLoginType">書き換えボタン</button> </div> </body></html>

<html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue.jsの練習</title> </head> <body> <div id="app"> <p>{{message1}}</p> <p>{{message2}}</p> <p>{{message3}}</p> </div> //以下はVue.jsの書き方ルール。 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> // まずは new Vueで定義を。…</body></html>