vue3框架基本使用(基础指令)

已于 2024-07-10 14:11:43 修改
阅读量717 收藏 30
点赞数 23
分类专栏： 前端 文章标签： javascript 前端 vue.js
于 2024-06-13 17:05:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile_pbb/article/details/139659191
版权

一、响应式数据

1.ref

ref可以定义 基本类型的响应式数据， 也可以定义对象类型响应式数据

<template>
  <h1>{{ name }}</h1>
  <button @click="test">修改姓名</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let name = ref('zhansan')

function test(){
  name.value = "张三"
}


</script>

注意：
1.响应式数据必须使用ref进行修饰
2.在template引入响应式数据时，直接引入变量名即可
3.修改ref修饰的响应数据的值时，必须使用 "变量.value"才能修改

2.reactive

reactive是定义对象类型的响应式数据

<template>
  <h1>{{ obj.name }}</h1>
  <button @click="test">修改姓名</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

let obj = reactive({name: "zhangsan"})


function test(){
  obj.name = "张三"
}


</script>

注意：reactive 如果重新进行赋值，那么原来的对象就会失去响应式
reactive修改值的内容不需要使用 .value

3.选择原则

如果数据式对象类型，层级不深，两个都可以。如果层级深，推荐使用reactive

4.toRefs

先看实例，此时发现name的值变化了，但是模板中的值没有改变。
这是因为obj在解构后，name就不是响应式的数据了。

<template>
  <h1>{{ name }}</h1>
  <button @click="test">修改姓名</button>
</template>

<script setup lang="ts">
import { reactive, toRef } from 'vue'

let obj = reactive({name:"zhangsan"})
let { name } = obj


function test(){
  name = "张三"
  alert(name)
}


</script>

修改后，成功了，包括obj的数据也变化了

<template>
  <h1>{{ name }}</h1>
  <h1>{{ obj.name }}</h1>
  <button @click="test">修改姓名</button>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'

let obj = reactive({name:"zhangsan"})
let { name } = toRefs(obj)


function test(){
  name.value = "张三"
}


</script>

二、基础指令

v-xxx的指令有很多，这里只介绍一些常用的指令

1.v-if

v-if是条件渲染指令，它根据表达式的true和false来删除和插入元素，它的基本语法如下：v-if=“表达式”

<template>

<h1 v-if="data1">1</h1>
<h1 v-if="data2">2</h1>
<h1 v-if="data3 > 18">成年人</h1>


</template>

<script setup lang="ts">

let data1 = true
let data2 = false
let data3 = 20


</script>

2.v-show

v-show也是条件渲染指令，和v-if指令不同的是，v-show不会删除html元素，而是将它得属性设置为style=“display: none;”

<template>
<h1 v-show="data1">1</h1>
<h1 v-show="data2">2</h1>
<h1 v-show="data3 > 18">成年人</h1>

</template>

<script setup lang="ts">

let data1 = true
let data2 = false
let data3 = 20



</script>

3.v-else

v-else就是v-if得继续。
注意：v-else元素必须立即跟在v-if元素的后面——否则它不能被识别。

<template>
<h1 v-if="data1">data1:true</h1>
<h1 v-else>data1:false</h1>

<h1 v-if="data2">data2: true</h1>
<h1 v-else>data2: false</h1>

</template>

<script setup lang="ts">

let data1 = true
let data2 = false


</script>

4.v-for

4.1 遍历数组

注意： ：key=“index” 尽量带上。主要目的是为了识别每个节点得唯一标识.有了标识就能够更高效，准确得更新虚拟DOM

<template>
    <h3 v-for="(item,index) in arr" :key="index">{{ item }},{{ index }}</h3>
</template>

<script setup lang="ts">

let arr = ["zhangsan","lisi","wangwu"]



</script>

4.2 遍历对象

<template>
    <ul>
        <li  v-for="(value,key,index) in object" :key="index">{{ value }},{{key}}{{index}}</li>
    </ul>
</template>

<script setup lang="ts">

