Introduction-to-Vuejs-Development_1-05
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue.js開発入門]] > Chapter 1 Vue.jsって何
*05 まとめ [#cf74bd72]
Vue.jsの基本的な使い方
-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>
}}}
+ vue.jsを読み込む。
(ここではCDNのリンクを張っている)
+Vue.jsとつながる要素を作る。
(<div id="app">の部分)
+scriptタグでVueインスタンスを作る。
(new Vue()の部分)
+Vueインスタンスで表示データを用意する。
(プロパティ data: の部分)
+データと表示をつなげる。
(appという名前でつなげている部分。<div id="app">とel: "#...
~
Vue.jsで作るWebアプリの基本骨格は、こんなパーツで構成され...
Vue.jsの基本的な使い方はシンプルで、特に複雑なルールでは...
終了行:
[[Vue.js開発入門]] > Chapter 1 Vue.jsって何
*05 まとめ [#cf74bd72]
Vue.jsの基本的な使い方
-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>
}}}
+ vue.jsを読み込む。
(ここではCDNのリンクを張っている)
+Vue.jsとつながる要素を作る。
(<div id="app">の部分)
+scriptタグでVueインスタンスを作る。
(new Vue()の部分)
+Vueインスタンスで表示データを用意する。
(プロパティ data: の部分)
+データと表示をつなげる。
(appという名前でつなげている部分。<div id="app">とel: "#...
~
Vue.jsで作るWebアプリの基本骨格は、こんなパーツで構成され...
Vue.jsの基本的な使い方はシンプルで、特に複雑なルールでは...
ページ名: