そうだ！Vue.jsを使ってみよう！ - 1
公式のガイドのページを見ながら使ってみようと思います。
まず使うときには、フレームワークのインポートからです。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
開発バージョン、便利なコンソールの警告が含まれているものを使って見ます。
まずは、ホームページ上に文字を表示させることから始めます。
HTMLの部分は(<body></body>)
<div id="app">
{{ message }}
</div>と記述をしておきます。
スクリプトの部分<script></script>に、
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})と記述すると、ホームページ上は、
Hello Vue!
と表示されます。HTML上の <div>{{ message }}</div>の部分にスクリプトで命令したことが反映されています。
ここで全体のHTMLを書いておきます。
<html>
<head>
<style>
body{
font-family:sans-serif
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>ホームページ上の記述の変更ができました。次に、
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>というHTML上のタグが並んでいる場合の
<span v-bind:title="message">
の部分をスクリプトで変更して見ましょう。スクリプト部分に
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})と書いて実行、ホームページをリロードすると、
Hover your mouse over me for a few seconds
to see my dynamically bound title!
という文字が表示されます。その表示を確認して、
<span v-bind:title="message">
の部分をブラウザのインスペクタ(要素を調査)でHTMLがどうなっているかを見てみると、
<span title="You loaded this page on 2020/11/6 5:45:26">
となっていることが確認できると思います。(以下Firefoxのインスペクタを使っています)
そして、コンソールに移動して、
app2.message = 'こんにちは'
と書いて、実行(return)して見ましょう。
<span title="こんにちは">
となっていることが確認できると思います。"<span></span>"の中の文字を変更することができます。
<span v-bind:title="message">
"v-bind:title"とすることで動的に"title"の変更ができるということです。
v-bind 属性はディレクティブと呼ばれています。ディレクティブは Vue.js によって提供された特別な属性を示すために v- 接頭辞がついています。これはあなたの推測通り、描画された DOM に特定のリアクティブな振舞いを与えます。ここで宣言されているのは、「この要素の title 属性を Vue インスタンスの message プロパティによって更新して保存する」ということになります。
この記事が気に入ったらサポートをしてみませんか？