let object = {name: "zhangsan",age:20,gender: "boy"}



</script>

4.3 遍历对象数组

<template>
    <ul>
        <li  v-for="(value,index) in object" :key="index">{{ value.name }}{{index}}</li>
    </ul>
</template>

<script setup lang="ts">

let object = [
    {name: "zhangsan",age:20,gender: "boy"},
    {name: "lisi",age:21,gender: "boy"},
    {name: "wangwu",age:22,gender: "boy"},

]

</script>

5.v-bind

1.v-bind得简写是 “冒号”
2.v-bind 其实就是让标签得属性 绑定一个 变量 而不是 字符串
先看一个实例，a标签绑定得herf属性被识别成了字符串，而不是一个变量

<template>
    <a href="baidu">百度一下</a>
</template>

<script setup lang="ts">

const baidu = "http://www.baidu.com"



</script>

此时就需要使用v-bind进行变量绑定。

<template>
    <a :href="baidu">百度一下</a>
</template>

<script setup lang="ts">

const baidu = "http://www.baidu.com"



</script>

6.v-on

v-on指令用于监听事件，简写为 @

6.1 鼠标点击事件

<template>
    <el-button type="success" v-on:click="send">完整写法</el-button>
    <el-button type="success" @click="send">简写</el-button>

</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';

function send(){
    ElMessage({
        type: "success",
        message: "hello"
    })    
}



</script>

6.2 传值得点击事件

<template>
    <h1>{{ sum }}</h1>
    <el-button type="success" @click="sum1">+1</el-button>
    <el-button type="success" @click="sum10(10)">+10</el-button>

</template>

<script setup lang="ts">
import { ref } from 'vue'

let sum = ref(0)

function sum1() {
    sum.value++
    console.log(sum.value)
}

function sum10(num:number) {
    sum.value+=num
    console.log(sum.value)
}


</script>

7.v-model

数据双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
v-model只收集表单的数据，别的标签不起作用。
完整写法：v-model:value=“text”
简写： v-model=text
这里可以看出v-model是针对input 的value属性进行处理

<template>
    <h1>{{ text }}</h1>
    <input type="text" v-model="text" style="position: absolute;top:100px;">

</template>

<script setup lang="ts">
import {ref} from 'vue'

let text = ref()


</script>

三、计算属性computed

computed的好处就是，被计算的数据发生变化，结果也会发生变化

<template>
<h1>{{ x }}</h1>
<button @click="x++">加1</button>

<h1>{{ y }}</h1>
<button @click="y++">加1</button>

<h1>{{ sum }}</h1>



</template>

<script setup lang="ts">
import {computed, ref,toRef} from 'vue'

let x = ref(1)
let y = ref(2)

#  这里使用computed 方法进行数据的计算
let sum = computed(() => {
  return x.value + y.value
})



</script>

四、watch

1.作用

监视数据的变化

2.特点

vue3中的watch只监控以下四种数据

1 ref定义的数据
2.reactive定义的数据
3.函数返回一个值
4.一个包含上述内容的数组

3.watch-ref数据

注意点：
1.监视的数据(sum)不用写.value
2.回调函数有两个参数，第一个是变化的新值，第二个是变化之前的旧值
3.在回调函数中，可以直接调用watch的返回值来停止watch的监视

<template>
<h1>sum的和是: {{ sum }}</h1>
<button @click="changeSum">sum加1</button>


</template>

<script setup lang="ts">
import { ref,watch } from 'vue'

let sum = ref(0)

function changeSum(){
    sum.value += 1
}

let stopWatch = watch(sum,(newVlue,oldValue) => {
    console.log(newVlue)
    if (newVlue > 10) {
        stopWatch()
    }
})

</script>

4.watch-reactive数据

注意：
1.修改了对象的人一一个值，都可以触发watch
2.newValue,oldValue值是一样的，都是显示修改后的值。

<template>
<h1>姓名: {{ obj.name }}</h1>
<button @click="changename">点我修改姓名</button>

<h1>年龄：{{ obj.age }}</h1>
<button @click="changeage">点我修改年龄</button>


