JavaScript
ディレクティブとは v-で始まる特別な属性のことです。 その名前の通り、vue.jsに何らかの指令を行う仕組みです。 ディレクティブの例 ・v-bind ・v-if ・v-show ・v-for ・v-on ・v-model v-bind v-bindを要素に追加すると属性のデータバインディングをして…
a要素を設置して、Vue.js公式サイトへのリンク作成し、 dataオプションにurlプロパティを作成、初期値はhttps://jp.vuejs.org/、 a要素の属性hrefに、v-bindを使ってrulプロパティの値をデータバインディングします。 index.html (body部のみ) <div id="app"> <p> <a v-bind:href="url">Vue.js</a> </p> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> in…
Vue.jsを試してみているのでそのメモです。 とりあえず今回は"Hello Vue.js"とVue.jsを使って出力させてみます。 準備(ファイル作成) 以下のような構成でファイルを作成します。 vue_sample |--index.html |--index.js |--styles.css HTMLファイルにVue.jsを…
エンジニアの先輩のおすすめで、udemyの「React + Redux を使用したモダンフロントエンド開発」を購入しました！！ https://www.udemy.com/react-redux-basic/ その先輩は、 「progate ES&6講座 => Reactでカウンターを作る系のQiita記事 =>JS王のReactチュ…
評価によって星の表示を変化させる方法 下の図のように評価の数字によって表示させる星を変えるとする。 HTMLの記述 <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="style1.css"> <title>html_css_question1</title> </head> <body> <h1>評価を星で表示する</h1><p>10%</p><div class="star-ratings-sprite"></div></body></html>
ajaxとは？ AsynchronousJAvascriptXmlの頭文字。 非同期のjavascriptによる(XMLを用いた)通信。 もう少し具体的にいうと、javascriptという言語で記述したプログラムによって、通常の通信と同期せずに(非同期に)、データの通信をする事。 昔はXMLという形式…
後から追加された要素へ普通にfunction設定しても動かない JavaScriptによって後から追加された要素要素に対して、 $(セレクタ).on('click', function( ) { 処理 } ) としても動かない。 これは、ビューのローディング時には、その要素が存在しなかったため…
railsにおける非同期通信によるメッセージ送信の大まかな流れ jsファイルに、フォームが送信されたらイベントが発火するようかく。 イベントが発火した時にAjaxを使い、createアクションが動くようにする。 コントローラーでHTMLとjsonの処理を分ける。 jbui…
githubpages上からajax通信ができない？！ OpenWeatherMapという世界中の年の天気を調べることができるAPIを使ったアプリを、github pges を使って公開してみました。 以下はリンクと、トップページのスクショです。 JS Weather API Sample しかし、公開して…
jQueryのイベントと実行する関数の設定 基本的には以下の構文で、あるイベントが発生したらfunction内の処理を実行する、という処理を書く。 $(function() { $("セレクタ").on("イベント", function() { イベントが起きた時の処理 }); }); 例えば、idがsecti…
