前提
Vue.jsで学んだことを書いていきます。
Vue.jsで利用できる主なイベント
# フォーム
focus 要素にフォーカスが入った時
blur 要素からフォーカスが外れた時
change 要素の値を変更した時（input、select、textareaなど）
select テキストボックス/テキストエリアのテキストを選択した時
submit フォームから送信した時
# マウス
click 要素をクリックした時
dblclick 要素をダブルクリックした時
mousedown 要素をダブルクリックした時
mouseover 要素にマウスポインターが乗った時
mouseenter 要素にマウスポインターが乗った時
mouseleave 要素からマウスポインターが外れた時
# マウス
mouseout 要素からマウスポインターが外れた時
mousemove 要素の中をマウスポインターが移動した時
mouseup マウスのボタンを離した時
# キー
keydown キーを押した時
keyup キーを離した時
keypress キーを押し続けている時
# その他
resize ウィンドウのサイズを変更した時
scroll ページや要素をスクロールした時
error ページ内でエラーが発生した時
contextmenu コンテキストメニューを表示する前
index.html
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: '皆さんこんにちは！'
}
});
</script>
</body>
ディレクティブ
{{...}} Mustache構文
v-xxxxx属性 ディレクティブ属性
ディレクティブ
属性やスタイルの操作、条件分岐、繰り返しの処理など、より複雑な機能を組み込みたい場合に利用する。
・{{...}} の無効化（v-pre）
index.html
<body>
<div id="app">
<p v-pre>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: '皆さんこんにちは！'
}
});
</script>
</body>
・ブール属性
checked、selected、desabled、multipleなど、値がいらない（＝属性名を指定するだけで意味がある）属性のことを論理属性、またはブール属性という。
これらの値をバインドするにはtrueまたはfalse値を用いる。
算出プロパティ
index.html
<body>
<div id="app">
<p>{{ localEmail }}</p>
<input type="button" value="クリック" :disabled="flag">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
email: 'Y-Suzuki@example.com'
},
computed: {
localEmail: function() {
return this.email.split('@')[0].toLowerCase();
}
}
});
</script>
</body>
メソッド
<body>
<div id="app">
<p>{{ localEmail() }}</p>
<input type="button" value="クリック" :disabled="flag">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
email: 'Y-Suzuki@example.com'
},
methods: {
localEmail: function() {
return this.email.split('@')[0].toLowerCase();
}
}
});
</script>
</body>
ライフサイクルフック
index.html
<body>
<div id="app">
<p>現在時刻： {{ current.toLocaleString() }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="react.js"></script>
</body>
index.js
new Vue({
el: "#app",
data: {
current: new Date()
},
created: function() {
let that = this;
//1000ミリ秒スパンでcurrentプロパティを更新
this.timer = setInterval(function() {
that.current = new Date();
}, 1000);
},
//終了前にタイマーを破棄
beforeDestory: function() {
clearInterval(this.timer);
}
});
・setメソッド
Vue.set(target,key,value）
target:追加対象のオブジェクト
key :キー
value :値
※複数のプロパティを追加する場合
Object.assignメソッドを利用する。
that.author = Object.assign({}, that.author,
{ company: '〇〇プロジェクト', sex: 'male', age: 18 });
_.debounce(func,wait)
func:遅延実行すべき処理
wait:遅延時間（ミリ秒）
_.debounceメソッドは、処理を直接実行するのではなく、そのための関数を返す点に注意。
toLowerCase() メソッド
小文字に変換された文字列の値を返す。
toLocaleString
この数値を表す言語依存の文字列を返す。