Introduction-to-Vuejs-Development_2-01
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue.js開発入門]] ＞ Chapter 2 データを表示するとき
#contents
*01 Vue インスタンスを作る：new Vue [#w026b79d]
Vue.jsでWebアプリ（SPA、シングルページアプリケーション）...
Vueインスタンスにいろいろなオプション（設定値）を指定する...
**Vueインスタンス作成の書式 [#ab5bfb60]
new Vue()
または
var 変数名 = new Vue()
~
Vueインスタンスを作成するコンストラクター関数「Vue()」に...
Vueが動作するために最低限必要なデータとして、
-elオプション
-dataオプション
が挙げられます。
**elオプション [#g73dfcf6]
elオプションで、「どのHTML要素とつながるのか」を指定しま...
HTMLの中に「<タグ名 id="ID名">と書いた要素」を用意してお...
**dataオプション [#k4353bc3]
dataオプションで、「どんなデータがあるのか」を指定します。
「data: { データ部分 }」と指定することで、Vueインスタンス...
JavaScriptの文法では、「{」と「}」で囲まれたデータは、オ...
つまり、dataオプションで用意するデータの構造は、オブジェ...
データ部分は、普通のJavaScriptオブジェクト（連想配列）な...
{
プロパティ名1: 値1 ,
プロパティ名2: 値2 ,
プロパティ名3: 値3
}
のように、プロパティ名と値の組をカンマで区切って並べればO...
末尾の組にはカンマは不要なので注意。
data: {
name: "山田太郎",
age: 25,
message: "こんにちは"
}
みたいな形になります。
***JavaScriptのオブジェクト [#e7d90c0d]
（参考）
-javascriptの連想配列と配列の違い - Qiita https://qiita.c...
>全てのオブジェクトは連想配列である。以下は全て同じ連想配...
#code(javascript){{{
// 1
var obj = { hoge: 'hoge' };
// 2
var obj = { 'hoge': 'hoge' };
// 3
var obj = {};
obj.hoge = 'hoge';
// 4
var obj = {};
obj['hoge'] = 'hoge';
// 5
var obj = new Object();
obj.hoge = 'hoge';
}}}
これの1番目の形式ですね。
*** new Vue()でVueインスタンスを作る例 [#p2912ce1]
これが普通のやり方みたいです。
-hello.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText: 'Hello, world!'
}
})
</script>
</body>
</html>
}}}
*** var 変数名 = new Vue()でVueインスタンスを作る例 [#p35...
Vueインスタンスを変数に代入しておけば、後でいろいろな形で...
-hello1.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
let config = {
el: "#app",
data: {
myText: 'Hello, world!'
}
}
let vm = new Vue(config);
</script>
</body>
</html>
}}}
ここでは変数の宣言に「var」キーワードを使うのではなく、ES...
変数「config」にVueインスタンスで使うオプション（設定値）...
変数「vm」にVueインスタンスを代入しています。（vmは、View...
** Vueインスタンスの主なオプション [#m385d268]
elオプションやdataオプションの他にも、Vueインスタンスに設...
| オプション名 | 内容 |h
| el | どのHTML要素とつながるのか |
| data | どんなデータがあるのか |
| methods | どんな処理を行うのか |
| computed | どのデータを使って別の計算をするのか |
| watch | どのデータを監視するのか |
***いろいろなオプションを詰め込んだ例 [#q2d2067e]
ここでは、Vueインスタンスのオプションがどんな風に書けるの...
ただのハリボテなので、実際には動きません。
-hello2.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
//どのHTML要素とつながるのか
el: "#app",
//どんなデータがあるのか
data: {
myText: 'Hello, world!'
},
//どんな処理を行うのか
methods: {
reverseMessage: function () {
this.message = this.message.split('')...
}
},
//どのデータを使って別の計算をするのか
computed: {
fullName: function () {
return this.firstName + ' ' + this.la...
}
},
//どのデータを監視するのか
watch: {
restSec: function () {
if (this.restSec <= 0) {
alert("制限時間です。");
clearInterval(this.timerObj);
}
}
}
})
</script>
</body>
</html>
}}}
methods、computed、watchなどというプロパティー名のオプシ...
終了行:
[[Vue.js開発入門]] ＞ Chapter 2 データを表示するとき
#contents
*01 Vue インスタンスを作る：new Vue [#w026b79d]
Vue.jsでWebアプリ（SPA、シングルページアプリケーション）...
Vueインスタンスにいろいろなオプション（設定値）を指定する...
**Vueインスタンス作成の書式 [#ab5bfb60]
new Vue()
または
var 変数名 = new Vue()
~
Vueインスタンスを作成するコンストラクター関数「Vue()」に...
Vueが動作するために最低限必要なデータとして、
-elオプション
-dataオプション
が挙げられます。
**elオプション [#g73dfcf6]
elオプションで、「どのHTML要素とつながるのか」を指定しま...
HTMLの中に「<タグ名 id="ID名">と書いた要素」を用意してお...
**dataオプション [#k4353bc3]
dataオプションで、「どんなデータがあるのか」を指定します。
「data: { データ部分 }」と指定することで、Vueインスタンス...
JavaScriptの文法では、「{」と「}」で囲まれたデータは、オ...
つまり、dataオプションで用意するデータの構造は、オブジェ...
データ部分は、普通のJavaScriptオブジェクト（連想配列）な...
{
プロパティ名1: 値1 ,
プロパティ名2: 値2 ,
プロパティ名3: 値3
}
のように、プロパティ名と値の組をカンマで区切って並べればO...
末尾の組にはカンマは不要なので注意。
data: {
name: "山田太郎",
age: 25,
message: "こんにちは"
}
みたいな形になります。
***JavaScriptのオブジェクト [#e7d90c0d]
（参考）
-javascriptの連想配列と配列の違い - Qiita https://qiita.c...
>全てのオブジェクトは連想配列である。以下は全て同じ連想配...
#code(javascript){{{
// 1
var obj = { hoge: 'hoge' };
// 2
var obj = { 'hoge': 'hoge' };
// 3
var obj = {};
obj.hoge = 'hoge';
// 4
var obj = {};
obj['hoge'] = 'hoge';
// 5
var obj = new Object();
obj.hoge = 'hoge';
}}}
これの1番目の形式ですね。
*** new Vue()でVueインスタンスを作る例 [#p2912ce1]
これが普通のやり方みたいです。
-hello.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText: 'Hello, world!'
}
})
</script>
</body>
</html>
}}}
*** var 変数名 = new Vue()でVueインスタンスを作る例 [#p35...
Vueインスタンスを変数に代入しておけば、後でいろいろな形で...
-hello1.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
let config = {
el: "#app",
data: {
myText: 'Hello, world!'
}
}
let vm = new Vue(config);
</script>
</body>
</html>
}}}
ここでは変数の宣言に「var」キーワードを使うのではなく、ES...
変数「config」にVueインスタンスで使うオプション（設定値）...
変数「vm」にVueインスタンスを代入しています。（vmは、View...
** Vueインスタンスの主なオプション [#m385d268]
elオプションやdataオプションの他にも、Vueインスタンスに設...
| オプション名 | 内容 |h
| el | どのHTML要素とつながるのか |
| data | どんなデータがあるのか |
| methods | どんな処理を行うのか |
| computed | どのデータを使って別の計算をするのか |
| watch | どのデータを監視するのか |
***いろいろなオプションを詰め込んだ例 [#q2d2067e]
ここでは、Vueインスタンスのオプションがどんな風に書けるの...
ただのハリボテなので、実際には動きません。
-hello2.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/...
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
//どのHTML要素とつながるのか
el: "#app",
//どんなデータがあるのか
data: {
myText: 'Hello, world!'
},
//どんな処理を行うのか
methods: {
reverseMessage: function () {
this.message = this.message.split('')...
}
},
//どのデータを使って別の計算をするのか
computed: {
fullName: function () {
return this.firstName + ' ' + this.la...
}
},
//どのデータを監視するのか
watch: {
restSec: function () {
if (this.restSec <= 0) {
alert("制限時間です。");
clearInterval(this.timerObj);
}
}
}
})
</script>
</body>
</html>
}}}
methods、computed、watchなどというプロパティー名のオプシ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
