vue3学习笔记第三天

路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/composite',
      component: () => import('../views/Composite.vue')
    },
    {
      path: '/reactive',
      component: () => import('../views/Reactive.vue')
    },
    {
      path: '/computed',
      component: () => import('../views/Computed.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

通过RouterLink调用 属性to代表访问哪个网页时调用对应的路由表中的组件 

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/composite">组合式API</RouterLink>
        <RouterLink to="/reactive">响应式绑定</RouterLink>
        <RouterLink to="/computed">计算属性演示</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

组合式API，setup语法糖，ref

<template>
    <div>name:{{ stu.name }}</div>
    <div>age:{{ stu.age }}</div>
    <div>测试的次数:{{ cnt }}</div>
    <button @click="change">测试</button>
</template>

<script setup>
   
   //从vue软件中，根据需要按需引入了一个reactive函数
   import { reactive,ref } from 'vue'; 

   //reactive()只能把普通对象升级为响应式对象(reactive object)
   const stu = reactive({  
       name:"mary",
       age:12
   });

   //reactive()不能去升级一个基本类型，只能升级类类型
   //ref()函数可以升级基本类型，把一个基本类型转变为响应式对象
   //ref()函数也可以升级普通类对象
   //我们基本使用ref()来做响应式升级
   const cnt = ref(0);

//    console.log(stu);

   const change = ()=>{
       stu.name='mike';
       stu.age++;
       cnt.value++;   //在代码中去访问一个基本类型转化过来的响应式对象，需要用.value
   }

</script>

计算属性 

<template>
  <div>计算属性演示</div>
  <div>
    {{ a }}+....+{{ b }}={{ scopedSum }}
  </div>
</template>

<!-- setup属性是一个语法糖， 可以不需要封装对象和做导出书写 -->
<script setup>
import { computed, ref } from "vue";


    const a=ref(1);//通过ref的方法配置成一个动态属性，调用基本属性时，需要.value,对象则不用
    const b=ref(50);
    //计算属性的使用
    const scopedSum = computed(
        ()=>{
            let sum=0;
            for(let i=a.value;i<=b.value;i++)
            {
                sum+=i;
            }
            console.log("computed now!");
            return sum;
        }
    )

</script>

<style>

</style>

watch监听器

<template>
    <div>
        商品数量: <input type="text" v-model="amount">
    </div>
    <div>
        学生姓名: <input type="text" v-model="stu.name">
    </div>
</template>

<script setup>

    import { ref, watch } from 'vue';

    
    const amount = ref(0.0);
    const stu = ref({  
       name:"mary",
       age:12
    });
    //在amout发生改变时调用监听器
    watch(amount,
          (newVal,oldVal)=>{
            console.log("发生数据发生变化了!",newVal,oldVal);
          },
          {
            immediate:true  //立即触发
          })


    //如果监听一个对象，浅层监听，则需要对象完全被替换才会触发. 设置为深度监听，可以做到修改任一个属性，都可以触发监听事件
    watch(
        ()=>stu.value.name,
        ()=>{
            console.log("name is changed!");
        }
    )



</script>