</template>

<script setup lang="ts">
import {  reactive,watch } from 'vue'

let obj = reactive({name: "zhangsan",age: 20})

function changename(){
    obj.name = "张三"
}

function changeage(){
    obj.age++
}


watch(obj,(newValue,oldValue)=>{
    console.log('变化了')
    console.log(newValue,oldValue)

})


</script>

所以监视器可以简写为：回调函数的形参只写一个就可以了

let stop = watch(obj,(newValue)=>{
    if (newValue.age == 30){
        stop()
        console.log('停止监视')

    }
})

5.监视对象某个属性

在4中，监视的是整个对象，如果对象中属性特别多，需要只监控某一个属性。
方法如下：将监控对象的参数 以函数的形式编写。
实例如下：

5.1 监控普通属性

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button>


<h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button>


</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

let persion = reactive({
    name: "zhangsan",
    car:{
        c1: "长城",
        c2: "大众"
    }
})

function changeName(){
    persion.name += "~"
}


function changeC1(){
    persion.car.c1 = '奔驰'

}
function changeC2(){
    persion.car.c2 = '奥迪'

}
function changeAll(){
    persion.car = {c1:"宝马",c2:"丰田"}
}

// 监视普通类型属性
watch(
    ()=> { return persion.name },
    (newValue,oldValue)=>{
        console.log(newValue,oldValue)
})


</script>

5.2 监视对象属性

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button>


<h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button>


</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

let persion = reactive({
    name: "zhangsan",
    car:{
        c1: "长城",
        c2: "大众"
    }
})

function changeName(){
    persion.name += "~"
}


function changeC1(){
    persion.car.c1 = '奔驰'

}
function changeC2(){
    persion.car.c2 = '奥迪'

}
function changeAll(){
    persion.car = {c1:"宝马",c2:"丰田"}
}


// 监视对象类型属性，并且开启深度监视。深度监视的含义就是监视car对象中的每个属性。
// 如果不开启深度监视，只能是car整个对象变化的的时候才能监视到
watch(
    ()=>{return persion.car},
    (newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },
    {deep:true}
)
</script>

6.监听多个属性

监听多个属性，要写成箭头函数数组的形式

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button>


<h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button>


</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

let persion = reactive({
    name: "zhangsan",
    car:{
        c1: "长城",
        c2: "大众"
    }
})

function changeName(){
    persion.name += "~"
}


function changeC1(){
    persion.car.c1 = '奔驰'

}
function changeC2(){
    persion.car.c2 = '奥迪'

}
function changeAll(){
    persion.car = {c1:"宝马",c2:"丰田"}
}


watch(
    // 监听多个属性，要写成箭头函数数组的形式
    [ ()=> persion.name,()=>persion.car.c1 ],
    (newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },
    {deep:true}
)
</script>

五、watchEffect

watcheffect的好处就是，不用指定监视对象，直接编写处理逻辑就可以了，非常的方便

<template>
<h1>sum的和: {{sum}}</h1>
<button @click="sum++">sum加1</button>

</template>

<script setup lang="ts">
import { ref,watchEffect } from 'vue'

let sum = ref(0)

watchEffect(()=>{
    if(sum.value > 10 ){
        console.log("sum是一个大于10的数字") 
    }
})

</script>

六、标签的ref属性

ref属性是能够定位html元素的属性,相当于id或者class定位的作用

<template>
<h1>张三</h1>
<h1 ref="t1">李四</h1>

<button @click="show">查看</button>

</template>



<script setup lang="ts">
import {ref} from 'vue'

let t1 = ref()

function show(){
    console.log(t1.value)
}
</script>

七、组件生命周期

vue3和vue2生命周期略有不同

生命周期函数作用
onBeforeMount()组件挂载到节点上之前执行
onMounted()组件挂载完成后执行
onBeforeUpdate()组件更新之前执行
onUpdated()组件更新完成后执行
onBeforeUnmount()组件卸载之前执行
onUnmounted()组件卸载完成后执行

