vue3+element-plus

辞南℡

于 2024-10-10 09:41:43 发布

阅读量1.6k

点赞数 19

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52076808/article/details/142813148

版权

一、Vue3

1.`setup`函数

1.1概述

这个对象可以包含响应式数据、计算属性、方法、以及任何需要在模板中访问的内容。

1.2定义：

setup 函数是 Vue 3 组件的一个新的入口函数，所有组件的逻辑都可以在这个函数内定义。它在组件实例创建之前调用，所以无法访问 this 关键字。

1.3参数：

```
setup
```
函数接受两个参数：
1. props：一个包含所有传递给组件的 props 的对象。
2. context
  
  ：一个包含
```
attrs
```
  ,
```
slots
```
  , 和
```
emit
```
  的对象。
  - attrs：所有未被 props 接收的属性。
  - slots：组件的插槽内容。
  - emit：用于触发事件的方法。

1.4返回值：

setup 函数返回一个对象，这个对象中的属性和方法将会暴露给组件的模板使用。

1.5案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 setup Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
    <div id="app">
        <Counter></Counter>
    </div>
    <script>
        const Counter = {
            template: `
                <div>
                    <h2>Counter: {{ count }}</h2>
                    <button @click="increment">Increment</button>
                    <button @click="decrement">Decrement</button>
                </div>
            `,
            setup() {
                // 定义响应式数据
                const count = Vue.ref(0);

                // 定义方法
                const increment = () => {
                    count.value++;
                };

                const decrement = () => {
                    count.value--;
                };

                // 返回数据和方法，以便在模板中使用
                return {
                    count,
                    increment,
                    decrement
                };
            }
        };

        Vue.createApp({
            components: {
                Counter
            }
        }).mount('#app');
    </script>
</body>
</html>

2.ref函数

2.1定义：

ref 是 Vue 3 提供的一个函数，用来创建响应式的引用。它接受一个初始值，并返回一个包含这个值的响应式对象。

2.2案例：

import { ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式的数据 'count'
    const count = ref(0);

    // 定义增加计数的方法
    const increment = () => {
      count.value++;
    };

    // 返回数据和方法，以便在模板中使用
    return {
      count,
      increment
    };
  }
};

3.reactive函数

3.1定义：

reactive 是 Vue 3 中用于创建深度响应式对象的函数。它接收一个普通的对象，并返回一个响应式代理对象，只能操作复制类型的数据。

3.2案例：

<template>
<div>
    <div>{{ obj.name }}</div>
    <div>{{ obj.password }}</div>
    <div>{{ obj.result.res.bes[0] }}</div>
    <button @click="btn">点击</button>
</div>
</template>
<script>
import{reactive, ref} from 'vue'
export default {
  setup(){
    const name="张三"
    const password='61281628'
    const result={
        res:{
            bes:[]
        }
    }
    const obj=reactive({
        name,
        password,
        result
    })
    const btn=()=>{
        obj.result.res.bes[0]='更深层的调用'
    }
    return{
        obj,btn
    }
  }
}
</script>

<style scoped>

</style>

4.toRef 函数

4.1定义：

toRef的本质是应用，与原始数据有交互，修改响应式数据会影响到源数据，但是不会更新视图层。

4.2案例：

<template>
<div>
    <div>{{ vof }}</div>
    <div>{{ vot.name }}</div>
    <div>{{ obj.name }}</div>
    <div>{{ obj.password }}</div>
    <div>{{ obj.result.res.bes[0] }}</div>
    <button @click="btn">点击</button>
</div>
</template>
<script>
import{reactive, ref, toRef} from 'vue'
export default {
  setup(){
    const vo="源数据"
    const vot={name:"源数据t",name2:"name2"}
    const vof=ref(vo)
    const voto=toRef(vot,"name")
    const name="张三"
    const password='61281628'
    const result={
        res:{
            bes:[]
        }
    }
    const obj=reactive({
        name,
        password,
        result
    })
    const btn=()=>{
        obj.result.res.bes[0]='更深层的调用'
        vof.value="修改后源数据"
        voto.name="修改后源数据t"
        console.log(vo)
        console.log(vot)
    }
    return{
        obj,btn,vof,vot,voto
    }
  }
}
</script>

<style scoped>

</style>

5.toRefs函数

5.1定义：

用于将一个响应式对象的所有属性转换为 ref 对象。每个 ref 对象保持与原始对象属性的双向绑定，从而在解构和传递时保持响应性。

