Vue3基础2

最新推荐文章于 2024-11-06 20:09:12 发布
最新推荐文章于 2024-11-06 20:09:12 发布
阅读量407 收藏 3
点赞数 8
分类专栏： Vue3 文章标签： typescript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/141529313
版权

1.Hooks

就是进行数据的封装，同一种类型的 数据 方法 计算属性 ，放在一起

命名规范 use+'功能名称'.ts 或.js

创建一个文件夹 hooks

1.useDog.ts

import { reactive,onMounted } from "vue";
import axios from "axios";


export default function () {
    //数据
    let dogList = reactive([
        "https://images.dog.ceo/breeds/pembroke/n02113023_14262.jpg",
    ]);
    //方法
    async function addDog() {
        try {
            let result = await axios.get("https://dog.ceo/api/breeds/image/random");

            dogList.unshift(result.data.message);
        } catch (error) {
            alert(error.message);
        }
    }


    onMounted(()=>{
        addDog();
    })
    
    return { dogList, addDog };
}

 2.useSum.ts

import { ref ,onMounted,computed} from "vue";

export default function () {
    //数据
    let sum = ref(0);
    let bigSum = computed(()=>{
        return sum.value*10;
    })
    
    //方法
    function changeSUM() {
        sum.value++;
    }



    onMounted(()=>{
        sum.value+=10;
    })
    

    //向外部提供东西
    return {
        sum,
        changeSUM,
        bigSum
    }

}

3.person.vue

<template>
  <div class="person">
    <h2>求和为:{{ sum }}  计算出十倍后的数:{{ bigSum }}</h2>
    <button @click="changeSUM">点我sum+1</button>

    <hr />
    <img v-for="item in dogList" :key="item" :src="item" alt="" />
    <br />
    <button @click="addDog">再来一只小狗</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
    import useSum from '@/hooks/useSum';
    import useDog from '@/hooks/useDog';

    let {sum,changeSUM,bigSum} = useSum();
    let {dogList,addDog} = useDog();

</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}

img {
  height: 100px;
  margin-right: 10px;
}
</style>

2.Vue3 的路由

1.安装路由器

npm i vue-router

2.创建文件

3.router.ts

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'

//第二步： 创建路由器
const router = createRouter({
    history:createWebHistory(),//路由器的工作模式(稍后讲解)
    routes:[
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News
        },
        {
            path:'/about',
            component: About
        }
    ]
})

//暴露出去
export default router

4.app.vue

<template>
  <div class="app">
    <h2 class="title">Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>
      <RouterLink  to="/news" active-class="xiaozhupeiqi">新闻</RouterLink>
      <RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink>
    </div>

    <!-- 展示区 -->
     <div class="main-content">
          <RouterView></RouterView>
     </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView,RouterLink } from 'vue-router';




</script>

<style scoped>

  /* App */
  .title {
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, gray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px;
  }
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.xiaozhupeiqi {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }

  .active{
     background-color: #ffc268;
  }
</style>

5.main.ts

//引入 createApp用于创建应用
import {createApp} from 'vue';
//引入 App 根组件
import App from './App.vue';

//引入路由器
import router from './router';


//创建一个应用
const app = createApp(App);


//使用一个插件
app.use(router);

//挂载整个应用到app容器中
app.mount('#app');

6.两个注意点

7.路由器的工作模式

 解决history模式404问题

 

8.to的两种写法

9.嵌套路由

1.Detail.vue

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history:createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes:[
        {
            name: 'zhuye',
            path:'/home',
            component: Home
        },
        {
            name:'xinwen',
            path:'/news',
            component: News,
            children:[
                {
                    path:'detail',
                    component:Detail

                }
            ]
        },
        {
            name:'guanyu',
            path:'/about',
            component: About
        }
    ]
})