1.创建test子组件

这里测试onBeforeMount函数

<template>
    <h1>我是test组件</h1>
</template>

<script setup>
import { onBeforeMount,onMounted } from 'vue'

onBeforeMount(()=>{
    console.log("挂载前")
    // 这是开启debug模式，程序到这里就不会在继续运行了
    debugger
})

</script>

2.引入test子组件

在app.vue中引入组件

<template>
    <h1>我是app.vue</h1>
    // 引入test子组件
    <test></test>
</template>

<script setup>
import test from './components/test.vue'



</script>

3.验证结果

发现子组件的的结果没有在app.vue中显示，但是onBeforeMount函数中的输出已经控制台输出了

八、Pinia集中式状态管理库

1.安装

pnpm install pinia

2.引入pinia

在main.ts中引入pinia

import { createPinia } from 'pinia'

const store = createPinia()
app.use(store)

3.创建数据仓库

在src下创建store/“数据文件.ts”。这里用于测试的文件是userInfo.ts

3.1 定义数据

在userinfo.ts文件中定义数据。
definStore，有两个参数，第一个参数式一个key，尽量和文件名保持一致。第二个参数就定义的数据

import { defineStore } from 'pinia'

export const userInfoStore = defineStore('userInfo',{
    state(){
        return {
            sum: 0
        }
    }
})

3.2 引用数据

在app.vue中引用sum

<template>
    // 应用sum
    <h1> {{ use_userInfoStore.sum }} </h1>
    
</template>

<script setup>
import { userInfoStore } from './store/userInfo'

const use_userInfoStore = userInfoStore()


</script>

4.修改数据

4.1 方法1

如果只修改一个值。可以使用这个办法。比较简单

<template>
    <h1> {{ use_userInfoStore.sum }} </h1>
    <button @click="changSum">加1</button>

    
</template>

<script setup>
import { userInfoStore } from './store/userInfo'



const use_userInfoStore = userInfoStore()

function changSum(){
    use_userInfoStore.sum++
}

</script>

4.2 方法2：$patch

如果数据有多个，可以使用以下$patch 方法

<template>
    <h1> {{ use_userInfoStore.sum }} {{ use_userInfoStore.name }} {{ use_userInfoStore.age }}</h1>
    <button @click="changSum">加1</button>

    
</template>

<script setup>
import { userInfoStore } from './store/userInfo'



const use_userInfoStore = userInfoStore()

function changSum(){
    use_userInfoStore.$patch({
        sum:20,
        age: 30,
        name: "张三",

    })

}

</script>

当然使用上边的方法也可以,如下

function changSum(){
    use_userInfoStore.sum++
    use_userInfoStore.age = 30
    use_userInfoStore.name = "张三"

}

5.组合式写法

以上都是选项式写法，组合式写法，在语法上相对来说比较简洁

5.1 定义数据

这里和选项式定义就有了区别，
1.没有了stat和action关键字，直接写逻辑。
2.在函数中不用使用this了


import { defineStore } from 'pinia'
import {ref} from 'vue'


export const userInfoStore = defineStore('userInfo',()=>{
    const sum = ref(0)

    function changeSum(value){
        if (value > 10){
            alert('数字太大了')
        }else{
            sum.value += value
        }
    }


    return {sum,changeSum}
})

5.2 修改数据

<template>
<h1>sum = {{ use_userInfoStore.sum  }}</h1>
<button @click="add1">方式1</button>
<button @click="add2">方式2</button>


</template>


<script setup lang="ts">
import { userInfoStore } from './store/userInfo'

const use_userInfoStore = userInfoStore()

// 方式1：直接修改
function add1(){
    use_userInfoStore.sum += 1
}

// 方式2： 调用pinia中的函数进行修改，对于传入的数据可以进行限制
function add2(){
    use_userInfoStore.changeSum(5)
}

</script>

九、组件通信

1.props

props可以实现 父组件传数据给子组件，也可以子组件给父组件传数据

1.1 父传子

定义子组件
注意： 接收的key 一定要和 父组件传递的key一致。否则接收不到