5.2案例：

<template>
<div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{a}}</div>
    <div>{{b}}</div>
    <div>{{c}}</div>
    <div>{{d}}</div>
</div>
</template>

<script>
import { reactive,toRefs } from 'vue';
export default({
    setup(){
        const obj={name:'马云',age:50,a:70,b:12,c:133,d:13}
        const news=reactive(obj)
        const btn=()=>{

        }
        return {btn,...toRefs(news)}
    }
})
</script>
<style>
</style>

6.watch函数

6.1定义：

watch 是 Vue.js 中的一个选项，用于监听和响应 Vue 实例的数据变更。通过 watch，你可以在数据变化时执行一些自定义的逻辑，比如发起网络请求、执行复杂计算等。

6.2`watch` 与 `computed` 的对比

computed：用于声明基于其他响应式数据的计算属性，计算属性的值会被缓存并仅在依赖的数据发生变化时重新计算。适用于需要计算值并在模板中使用的场景。
watch：用于响应式地监控数据变化，并在变化时执行某些逻辑。适用于需要在数据变化时执行副作用操作的场景。

6.3案例：

<template>
    <div>{{ p1 }}</div>
    <div>{{ p2 }}</div>
    <button @click="p1++">p1++</button>
    <button @click="p2+=2">p2+2</button>
    <button @click="p3.pass.word++">p3.pass.word++</button>
</template>
<script>
import { reactive,ref,watch } from 'vue';
export default({
    setup(){
        const p1=ref(1)
        const p2=ref(1)
        const p3=reactive({
            name:'aaa',
            pass:{
                word:1
            }
        })
        //watch监听一个数据
        // watch(p1,(newobj,oldobj)=>{
        //     console.log(newobj,oldobj)
        // })
        //watch监听多个数据
        // watch([p1,p2],(newobj,oldobj)=>{
        //     console.log(newobj,oldobj)
        // })
        //watch监听reactive响应式数据变化
        //只能监听到最新的结果，上一次的数据监听不到
        // watch(p3,(newval,oldval)=>{
        //     console.log(newval,oldval);
        // })
        //watch监听reactive响应式数据中某一个值的变化：最新结果和上一次的结果都可以得到
        watch(()=>p3.pass.word,(newval,oldval)=>{
            console.log(newval,oldval)
        },{immediate:true})//{immediate:true}在页面刷新时开启一次监听
        return{
            p1,p2,p3
        }
    }
})
</script>
<style>

</style>

7.watchEffect

7.1定义

watchEffect 是一个在 JavaScript 和类似 Vue.js 的框架中使用的函数，它会立即运行一个响应式副作用，并在其依赖项发生变化时重新运行。它通常用于 Vue 的 Composition API 中，自动跟踪依赖项并在必要时更新副作用。

7.2案例：

<template>
    <div>{{ p1 }}</div>
    <div>{{ p2 }}</div>
    <button @click="p1++">p1++</button>
    <button @click="p2+=2">p2+2</button>
    <button @click="p3.pass.word++">p3.pass.word++</button>
</template>
<script>
import { reactive,ref,watch, watchEffect } from 'vue';
export default({
    setup(){
        const p1=ref(1)
        const p2=ref(1)
        const p3=reactive({
            name:'aaa',
            pass:{
                word:1
            }
        })
        const res=watchEffect(()=>{
            console.log("监听到对象变化")
            const a=p1.value
            console.log(a)
        })
        res()
        return{
            p1,p2,p3
        }
        
    }
})
</script>
<style>
</style>

8.shallowRef和shallowReactive

8.1定义

在 Vue.js 的 Composition API 中，shallowRef 和 shallowReactive 是用于创建响应式数据的函数。与普通的 ref 和 reactive 不同，它们只对对象的顶层属性进行响应式追踪，而不会递归地将对象内部的嵌套属性也变成响应式的。

8.2案例：

<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age.num }}</h1>
        <h1>{{ p2 }}</h1>
        <button @click="age.num++">num++</button>
        <button @click="p2++">p2++</button>
    </div>
</template>
<script>
import { shallowReactive,shallowRef, toRefs, watch } from 'vue';
export default(
    {
        setup(){
            //shallowReactive:只处理第一层数据
            const p1=shallowReactive({
                name:'马玉',
                age:{
                    num:2
                }
            })
            //shallRef只处理基本类型数据
            const p2=shallowRef(0);

            watch(()=>p1.age.num,(newval,oldval)=>{
                console.log(newval,oldval)
            })
            return{
                ...toRefs(p1),p2
            } 
        }
    }
)
</script>
<style>
</style>

