JavaScript

【Vue.js入門】jsFiddleが便利に使える設定について

2019-04-12 By プログラミング入門ナビ編集部

この記事では、Vue.jsの学習で使用しているjsFiddleが便利に使える設定について紹介します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

次の設定を行います

Auto-run code
clear-console on run

JS Fiddleの設定は、Settingsから行うことができます。

Auto-run code

Auto-run code をONにすると、
コードを書くだけで、RUNボタンを押さなくてもプログラムを実行できるようになります。
好みによって、ON/OFFを使い分けてください。

clear-console on run

これは、RUNが実行するたびに、consoleをクリアする設定です。

好みによって、ON/OFFを使い分けてください。

この記事の学習内容を動画を使って学習する

おわりに

このレクチャーでは、設定しておくとjsFiddleが便利につかえる設定について紹介しました。

オンライン動画を使って学習する

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

VueJS入門: dataオプションにオブジェクトや配列要素を設定

2019-03-22 By プログラミング入門ナビ編集部

この記事では、Vue.jsで、dataオプションにオブジェクトや配列要素を設定して、テンプレートから使う方法について説明いたします。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

完成形

完成形の動作としては下記になります。

Vueインスタンス側のコード

var app = new Vue({
    el: '#app',
  data: {
    message: 'Hello Vue.js!',
    count: 1,
    // Object
    user: {
        lastName: 'Yamada',
      firstName: 'Taro',
      prefecture: 'Tokyo'
    },
    // Array
    colors: ['Red', 'Green', 'Blue'],
  }
})

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!',

count: 1,

// Object

user: {

lastName: 'Yamada',

firstName: 'Taro',

prefecture: 'Tokyo'

// Array

colors: ['Red', 'Green', 'Blue'],

}

})

まず、Vueインスタンスから見ていきましょう。
以前のレクチャーで、dataオプションに、messageプロパティを定義して、値を設定する方法について学習しました。

データオプションには、カンマ区切りで複数のプロパティを定義するとができます。

数字も使えます。できます。
count : 0

Objectを設定することができます。

ユーザーを管理するObjectを作ります。
オブジェクト名はuserで、
名字、名前、居住地の都道府県をプロパティにもつとします。
lastName　Yamada,　FirstName　Taro, プリフィクスチャー Tokyo
とします。

次に、配列を作成します。
配列名はcolorsで、値にRed, Green, Blueを設定してみます。
配列は [ (ブラケット、日本語でいうと、各カッコで囲むことで表現できます。

テンプレート側のコード

次に、テンプレート側から、データオプションの各値を使用して、画面に描画してみましょう。

<div id="app">
  
    {{ message }}
  
  
    {{ count}}
  
  
    {{ users.prefecture }}
  
  
    {{ colors[1] }}
  
</div>

</div>

まずは、文字列、数も同様です。

次に、オブジェクト、プリフィクスチャーの値を表示してみましょう。
オブジェクト名、userのあとに、ドットとして、prefectureとします。
これで、Tokyoと表示できました。

次に、配列、この、Greenを表示してみましょう。
colos ブランケットで囲って、配列のindexを指定します。
Redが0で、Greeが1、Blueが2なので、1を指定します。
Greenと表示されました。

動画で学習する

おわりに

この記事では、dataオプションにオブジェクトや配列要素を設定して、
テンプレートから使う方法について学習しました。

オンライン動画を使って学習する

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

Vue.js入門テキストのデータバインディング

2019-01-01 By プログラミング入門ナビ編集部

Vue.js入門テキストのデータバインディングについてプログラミング入門者向けに説明致します。

一部復習となりますが、画面に、「Hello Vue.js」と表示するプログラムを、テキストのデータバインディングにより、実装してみましょう。

動画で学習する。

リアクティブとは

まず、表示するテキストのデータを定義します。

DOMの更新を自動化するデータバインディングを行うには、
テンプレートで使用するすべてのデータは、リアクティブデータとして定義する必要があります。

リアクティブというのは、日本語でいうと、”反応的”といった意味になります。
わかりやすく、ざっくりと説明するなら、「各要素をつなげて反応的に変化させること」です。

具体例としてExcelでリアクティブな動きを見ることができます。

リアクティブデータというのは、このリアクティブな動きができるデータのことです。

それでは、リアクティブなデータの定義をしてみましょう。

アプリケーションで使用するデータを宣言するには、

dataオプションを使用します。
データオプションは、テンプレート側から、参照できる値を格納したオブジェクトです。

プロパティ名：値の形式で、列挙します。

new Vue({
el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

messageプロパティの値をブラウザに表示

次に、
テンプレートに、pタグを設置して、その中身に、dataオプションに定義したmessageプロパティの値をブラウザに表示する記述を行います。

<div id="app">
 {{ message }} 
</div>

</div>

とします。

プロパティ名を、2重の中括弧で囲っているところに着目します。

これは、”Mustache（マスタッシュ）” 構文を利用した、テキスト展開になります。
Mustache（マスタッシュ）というのは、日本語でいうと、口ひげのことでです。
この2重カッコが、口ひげにも見えることから、”Mustache（マスタッシュ）” 構文と呼ばれます。

vue.jsでは、アプリケーションで使うデータを、データオプションで用意して、テンプレート側がでそれを参照することを行います。このようなデータ割り当ての仕組みがデータバインディングです。

実行

こコマでできたら、JSFiddleのRUNボタンをクリックして、プログラムを実行するします。

Hello Vue.js! と表示されました。
ちなみに、ルートのテンプレートの外側は、Vue.jsの世界では無いので、
外側に、 {{ message }} とかくと、データバインディングが行われませんので、注意しましょう。

描画部分のHTMLについて

実際の描画部分のHTMLについて、確認します。

<div id="app">
  Hello Vue.js!
</div>

Hello Vue.js!

</div>

マスタッシュ構文

”Mustache（マスタッシュ）” 構文、つまり、2重の中括弧で記述した部分が、dataオプションのmessageプロパティの値に、置き換わっていることがわかります。

テキストコンテンツの一部として、messageプロパティを、この部分に、データバインドしているからです。

完成品のコースコード

このレクチャーでは、テキストのデータバインディングについて学習しました。

おわりに

この記事では、Vue.js入門テキストのデータバインディングについて学習しました。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

Bestseller

Vue JS入門決定版！jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ中村祐太（Yuta Nakamura）, ITエンジニア, プログラミング講師Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavascriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。Webエンジニア・Webデザイナーのためのスキルを身につける

オンライン動画を使って学習する

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する