<template>
    <h1>我是test.vue</h1>

    <!-- 使用接收的数据 -->
    <h1>{{ username }}</h1>
</template>

<script lang="ts">
    export default {
        name:"test"
    }
</script>

<script setup lang="ts">
import { defineProps } from 'vue'

// 这里定义prop_res 是为了打印，如果不接收 打印不了 接收的数据
const prop_res = defineProps(['username'])

// 打印接收的数据
console.log(prop_res.username)

</script>

定义父组件app.vue
注意点：
:username 是一个自定义的key值，并不是一个属性。v-bind决定了传递过去的是一个变量
“username” 是传递过去的变量

<template>
<h1>我是app.vue</h1>

// z这里是给test组件传值。将username变量传给test组件
<test :username="username"></test>
</template>



<script setup lang="ts">
import {ref} from 'vue'
import test   from './components/test.vue'

let username = ref("admin")


</script>

1.2 子传父

子传父的原理 其实还是 在父组件中定义一个函数，然后传递给子组件,子组件调用这个函数 将数据通过这个函数传递给父组件

定义子组件：

<template>
<h1>我是app.vue</h1>
<h1>字组数据为: {{ Fdata }}</h1>

<!-- 将定义好的函数发送给子组件 -->
<test :send_data="send_data"></test>

</template>



<script setup lang="ts">
import test from './components/test.vue'
import {ref} from 'vue'

let Fdata = ref()


// 定义好一个函数，让子组件使用，然后利用这个函数将数据发送给父组件
function send_data(value:string){
    Fdata.value = value

}


</script>

定义子组件

<template>
    <h1>我是test.vue</h1>
    
    <!-- 使用按钮将子组件的数据发送给父组件 -->
    <button @click="send_data(data)">发送数据给父组件</button>

</template>

<script lang="ts">
    export default {
        name:"test"
    }
</script>

<script setup lang="ts">
import { ref,defineProps } from 'vue'

const data = ref('测试数据122211')

// 接收父组件传过来的函数，用于发送数据
defineProps(['send_data'])



</script>

2.provide和inject

这两个是一个组合，专门实现父组件向下 给1一级后多级子组件传递数据

设置父组件

<template>
<h1>我是app.vue</h1>
<hr>
<test></test>

</template>



<script setup lang="ts">
import {ref,provide} from 'vue'
import test from './components/test.vue'

let Fdata = ref(100)

// 将Fdata变量 设置一个自定义key 提供给所有的后代组件使用
provide('d1',Fdata)



</script>

设置子组件

<template>
    <h1>我是test.vue</h1>
    <h1>父组件的数据为：{{ x }}</h1>


</template>

<script lang="ts">
    export default {
        name:"test"
    }
</script>

<script setup lang="ts">
import { inject } from 'vue'

// 引入父组件提供的变量。然后在模板中使用
let x = inject('d1')


</script>

十、插槽

1.默认插槽

1.1 test.vue

slot标签是 “插槽” 标签，是一个占位符，插入的内容会放在此标签出

<template>
 <div class="content">
    <h2>古诗合集</h2>
   <slot>默认内容</slot>
 </div> 

</template>

<style scoped>
.content {
   background-color: green ;
   width: 200px;
   height: 300px;  
}

h2 {
   background-color: orange;
   text-align: center;
   font-weight: 500;
   font-size: 26px;
}
</style>

1.2 app.vue

<template>
<h1>我是app.vue</h1>
<hr>

<div class="outer">
    <!-- 调用组件，并向组件中插入内容 -->
    <test>
        <h5>静夜思</h5>
        <h5>静夜思</h5>
        <h5>静夜思</h5>
        <h5>静夜思</h5>
    </test>
</div>
</template>

<script setup lang="ts">
import test from './components/test.vue'


</script>

<style>
.outer {
    width: 100%;
    height: 300px;
    background-color: #f5f6fa;
    border-radius: 10px;
    box-shadow: 0 0 5px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 20px;
}

</style>

