Vue3-js 學習筆記

目錄

• reactive 資料繫結
• 事件繫結
• 生命函數週期
• 計算屬性-computed
• props
• emit-自定義事件
• ref-獲取元素及子元件
• watch
• vue3-元件通訊
• reactive-ref-區別

前言

優秀的教程

• vue3 官網

reactive 資料繫結

<template>
  <div class="app">
    <h1>{{ state.name }}</h1>
  </div>
</template>

<script>
  import { reactive } from "vue";
  export default {
    name: "App",
    setup() {
      const state = reactive({
        name: "朱大常",
      });

      return { state };
    },
  };
</script>
 

事件繫結

<template>
  <div class="app">
    <h1>{{ state.name }}</h1>
    <button type="button" @click="login">按鈕</button>
  </div>
</template>

<script>
  import { reactive } from "vue";
  export default {
    name: "App",
    setup() {
      // 資料定義
      const state = reactive({
        name: "朱大常",
      });
      // 事件定義
      const login = () => {
        state.name = "朱大常001";
      };
      return { state, login };
    },
  };
</script>
 

生命函數週期

onMounted

<template>
  <div class="app"></div>
</template>

<script>
  import { onMounted } from "vue";
  export default {
    name: "App",
    setup() {
      // 元件載入
      onMounted(() => {
        console.log("元件已掛載");
      });
    },
  };
</script>

計算屬性-computed

computed (只要監聽的那個資料改變，就會重新計算)

<template>
  <div class="app">
    <h1>{{ state.name }}</h1>
    <h2>歲數:{{ state.age }}</h2>
    <h3>計算後的屬性:{{ state.setComputed }}</h3>

    <input type="text" v-model="state.username" />
    <button type="button" @click="login">按鈕</button>
  </div>
</template>

<script>
  import { reactive, computed } from "vue";
  export default {
    name: "App",
    setup() {
      // 資料定義
      const state = reactive({
        name: "朱大常",
        username: "",
        age: 18,
        setComputed: computed(() => state.age + 2),
      });
      // 事件定義
      const login = () => {
        state.name = state.username;
      };
      setTimeout(() => {
        state.age = 19;
      }, 2000);
      return { state, login };
    },
  };
</script>

props

<!-- 子元件 -->
<template>
  <h1>子元件：{{ title }}</h1>
</template>

<script>
  import { onMounted } from "vue";
  export default {
    name: "test",
    props: {
      title: {
        type: String,
        default: "",
      },
    },
    setup(props) {
      onMounted(() => {
        console.log("----元件載入完成-props值為", props.title);
      });
    },
  };
</script>

<!-- 父元件 -->
<template>
  <div class="app">
    <test :title="state.title"></test>
  </div>
</template>

<script>
  import { reactive } from "vue";
  import test from "./components/test";
  export default {
    name: "App",
    components: {
      test,
    },
    setup(props) {
      // 資料定義
      const state = reactive({
        title: "朱大常",
      });
      return { state };
    },
  };
</script>

emit-自定義事件

emit 傳值-注意這裡的事件生命使用小寫加-

<!-- 子元件 -->
<template>
  <button type="button" @click="handleClick">emit按鈕</button>
</template>

<script>
  import { onMounted } from "vue";
  export default {
    name: "test",
    setup({ emit }) {
      const handleClick = () => {
        emit("my-event", "hello");
      };
      return { handleClick };
    },
  };
</script>

<!-- 父元件 -->
<template>
  <div class="app">
    <test @my-event="parentClick"></test>
  </div>
</template>

<script>
  import { reactive } from "vue";
  import test from "./components/test";
  export default {
    name: "App",
    components: {
      test,
    },
    setup(props) {
      // 資料定義
      const state = reactive({
        name: "朱大常",
      });

      const parentClick = (e) => {
        console.log(e);
      };

      return { parentClick };
    },
  };
</script>

ref-獲取元素及子元件

ref 注意-相比 vue2.x 有很大的改變--ref 和 reactive 差別-ref 線

<!-- 子元件 -->
<template>
  <div></div>
</template>

<script>
  import { ref } from "vue";
  export default {
    name: "test",
    setup() {
      // 1. 定義響應式的資料
      const count = ref(1);

      // 2. 定義方法
      const refsgh = () => {
        console.log("-----k");
      };
      return { count, refsgh };
    },
  };
</script>

<!-- 父元件 -->
<template>
  <div class="app">
    <test ref="comRef"></test>
    <button @click="clickClid001">獲取子組成資料</button>
    <button @click="clickClid002">呼叫子元件方法</button>
  </div>
</template>

<script>
  import { ref } from "vue";
  import test from "./components/test";
  export default {
    name: "App",
    components: {
      test,
    },
    setup() {
      // 1. 建立一個元件的 ref 引用
      const comRef = ref(null);

      // 2. 獲取子組成的值
      const clickClid001 = () => {
        console.log(comRef.value.count);
      };

      // 3. 呼叫子元件的方法
      const clickClid002 = () => {
        comRef.value.refsgh();
      };
      return { comRef, clickClid001, clickClid002 };
    },
  };
</script>

watch

<template>
  <div class="app">
    <button @click="watch001">watch方法</button>
    <!-- 這裡.value可以省略 -->
    <h4>ref值:{{ nameref }}</h4>
  </div>
</template>

<script>
  import { watch } from "vue";
  export default {
    name: "App",
    setup() {
      const nameref = ref("朱大常");
      watch(nameref, (newValue, oldValue) => {
        // 輸出 前端有的玩 子君
        console.log(newValue, oldValue);
      });

      const watch001 = () => {
        nameref.value = "張德帥";
      };
      return {
        watch001,
        nameref,
      };
    },
  };
</script>

vue3-元件通訊

reactive-ref-區別