vue的一些不常用知识点

使用vite创建vue3项目：

npm init vite@latest myvue3 --template vue

v-bind绑定属性，可以动态的绑定标签属性： 

<span v-bind:[attributeName]="attr" ></span>

...

data(){
    return{
        attributeName:'id',
        attr:'d1'
    }
},

@动态绑定事件：

<span @[mouseEvent]="event" ></span>

...

data(){
    return{
        mouseEvent:'mouseenter',
    }
},
methods:{
    event(){}    
}

class的绑定方式，可以控制多个样式：

<div :class="classObj"></div>
...
<style scoped>
    .active{
        color:red;
    }
    .hello{
        font-size:16px
    }
</style>
...
data(){
    return {
        classObj:{
            active:true,
            hello:true
        },
    }
}

数组的形式（不常用）： 

<div :class="[activeClass,errorClass]"></div>
...
data(){
    return {
        classObj:{
            activeClass:'active',
            errorClass:'text-danger'
        },
    }
}
...
<style scoped>
.active{
      background-color: purple;
      width:100px;
      height: 100px;
}
.errorClass{
  color: red;
}
</style>

style的绑定方式（类似class用法）：

<div :stle="[styleObj,{fontSize:'16px'}]"></div>
...
data(){
    return {
        styleObj:{
            bgColor:"pink"
        },
    }
}

v-if支持在template中使用 ，v-show不支持。

v-for不仅可以循环遍历数组，还可以遍历对象：

<div v-for="(name,value,index) in obj" :key="index"></div>

数组push方法可以添加多个元素：

arr.push(7,8,9)

数组splice，三个参数，第一个为删除的起始下标，第二个是删除几个元素，之后的参数，可以替换被删除的参数。

arr.splice(1,2,7,8,9) //从下标1开始删除2个元素，并将7,8,9插入删除的部分

多事件处理，可以传入多个方法 绑定多个函数逗号分隔，且要加调用的括号：

<div @click="addCounter(5),addAge()"></div>

v-model原理：v-bind单向绑定数据，@input修改变量，实现双向绑定

v-model修饰符：

<input type='text' v-model.trim="msg"/> //去除表单里的前后空格
<input type='text' v-model.number="msg"/> //将表单的数据转为number类型
<input type='text' v-model.lazy="msg"/> //表单的数据失去焦点时才触发改值的操作

注册全局组件：

Vue.component("demo1", {
  template: "<h3>just do it</h3>",
});

 具名插槽的写法：

<slot name="test" >默认内容</slot> //如果不传东西则可以设置默认内容

<template v-slot:test></template> //v-slot只能写在template上




<slot name="test" :list="list"></slot> //传值

<template v-slot:test="slotProps">{{slotProps.list}}</template> //slotProps就是传来的值

 provider和inject，传递响应式：

provider(){
    return {
        obj:this.obj, //通过浅拷贝达到响应式
        message:()=>this.message //用函数的形式返回一个响应式数据
    }
}

inject:["obj","message"] //这里message不再是变量而是函数，使用时要加小括号，调用函数，可配合计算属性使用