2.具名插槽

2.1 语法

具名插槽的写法有两种：

第一种：这是插槽的语法糖写法

#注意 这里插槽名不要用引用引起来
<template #插槽名>
	插入的内容
</template>

第二种：

#注意 这里插槽名也不要用引用引起来
<template v-slot:插槽名>
	插入的内容
</template>

2.2 test.vue

以下实例中，使用了语法糖的写法

<template>
<h1>我是app.vue</h1>
<hr>


<div class="outer">
    <!-- 调用组件，并向组件中插入内容 -->
    <test>
        <!-- 将数据传递给s2插槽 -->
        <template #s2>
            <h3>张无忌</h3>
        </template>

		 <!-- 将数据传递给s1插槽 -->
        <template #s1>
            <h3>周芷若</h3>
        </template>
    </test>
</div>


</template>

这里特意将传递数据的顺序写法，为了说明 为具名插槽传递数据时，是不受代码顺序影响的

2.2 app.vue

这里有两个具名插槽，分为是名字为s1和s2的插槽

<template>
 <div class="content">
   <h2>古诗合集</h2>
   <slot name="s1"></slot>
   <slot name="s2"></slot>
   
 </div> 
</template>

3.作用域插槽

作用插槽非常重要，因为在element Plus中的表格中会用到。在后台管理系统中，表格是非常重要的功能。

3.1 注意

前边的两种插槽是父组件给子组件传递数据。
而作用域插槽是子组件给父组件传递数据

3.2 test.vue

<template>
 <div class="content">
   <!-- 设置标题得具名插槽 -->
    <h2><slot name="title"></slot></h2>

    <!-- 带有数据得作用域插槽 -->
    <slot name="game" :bb="data2"></slot>
   <slot name="default"  :aa="data1"></slot>
   
   
 </div> 


</template>
<script lang="ts">
   export default {
      name: "test"
   }
</script>
<script setup lang="ts">
const data1 = {
   name:"zhangsan",
   age: 20
}


const data2 = [
   "无间道","倚天屠龙记","天龙八部","连城诀"
]
</script>

<style scoped>
.content {
   background-color: green ;
   width: 200px;
   height: 300px;  
}

h2 {
   background-color: orange;
   text-align: center;
   font-weight: 500;
   font-size: 26px;
}
</style>

3.3 app.vue

<template>
<h1>我是app.vue</h1>
<hr>


<div class="outer">
    <test>
        <!-- 将数据通过插槽插入到子组件当中。 -->
        <template v-slot:title>
            古诗合集
        </template>

        <!-- 接收子组件default插槽传递过来得数据，默认可以不写default,然后根据数据得不通进行不通样式得展示 -->
        <template v-slot="test_data">
            <h3>{{ test_data.aa.name }}</h3>
            <h3>{{ test_data.aa.age }}</h3>
        </template>
    </test>

    <test>
        <!-- 将数据通过插槽插入到子组件当中。 -->
        <template v-slot:title>
            小说合集
        </template>

        <!-- 接收子组件传递过来得game插槽数据，然后进行渲染 -->
        <template v-slot:game="test_data">
            <ul>
                <li v-for="item in test_data.bb" :key="item.indexOf">{{ item  }}</li>
            </ul>
        </template>
    </test>
</div>


</template>



<script setup lang="ts">
import test from './components/test.vue'


</script>

<style>
.outer {
    width: 100%;
    height: 300px;
    background-color: #f5f6fa;
    border-radius: 10px;
    box-shadow: 0 0 5px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 20px;
}

</style>

3.4 语法注意：

接收子组件得数据得时候会用到 “=”.
如果没有指定插槽名，接收得就是插槽名为default得插槽数据.

语法1：
 <template v-slot:插槽名="自定义名称">
	
 </template>
语法2：
 <template #插槽名="自定义名称">
	
 </template>
