ES6の新機能
モジュール化構文
デフォルトエクスポートとインポート:
export default myData;
import importedObject from './js/myData.js';名前付きエクスポートとインポート:
export {myTest, areaData};
import {myTest, areaData} from './js/myData.js';JavaScriptファイルからのエクスポート:
export {myTest, areaData};HTMLファイルでのインポート:
<script type="module">
import areaData from './js/myData.js';
import {myTest, areaData} from './js/myData.js';
console.log("モジュール化でインポート");
console.log(myTest);
console.log(areaData);
</script>アロー関数
const myFunc = (num1, num2) => {
console.log(num1 + num2);
}JSONオブジェクトの修飾子
const myJson = {name: 'jack', age: 15};
myJson.name = "rose";
console.log(myJson);Vueの原理
リアクティブデータの原理
仮想DOM
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
</head>
<body>
<h1 id="mytitle"></h1>
<input id="myarea" type="text"/>
</body>
<script>
let myJson = {name: "jack"};
let newJson = new Proxy(myJson, {
get(target, prop) {
console.log(`アクセスしようとしているプロパティ: ${prop}`);
},
set(target, prop, val) {
console.log(`プロパティ${prop}に値${val}を設定しようとしています`);
if (prop === 'age') {
document.getElementById("mytitle").innerHTML = val;
}
if (prop === 'addr') {
document.getElementById("myarea").value = val;
}
}
});
newJson.age = 15;
newJson.addr = "科学大道1111"
</script>
</html>VueでのJavaScriptコードの書き方と規範
Vueはルート要素内のコンテンツに対してのみ仮想DOMを生成し、その中でのみ有効です。
<div id="app">
<h1>{{myname}}</h1>
<div>名前:{{myObj.name}}</div>
<div>年齢:{{myObj.age}}</div>
</div>1. VueのJavaScriptをインポートし、Vueインスタンスを作成します。
2. setup関数内で使用する変数や関数を検出し、データバインディングを設定します。
3. setup関数内で定義した変数や関数をテンプレートで使用する場合は、returnステートメントを通じて公開します。
import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const myname = ref("小明");
const myObj = reactive({name: '隔壁老王', age: 55});
return {
myname,
myObj
};
}
}).mount('#app')Vueテンプレート構文
挿入式
<div>こんにちは: <span>{{username}}</span>さん</div>
<div v-html="username2"></div>v-bind属性バインディング
<input :type="inputType" :value="username" :disabled="btnStatus"/>
<div class="cls1" :class="mycls">
テストDIV
</div>v-if分岐ディレクティブ
<div v-if="isLogin">
非公開コンテンツ....
</div>
<div v-show="isLogin">
非公開コンテンツ....
</div>v-onイベントバインディング
<button @click="myFun">クリックしてください</button>v-model双方向バインディング
<input type="text" v-model="textVal"/>
<button @click="changeText">テキストを変更</button>
<button @click="getText">テキストを取得</button>v-for繰り返しディレクティブ
<ul>
<li v-for="(item, index) in items" :key="index">{{ item.name }} - {{ item.price }}</li>
</ul>Vueライフサイクル
ライフサイクルフック:
onMounted(): このフックは通常、ページロード終了時にバックエンドからデータを読み込むために使用されます。