//暴露出去
export default router

 2.News.vue

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id"><RouterLink :to="{path:'/news/detail'}">{{ news.title }}</RouterLink></li>
      </ul>
        <!-- 展示取 -->
     <div class="news-content">
      <RouterView></RouterView>
     </div>
    </div>
  
  </template>
  
  <script setup lang="ts" name="News">
    import { nanoid } from 'nanoid';
    import { reactive } from 'vue';
    import { RouterView } from 'vue-router';

    const newsList = reactive([
      {id:nanoid(),title:'一种游戏',content:'西兰花'},
      {id:nanoid(),title:'一种水果',content:'学IT'},
      {id:nanoid(),title:'如何一夜暴富',content:'明天是周一'},
      {id:nanoid(),title:'震惊，玩玩没想到',content:'快过年了'},
    ]);
    


  </script>
  
  <style scoped>
  /* 新闻 */
  .news {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  .news ul {
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;
  }
  .news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
  }
  .news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
  }
  </style>

10.query参数

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink> -->
         <!-- 第二种写法 -->
        <RouterLink :to="{
          // path: '/news/detail',
          name: 'xiangqing',
          query: {
            id: news.id,
            title: news.title,
            content: news.content
          }
        }">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}


.news li::marker {
    color: #64967E;
  }
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <ul class="news-list">
    <li>编号：{{ query.id }}</li>
    <li>标题：{{ query.title }}</li>
    <li>内容：{{ query.content }}</li>
  </ul>
</template>
  
  <script setup lang="ts" name="Detail">
// 这是一个hooks,向这个组件实例暴露了一个函数
import { useRoute } from "vue-router";
import { toRefs } from "vue";

const route = useRoute();

const {query} = toRefs(route);
// console.log(route.query);



</script>
  
  <style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list > li {
  line-height: 30px;
}
</style>

11.params参数

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            params: {
              id: news.id,
              title: news.title,
              // content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            params: {
              id: news.id,
              title: news.title,
              // content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

12.Props路由配置

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history: createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes: [
        {
            name: 'zhuye',
            path: '/home',
            component: Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail',//问号代表可传可不传
                    component: Detail,
                    //第一种写法，将路由收到的所有params参数作为props传给路由组件
                    // props:true //params参数全部变成 params 

                    //第二种写法 函数写法 可以自己决定将什么作为props给路由组件
                    props(route){
                        // console.log(route)
                        return route.query
                    }

                    //第三种写法 写死了 
                    // props: {
                    //     a: 100,
                    //     b: 200
                    // }
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About
        }
    ]
})

//暴露出去
export default router
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 纯字符串  -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            query: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);
</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
<template>
  <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>
  
  <script setup lang="ts" name="Detail">
// import { useRoute } from 'vue-router';
// import { toRefs } from 'vue';
// const route = useRoute();
// const {params} =toRefs(route);

defineProps(["id", "title", "content"]);
</script>
  
  <style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list > li {
  line-height: 30px;
}
</style>

13.replace属性

<template>
  <div class="app">
    <h2 class="title">Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <!-- 对象写法 路径跳转 -->
      <RouterLink :to="{path:'/home'}" active-class="active" replace>首页</RouterLink>
      <!-- 对象写法 名字跳转 --> 
      <RouterLink  :to="{name:'xinwen'}" active-class="active" replace>新闻</RouterLink>
      <!-- 字符串写法 -->
      <RouterLink to="/about" active-class="active" replace>关于</RouterLink>
    </div>

    <!-- 展示区 -->
     <div class="main-content">
          <RouterView></RouterView>
     </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView,RouterLink } from 'vue-router';




</script>

<style scoped>

  /* App */
  .title {
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, gray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px;
  }
  .navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
  }
  .navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
  }
  .navigate a.active {
    background-color: #64967E;
    color: #ffc268;
    font-weight: 900;
    text-shadow: 0 0 1px black;
    font-family: 微软雅黑;
  }
  .main-content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
  }

  .active{
     background-color: #ffc268;
  }
</style>

14.编程式路由导航

