記事ディレクトリ
1.Vueプロジェクトを作成する
1.1 プロジェクトの作成
プロジェクトファイルの下で npm init vue@latest を実行します。
npm init vue@latest
1.2 初期プロジェクト
npm install
2.vue3の構文
2.1 複雑な記述方法
<script>
export default {
setup() {
const message = "年后";
const messagehandle = () => {
console.log(message);
};
return {
message,
messagehandle,
};
},
};
</script>
2.2 簡単な書き込み方法
<script setup>
const message = "你好呀";
const logHandle = () => {
console.log(message);
};
</script>
レスポンシブ API、完全なレスポンシブ データ
2.3 リアクティブ (オブジェクトタイプ)
<script setup>
//引入响应式对象
import {
reactive } from "vue";
//执行响应式对象
const state = reactive({
status: 0,
});
//自定义匿名函数
const addCunt = () => {
state.status++;
};
</script>
2.4 ref (単純型)
ref によって実行される応答データは、.value で受け入れられる必要があります。
import {
ref } from "vue";
const state = ref(0);
const addCunt = () => {
state.value++;
};
2.5 計算済み (計算済み属性)
computed が呼び出されると、戻り値は定数として受け入れられます。
<script setup>
import {
ref } from "vue";
import {
computed } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);
const computedList = computed(() => {
return list.value.filter((item) => item > 2);
});
</script>
2.6時計
1. 単一値の変化を監視します
。 2. 監視はデフォルトで参照浅い監視を監視します。
//监听数据的变化
watch(count, (newValue, oldValue) => {
console.log(newValue, "+", oldValue);
});
2. 複数の値の変化を監視する
//监听数据的变化
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName, "+", oldCount, oldName);
});
- immediate はトリガー前に 1 回実行されます
watch(
count,
() => {
console.log("11");
},
{
immediate: true,
}
);
4. 徹底した監視
watch(
count,
() => {
console.log("111");
},
{
deep: true,
}
);
3.vue3のライフサイクル
vue3 のライフサイクルは vue2 と似ています。
4.vue3コンポーネント通信
4.1 父传子（defineProps）
1. 子コンポーネントを親コンポーネントの vue3 に導入し、登録せずに直接使用します
2. 子コンポーネントのデータをdefineProps を通じて受け入れます。
父
<script setup>
import {
ref } from "vue";
import sonCom from "./components/son.vue";
const number = ref(100);
</script>
<template>
<div>
<sonCom message="小明" :number="number"></sonCom>
</div>
</template>
子
<template>
<div>{
{
message }}{
{
number }}</div>
</template>
<script setup>
const count = defineProps({
message: String,
number: Number,
});
console.log(count.message);
</script>
<style></style>
4.1 子传父（defineEmits）
<script setup>
import sonCom from "./components/son.vue";
import {
ref } from "vue";
const getMessage = (msg) => {
console.log(msg);
};
</script>
<template>
<div>
<sonCom @get-message="getMessage"></sonCom>
</div>
</template>
<template>
<button @click="sendMsg">按钮</button>
</template>
<script setup>
const emit = defineEmits(["get-message"]);
const sendMsg = () => {
emit("get-message", "5555");
};
</script>
<style></style>
5.vue3 コンポーネント間通信
Provide はメッセージを送信し、Inject はメッセージを受信します
5.1 レイヤー間でのデータ転送
メッセージを送ります
provide("data-key", count);
メッセージを受け入れる
const message = inject("data-key");
5.2 層間転写方式
const count = ref(0);
const addcount = () => {
count.value++;
};
provide("methods", addcount);
const methods = inject("methods");
6.vue3 コンポーネント間通信 (pinia)
6.1 ピニアをダウンロードする
npm install pinia
6.2 ピニアのグローバル登録
import './assets/main.css'
import {
createApp } from 'vue'
import {
createPinia } from 'pinia'
import App from './App.vue'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')
6.3 ピニアの使用
import {
defineStore} from 'pinia'
import {
ref } from 'vue'
export const useCounterStore=defineStore('counter',()=>{
//定义数据
const count=ref(0)
//定义方法
const addCount=()=>{
count.value++
}
//以对象返回数据
return{
count,
addCount
}
})
ピニアを使用する
<script setup>
//导入方法
import {
useCounterStore } from "./stores/counter";
//执行方法得到实例对象
const useCounter = useCounterStore();
console.log(useCounter);
</script>
<template>
<div>
<button @click="useCounter.addCount">{
{
useCounter.count }}</button>
</div>
</template>