Vueチュートリアル解説

yuyuyuriko78 commented 4 years ago

基本構文

head内のscript要素内src属性で、ウェブ上に落ちてるVue.jsを読み込む。これによりVueを使用可能になる
bodyに、Vueを反映させる対象のdivをつけ、id属性を設定しておく。
- Mustache記法 : {{ }} の中に、Vueインスタンスと結びつけたい変数を入れる
- Vueインスタンス（内モデル）とhtml要素を結びつけることを「バインディング」という。
bodyに、script要素を作り、その中でVueインスタンスを生成する。
Vueインスタンスの中身
- elオプションで、Vueを適用させるhtml要素を指定する。
- CSSセレクタ、DOM要素をしていすることができる。
- 今回は、id要素が「app」であるhtml要素を指定
- dataオプションを作り、中にmessageという名前のデータを定義し、文字列「aaa」を代入

<!DOCTYPE html>
<html lang="ja">

<head>
<title>インデックス</title>
<meta charset="utf-8">
<script src="https;//cdn.jsdelivr.net/npm/vue/dist/vue.js"><script>
</head>

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

<script>
new Vue ({
el: '#app'.
data: {
message: "aaa"
})
</script>

yuyuyuriko78 commented 4 years ago

バインディングの方法

バインディングとは

Vueのインスタンスとhtml要素を結びつけること。
方法①　Mustache記法

方法②　ディレクティブ

yuyuyuriko78 commented 4 years ago

HTMLに関する復習

要素、タグ、属性など

yuyuyuriko78 commented 4 years ago

各種ディレクティブ説明（今回はtext, html, on の３つ）

そもそもディレクティブとは

「v-●●」というもの。Vueのディレクティブだからv-なのか？

Atsuhiko / Web-App

Vueチュートリアル解説 #7

基本構文

バインディングの方法

バインディングとは

方法①　Mustache記法

方法②　ディレクティブ

HTMLに関する復習

各種ディレクティブ説明（今回はtext, html, on の３つ）

そもそもディレクティブとは

v-text

v-html

v-on

Atsuhiko / Web-App

Vueチュートリアル解説 #7

基本構文

バインディングの方法

バインディングとは

方法① Mustache記法

方法② ディレクティブ

HTMLに関する復習

各種ディレクティブ説明（今回はtext, html, on の３つ）

そもそもディレクティブとは

v-text

v-html

v-on

方法①　Mustache記法

方法②　ディレクティブ