9.组件传值

9.1通过 `provide` 和 `inject`,ref方法传值

父组件

<template>
  <div class="back">
    我是父类组件
    <h1>{{ p1.name }}</h1>
    <h1>{{ p1.age }}</h1>
    <button @click="btn">调用子组件</button>
  </div>
  <div>
    <HelloWorld ref="val"/>
  </div>
</template>
<script>
import { provide, reactive,ref } from 'vue';
import HelloWorld from './components/vue3-组件传值.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    //父组件通过方法向子组件传值
    const val=ref()
    const p2=ref({name:'father'})
    const btn=()=>{
      val.value.resa(p2)
    }
    //父组件向子组件传值
    const p1=reactive({name:'马云',age:50})
    provide('name',p1)//传
    
    
    return {p1,btn,val,p2}
  }
}
</script>

<style>
.back{
  background-color: blue;
  padding: 20px 0;
}
</style>

子组件

<template>
    <div class="back">
        我是子类组件
        <h1>{{ p1.name }}</h1>
        <h1>{{ p1.age }}</h1>
    </div>
</template>
<script>
import { inject, provide, reactive,ref} from 'vue';

export default {
  setup(){
   //父组件通过方法向子组件传值
    const resa=p2=>{
        console.log('子组件被调用！')
        console.log(p2.value.name)
    }
 //父组件向子组件传值
    const p1=inject('name');
    console.log(p1)
    return{
        p1,resa
    }
  }
}
</script>
<style scoped>
.back{
    background-color: aqua;
    color:black;
    padding: 20px 0;
}
</style>

10.抽离封装

10.1定义

将重复使用的代码或逻辑提取出来，封装成可重用的组件、函数、或工具，以提高代码的可维护性和可复用性。

10.2案例：

公用的数据或方法

//公用的数据或方法

import { reactive } from "vue";

const pubLic=()=>{
    const res_a=reactive({
        name:'马玉',
        age:50,
        company:'阿里巴巴'
    })
    return res_a
}
export default pubLic

父组件

<template>
  <div class="back">
    我是父类组件
    <h1>{{ p1.name }}</h1>
    <h1>{{ p1.age }}</h1>
    <button @click="btn">修改父组件</button>
  </div>
  <div>
    <HelloWorld/>
  </div>
</template>
<script>
import HelloWorld from './components/vue3-封装抽离.vue'

import { provide, reactive,ref } from 'vue';
import pubLic from '../src/config/public'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){

    const p1=pubLic()
    return{
      p1
    }
  }
}
</script>
<style>
.back{
  background-color: blue;
  padding: 20px 0;
}
</style>

子组件

<template>
    <div class="back">
        我是子类组件
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>
        <h1>{{ company }}</h1>
    </div>
</template>
<script>
import { inject, provide, reactive, toRefs} from 'vue';
import publicScr from'../config/public'
export default {
  setup(){
    const p1=publicScr()
    return{
      ...toRefs(p1)
    }
  }
}
</script>
<style scoped>
.back{
    background-color: aqua;
    color:black;
    padding: 20px 0;
}
</style>

11.路由

11.1定义

当用户访问某个特定路径时，Vue Router 会根据定义的路由规则加载相应的组件。通过定义路由，开发者可以实现单页面应用程序（SPA）中的页面导航。

11.2配置

创建并配置路由器 (router/index.js):

import { createRouter, createWebHashHistory } from "vue-router";
const routes=[
    {
        //登录页面
        path:'/',
        name:'login',
        component:()=>import(/*webpackChunkName:'Login'*/ '@/page/login/login.vue')
    }
]

const router=createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router

在 main.js 中引入路由器:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
const app=createApp(App)
app.use(router)
app.mount('#app')

使用 <router-view> 渲染组件

<template>
  <router-view/>
</template>
<script>
export default{ 
}
</script>
<style>
</style>

二、element-plus

1.快速使用

yum安装element-plus

npm install element-plus --save

引入main.js

import { createApp } from 'vue'
import App from './App.vue'
//路由
import router from './router/index.js'
//element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


const app=createApp(App)
app.use(router)
//elementPlus引入
app.use(ElementPlus, {
    locale: zhCn,
  })
app.mount('#app')

浏览器样式规范：样式规范网址

    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">

辞南℡

关注

19
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