発音
View と一緒です。ビュー（/ v j u ː /）です。
とりあえず使ってみる
以下の内容で index.html を作成してください。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Vue.js</title>
</head>
<body>
<div id="app">
Hello {{ message }} !
<button @click="update">change</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'World'
},
methods: {
update() {
this.message = 'Vue.js'
}
}
})
</script>
</html>
作成した index.html をブラウザにドラッグ＆ドロップしてください。
以下の画面が表示されます。
change ボタンを押してください。
以下の画面に切り替わります。
あなたは Vue.js を使って画面描画を実現しました。
おめでとう。
なんか物足りないあなたに
要素の削除・アンドゥもしてみましょう。
See the Pen QorNXG by zackey (@wiethkaty) on CodePen.
感想
jQuery でゴリゴリ頑張るよりスマートな気がしますね。
なるほどjQueryとVue.jsは併用出来るので、一画面だけVue.jsを使うなど、
jQueryでゴリゴリしてるところを少しずつ侵食していきたいですね。
なお、お気づきかもしれませんが、以下の1,000を超えるいいねを
集めた記事に沿って少しアレンジしながら勉強した覚書です。
真新しさはありません。あしからず。