JS周りが混沌とする中、自分用のメモ。結局わかりにくくなってしまったが、個人用ということでお許しを。
Native, jQuery, Vue.jsで同じことを書いてみる
試したいことは
- HTML内のテキスト取得
- inputの値の取得
- classの編集
- イベント処理
と言ったところ。
Vue.jsは順番を追って書きづらい（Vue.jsが使いづらいという意味ではない）。
動作イメージ
下記のような感じのものが表示されるはず。
コードを書く
あと、別に<script>分ける必要ないのだけど、わかりやすさのために分けました。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
/* 切り替え用のCSS */
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color:green;
}
</style>
</head>
<body>
<div>
<h3></h3>
<!-- native -->
<div id="native">
<p id="native_text">Nativeさん。こんにちは。</p>
<p><input type="text" value="native" id="native_input"></p>
<p><button id="native_button">native</button></p>
</div>
<!-- jQury -->
<div id="jquery">
<p id="jquery_text">jQueryさん。こんにちは。</p>
<p><input type="text" value="jquery" id="jquery_input"></p>
<p><button id="jquery_button">jQuery</button></p>
</div>
<!-- vuejs -->
<div id="vuejs">
<p id="vuejs_text" v-bind:class="className">{{ message }}</p>
<p><input type="text" value="vuejs" id="vuejs_text" v-model="vuejs_input"></p>
<p><button id="vuejs_button" v-on:click="vuejs_click">Vue.js</button></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
//Native
(function(){
//値の取得（普通の要素）
var element1 = document.getElementById("native_text");
console.log(element1.textContent);
//値の取得（input）
var element2 = document.getElementById("native_input");
console.log(element2.value);
//classをいじる
element1.classList.add("red");
//イベント
document.getElementById("native_button").addEventListener("click", function(){
alert("native");
});
})();
</script>
<script>
//jQuery
$(function(){
//値の取得（普通の要素）
var text1 = $("#jquery_text").text();
console.log(text1);
//値の取得（input）
var text2 = $("#jquery_input").val();
console.log(text2);
//classをいじる
$("#jquery_text").addClass("blue");
//イベント
$("#jquery_button").click(function(){
alert("jquery");
});
});
</script>
<script>
//Vue.js
var app = new Vue({
el: "#vuejs",
data: {
message: "Vue.jsさん。こんにちは",
className: "green",
vuejs_input: "vuejs"
},
methods : {
vuejs_click : function(){
alert("vuejs");
}
}
})
</script>
</body>
</html>
