[vue]vue速習中1…fiddle.netにアクセスしてじっこう

fiddle.net(https://jsfiddle.net/)にアクセスして、vue.jsのページから最新版のCDNをコピってfiddleのエディタのHTMLのところに貼り付ける。また、idがappのdivタグを書く。

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<div id=”app”>
<p>{{message}}</p>
</div>

JSのところに以下のコードを貼る。

new Vue({
el: “#app”,
data: {
message: “hello world!”
}
})

※elはエレメントの略。”#app”はid=”app”と対応、”.app”はclass=”app”と対応。これでhello world!が表示されればOK。

---

ボタンを押したらメソッドを実行する処理の実装。

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<div id=”app”>
<p>{{message}}</p>
<button v-on:click=”reverseMessage”>click</button>
</div>

v-onはvue固有の属性。clickはドムイベント。”reverseMessage”はmethodsの中に定義されたmethod名。jsについては以下の通り。

new Vue({
el: “#app”,
data: {
message: “hello world!”
},
methods: {
reverseMessage : function(){
this.message = this.message.split(“”).reverse().join(“”);
}
}
})

split(“”)で1文字ずつ配列化する(split関数の第一引数に何もしないと1文字ずつ配列化する)…reverse()で反転する…join(“”)で配列を1文字ずつ連結する(連結時の区切り文字を本来は第一引数に指定するが空白にすることで無条件に連結する)。これ、初心者初見殺しだと思う。特に詳しい解説はない…。