smile_pbb
关注
  • 23
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue框架基础知识
06-11
本文档包含前端工程化与 webpack、vue基础（指令、组件、计算属性、侦听器、生命周期等）、动态组件 & 插槽 & 自定义指令、路由等知识，范围广泛，基础易懂。 根据你的需求场景，你可以用不同的方式使用 Vue： 无需...
VUE 文档 实例 使用框架
06-10
本文档将深入探讨Vue框架的各个方面，包括其基本概念、安装、使用方式以及一些常见的实例。 1. **Vue基本概念** - **虚拟DOM**：Vue采用虚拟DOM技术，减少不必要的DOM操作，提高性能。 - **MVVM模式**：Vue基于...
vue2 vue3 中指令总结
JackZhouMine
06-14 1288
使用方式vue2 指令定义方式钩子的参数指令钩子和组件生命周期的执行顺序是怎样的？vue3 中的指令定义方式hook vs 指令指令钩子函数和组件生命周期的执行顺序指令和 render 函数指令用在 jsx 上指令和 render 函数一起使用最佳实践其他问题参考小结vue 内置了一些指令，也提供了自定义指令的接口。指令的作用：可把一些可复用的逻辑封装成指令，以实现逻辑复用，尤其是需要直接操作 DOM 时，可把这些操作封装成指令，能极大提高代码复用性和可维护性。指令按照使用范围看，分为全局指令和。
vue快捷键与基础指令详解
08-30
Vue 快捷键与基础指令详解是 Vue框架中非常重要的概念，对于 Vue 开发者来说掌握这些快捷键和基础指令是必备的技能。本文将详细介绍 Vue 快捷键和基础指令的使用方法和实践应用。 一、快捷键 快捷键是 Vue 中的一...
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一、什么是钩子函数？ 钩子函数...
vue基础框架.zip
05-23
Vue.js 是一款流行的前端...这个压缩包是Vue项目的基本结构，包含了开发环境配置、项目配置、依赖管理以及源代码文件，是构建一个Vue应用的基础。结合Element UI和Vuex，可以快速创建功能完备、界面美观的前端应用。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 184
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 979
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 773
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 843
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 151
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 250
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 241
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
轮播图变成响应式数据
最新发布
罗铠威的博客
07-19 77
本篇博客主要记录轮播图变成响应式数据。
React
weixin_45836841的博客
07-15 200
create-react-app（创建项目）：npx create-react-app xxx（xxx 项目名）
javascript之匿名函数和立即执行函数
2301_77451464的博客
07-15 229
/ console.log('函数')// 1. 第一种写法。// 2.第二种写法。
使用html2canvas实现图片或者dom元素的样式展示
m0_64207574的博客
07-16 181
html2canvas的引入有两个，vue或者react或者nuxt都用，npm，pnpm，yarn下载都可以。插入显示方法，用于展示后长按下载的。html或者.vue.tsx模板。然后script要记得引入。
TypeScript 教程(三)：函数与对象类型
cdns_1的博客
07-15 756
在前两章中，我们介绍了 TypeScript 的基础知识，包括安装、配置和基本类型。在本章中，我们将深入探讨函数与对象类型，了解它们的定义与使用，并通过扩展知识点让你有更多的收获。TS 入门(一)：TypeScript 简介与安装TS 入门(二)：Typescript类型与类型注解通过本章的学习，你应该对 TypeScript 中的函数类型和对象类型有了更深入的理解，并掌握了类型别名和接口的使用。
Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
白雾茫茫丶
07-18 816
这篇文章介绍了Swagger，它是一组开源工具，围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具，包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger，展示了安装依赖、定义DTO和控制器等步骤，以及如何使用Swagger装饰器。文章最后总结说，集成Swagger文档可以自动生成和维护API文档，规范API标准化和一致性，但会增加开发者工作量，需要保持注释和装饰器的准确性。
Vue.js入门教程：MVVM框架对比与基础语法
在本文中，作者分享了自己对Vue框架的研究，同时也对比了MVVM领域的其他知名框架，如Knockout.js、React和Angularjs。 首先，作者提到了Knockout.js，它是MVVM模式的早期实践者，通过函数和最短编辑距离算法来同步...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值