脱离<RouterLink> 实现路由跳转

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <button @click="showNewsDetail(news)">查看新闻</button>
        <!-- 第二种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',//params不允许path传参，只能用name  而且参数只能是基本类型
            query: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          
          >{{ news.title }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示取 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
  
  <script setup lang="ts" name="News">
import { nanoid } from "nanoid";
import { reactive } from "vue";
import { RouterView,useRouter } from "vue-router";

const newsList = reactive([
  { id: nanoid(), title: "一种游戏", content: "西兰花" },
  { id: nanoid(), title: "一种水果", content: "学IT" },
  { id: nanoid(), title: "如何一夜暴富", content: "明天是周一" },
  { id: nanoid(), title: "震惊，玩玩没想到", content: "快过年了" },
]);

const router = useRouter();

function showNewsDetail(news){
//对象写法 和 to同理
  router.push({
    name:'xiangqing',
    query:{
     ...news
    }
  })
  // router.replace({
  //   name:'xiangqing',
  //   query:{
  //    ...news
  //   }
  // })
}



</script>
  
  <style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}

.news li::marker {
  color: #64967e;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

15.重定向

//创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

//引入一个一个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

//第二步： 创建路由器
const router = createRouter({
    history: createWebHistory(),//History模式
    // history:createWebHashHistory(),//Hash模式
    routes: [
        {
            name: 'zhuye',
            path: '/home',
            component: Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiangqing',
                    path: 'detail',//问号代表可传可不传
                    component: Detail,
                    //第一种写法，将路由收到的所有params参数作为props传给路由组件
                    // props:true //params参数全部变成 params 

                    //第二种写法 函数写法 可以自己决定将什么作为props给路由组件
                    props(route){
                        // console.log(route)
                        return route.query
                    }

                    //第三种写法 写死了 
                    // props: {
                    //     a: 100,
                    //     b: 200
                    // }
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path:'/',//重定向
            redirect:'/home'
        }
    ]
})

//暴露出去
export default router

荭色海湾
关注
专栏目录
vue3版openlayers基础脚手架
08-24
在本项目中，“vue3版openlayers基础脚手架”是一个使用Vue3框架构建的Web应用程序，它专门用于展示和操作二维地图。OpenLayers是一个强大的开源JavaScript库，它允许开发者在网页上创建交互式地图，支持多种数据源...
vue3 demo.zip
12-05
Vue3 是一款流行的前端JavaScript框架，由尤雨溪开发并维护，它在Vue2的基础上进行了大量的优化和改进，带来了更高效、更灵活的开发体验。本压缩包"vue3 demo.zip"包含了一些基于Vue3的基础示例项目，帮助开发者更好...
vue3中使用tinyMCE
07-01
在Vue3中集成TinyMCE是一个常见的需求，特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG（所见即所得）编辑器，它提供了丰富的文本格式化选项，使得用户可以方便地创建和编辑HTML内容。...
vue3基础框架封装yyds
05-21
"vue3基础框架封装yyds"这个标题表明我们将讨论如何利用Vue3构建一个基础的后台管理系统，并且可能涉及到对Vue3的一些高级特性或者最佳实践的封装。 描述中的"npm i"命令意味着我们首先需要安装项目依赖，这通常...
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2114
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Jest进阶知识：深入测试 React Hooks-确保自定义逻辑的可靠性
weixin_53961451的博客
11-05 292
通过本文的介绍，我们了解了如何使用 `@testing-library/react-hooks` 测试 React Hooks，特别是自定义 Hooks。通过对 Hooks 的行为进行测试，可以确保它们在不同情况下的表现符合预期，从而提高代码的可靠性和可维护性。
React v19 革新功能：2024 年需要了解的所有信息
粉丝们务必加入微信粉丝群
11-01 779
React作为现代Web开发的核心框架之一，一直在不断创新和进步。前段时间发布的React 19版本带来了一系列令人兴奋的新特性和改进，这些变化将显著提升开发效率、应用性能和开发体验。本文再次回顾一下React 19的关键特性(复习)，以及它们如何改变前端开发的格局。1. React服务器组件（RSC）React服务器组件是此次更新的一大亮点。它允许组件在构建时或每次请求时在服务器端渲染，从而减轻...
前端react常见面试题目（basic)
警警的博客
11-02 1001
react常见面试题目（basic)
【error】 react 控制台报错Invalid hook call
chirp_CQ的博客
11-06 215
导致这个的原因多半都是因为不同版本的react 导致的，我也遇到了，我在多次尝试后发现多半是因为我两个前端项目都同时在本地打开的情况下，webstorm识别到了两个项目的不同react版本。暂时的解决办法是将node_modules 给删除掉，然后重新执行。我的前端react + ant-design-pro项目能正常启动。，这将是对我很大的鼓励！若是对你有所帮助的话，希望能获得你的。
4.1 WINDOWS XP,ReactOS对象与对象目录----1
最新发布
zhyjhacker的博客
11-06 696
系列文章目录 文章目录系列文章目录4.1 对象与对象目录OBJECT_HEADERObpLookupEntryDirectory()NtCreateTimer() 4.1 对象与对象目录 “对象(Object)”这个词现在大家都已耳熟能详了，但是对象到底是什么呢?广义地说，对象就是“目标”，行为的目标，或者说行为的受体。所以，广义地说，任何客观存在着的物体都可以成为对象。但是，在计算机技术里,“对象”是个专有名词，其定义是:一个(或一组)数据结构和定义于其上的(若干)操作。这里所谓操作是指实现某种功能的函
探索React源码：React Diff
pingguocu3的博客
11-03 1008
本篇文章我们来了解一下Diff算法的实现过程。
[FE] React 初窥门径（四）：React 组件的加载过程（render 阶段）
kelai_6792的博客
11-03 808
只看调用栈的话，React 组件的加载过程还不完整，我们知道某个函数之前别调用之前，是否还调用了其他函数，以上调用栈只展示了函数的链式调用关系，如果用缩进表示调用链路的话，它应该是这样的，现在我们开始介绍 React 函数组件的加载全流程，我们的示例项目如下，截止到本文为之，我们总共记录了这些 code-tour，全流程包含了特别多的细碎逻辑，我们首先想弄明白的是，调用的全流程（函数前面的数字，表示缩进层次）。一图胜千言，（函数前面的数字，表示缩进层次）介绍的一致，我们可以启动项目，
React面试基础题大全（all)
警警的博客
11-04 1259
前端react常见面试题全解all
【综合案例】使用React编写B站评论案例
qq_45569925的博客
11-05 596
在文本框中输入要评论的文本，然后点击【发布】按钮，即可将评论添加到下方的评论列表当中进行展示；和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI。classnames是一个简单的JS库，可以非常方便的。现在的问题：字符串的拼接方式不够直观，也容易出错。在React中，状态被认为是只读的，我们应该始终。点击删除按钮可以将对应的评论从评论列表中移除。, 从而控制影响组件的渲染结果。
【React】JSX规则
weixin_46191445的博客
11-06 271
JSX规则
next中shadcn、React Hook Form、zod 使用教程
solocao的专栏
11-02 472
使用 zod 定义表单字段的验证规则。zod 的 Schema 将帮助我们在表单中验证输入数据。name: z.string().min(1, { message: '姓名不能为空' }),email: z.string().email({ message: '无效的邮箱格式' }),});
vue3 ref,shallowRef,reactive,shallowReactive使用的简单异同点说明
花花鱼的专栏
11-02 578
ref,shallowRef,reactive,shallowReactive的异同点
3.3 windows,ReactOS系统中页面的换出----1
zhyjhacker的博客
11-03 979
凡是有了倒换页面的物理页面，其PHYSICAL PAGE结构中的SavedSwapEntry字段就指向这个倒换页面，现在一方面将该字段的内容转移到相应的页面映射表项中(并将其PAPRESENT标志位清0)，另一方面通过 MmSetSavedSwapEntryPage()将这个字段清 0。如前所述，所谓内存“消费者”并不是指实际占用着物理页面的进程，而是指各种不同的用途例如用户空间的页面映射，内核中的可倒换物理页面池、不可倒换物理页面池，磁盘上扇区内容的高速缓存等。换言之，另两种用途的页面是不让修剪的。
Vue3基础示例项目展示与实践
- "vue3-basic-master.zip"顾名思义，可能是一个包含了Vue 3基础知识和概念的示例项目。它可能涉及到一些基础的例子，如数据绑定、事件处理、表单输入处理等。 此外，还提到了"typescript-basic-master.zip"，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值