2019-07-22から1日間の記事一覧
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">
<body> <div id="app"> <form> <input type="text" @keyup.27="clear" v-model="name"> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="template.js" charset="utf-8"></script> var app = new Vue({ el: '#app', data:{ name:'ゲスト', }, methods: { clear: function() { return th…</body>
<head> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> </head> <div id="example-3"> <button @click="show = !show"> Toggle render </button> </div>
<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>
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>こんにちは、にんじゃわんこさん！</h1> //JSのonClickを仕込む場合は、対象タグ内に記述。アロー関数でイベント指定ができる。 <button onClick={()=> {console.log('ひつじ仙人')}}>ひつじ仙人</button> <button onClick={()=></button></div>…
import React from 'react'; class App extends React.Component { render() { // renderメソッド内で関数を定義できる。書き方はJavascriptと同様。 const name = "にんじゃわんこ"; const imgUrl = 'https://s3-ap-northeast-1.amazonaws.com/progate/shar…
App.jsx //Reactを使うために書く決まり文句 import React from 'react'; //React.Componentを継承（extends）してコンポーネントといわれる「パーツ」を作る。extends React.Componentは決まり文句。 class App extends React.Component { render() { retur…
