🖥️ Vue.js专栏：Vue.js 收款定制开发高级语法系列
🧑‍💼 个人简介：收款定制开发一个不甘平庸的平凡人🍬

✨ 个人主页：

🍀 格言: ☀️ 收款定制开发路漫漫其修远兮,收款定制开发吾将上下而求索☀️

👉 收款定制开发你的一键三连是我更新收款定制开发的最大动力❤️

一、Vue收款定制开发中自定义指令

收款定制开发认识自定义指令

在Vue收款定制开发的模板语法中收款定制开发我们学了很多指令收款定制开发除了这些指令 Vue收款定制开发也允许我们自己定义自己的指令

注:在Vue中,收款定制开发代码的复用和抽象收款定制开发主要还是通过组件;

收款定制开发通常在某些情况下,你需要对DOM收款定制开发元素进行底层操作,这个时候就会用到自定义指令

自定义指令分为两种:

自定义局部指令: 组件中通过 directives选项只能在当前组件中使用

自定义全局指令: app的 directive方法可以在任意组件中使用

当我们来做一个非常简单的案例:当某个元素挂载完成后可以自动获取焦点

实现方式一:使用默认的实现方式

JavaScript
// 在template中




// 在setup中

// 方式一: 默认方法拿到焦点但是在很多的时候就需要写很多
// import { onMounted, ref } from 'vue';
// const inputRef = ref()
// onMounted(()=>{
//   inputRef.value?.focus()
// })

// 方式二封装 hooks
import useInput from './hooks/useInput'
const { inputRef } = useInput()
// 方式一跟方式二都是定义ref 绑定到input中调用focus

// 封装的hooks中
import { onMounted, ref } from 'vue';
export default function useInput() {
    const inputRef = ref()
    onMounted(() => {
        inputRef.value?.focus()
    })

    return { inputRef }
}

实现方式二:自定义一个 v-focus的局部指令;

这个自定义指令非常简单,我们只需要在组件选项中使用directives即可

它是一个对象,在对象中编写我们的自定义指令的名称(这里不需要加v-)

有一个生命周期,是在组件挂载后调用的mounted 我们可以在其中完成操作

JavaScript
// Options API中
<script>
  export default {
    directives:{
      focus:{
      // 生命周期函数(自定义指令)
        mounted(el){
          el.focus()
        }
      }
    }
  }
</script>

// 在setup当中
// 必须以 v 加大写字母开头的自定义名称
const vFocus = {
  mounted(el) {
    el.focus()
  }
}

实现方式三:自定义一个 v-focus的全局指令

JavaScript
// 全局自定义指令
app.directive('focus',{
    mounted(el) {
        el.focus()
    }
})

指令的生命周期

指令定义的对象,Vue提供了以下的钩子函数:

Created: 绑定的元素attribute 或事件监听器被应用之前调用

beforeMount: 当指令第一次绑定到元素并且在挂载父组件之前调用

Mounted: 在绑定元素的父组件被挂载后调用

beforeUpdate:在更新包含组件的VNode之前调用

Updated: 包含组件的VNode及其子组件的VNode更新后调用

beforeUnmount:在卸载绑定元素的父组件前调用

unmounted:当指令与元素解绑且父组件已卸载时,只调用一次

指令的参数和修饰符

如果我们指令需要接受一些参数或修饰符呢?

james是参数的名称 abc,cba是修饰符的名称后面是传入的值

在我们的生命周期中,可以通过 bindings获取到对应的内容:

JavaScript



// ---------------------------------------
const vXiong = {
  mounted(el, bindings) {
    // console.log(bindings) // 是一个对象
    // el.textContent = 'xxx'
    el.textContent = bindings.value
  }
}

二、Vue内置组件Teleport

认识Teleport

在组件化开发中,封装一个组件A 在另外一个组件B中使用:

那么组件A中的template元素,会被挂载到组件B中template的某个位置;

最终应用程序会形成一颗 DOM树结构

但在一些情况下,希望 组件不是挂载在这个组件树上的,可能是移动到Vue app之外的其他位置:

如:移动到body元素上.或者我们有其他的div#app之外的元素上,

这个时候我们就可以通过teleport来完成;

Teleport是什么?

他是一个 Vue提供的内置组件类似于react的Portals

teleport翻译过来是心灵传输,远距离运输的意思

它有两个属性:

To: 指定将其中的内容移动到目标元素,可以使用选择器

disabled:是否禁用teleport的功能

和组件结合使用

teleport也可以和组件结合一起来使用:

当我们在teleport中使用组件,并且也可以给他传入一些数据

多个teleport

如果我们将多个teleport应用到同一个目标上(to的值相同) 那么这些目标会进行合并

三、Vue内置组件Suspense

异步组件和Suspense

注:目前(2022年10月9日)Suspense显示的是一个实验性的特性,API随时可能会修改

Suspense是一个内置的全局组件,该组件有两个插槽:

default:如果default可以显示,那么显示default的内容

fallback:如果default无法显示,那么就会显示fallback插槽的内容;

(一般用于异步组件)

四、Vue中安装插件的方式

认识Vue插件

通常我们向Vue全局添加一些功能时会采用插件的模式,它有两种编写模式:

对象类型:一个对象必须包含一个install的函数,该函数会在安装插件时执行

函数类型:一个function 这个函数会在安装插件时自动执行

JavaScript
// 方式一 : 传入对象的情况
app.use({
    install:function(app) {
        // app.component()......
        console.log("传入对象的install被执行:",app)
    }
})

JavaScript
// 方式二 : 传入函数的情况
app.use(function(app) {
console.log("传入的函数直接被执行:",app)
})

插件可以完成的功能没有限制,如下面几种都可以:

添加全局方法或 property 通过把它们添加到config.globalProperties上实现

添加全局资源:指令/过滤器/过渡等

通过全局mixin 来添加一些组件选项

一个库,提供自己的API 同时提供上面提到的一个或多个功能

插件的编写方式

对象类型的写法

JavaScript
export default {
    name:"xXiong",
    install(app,options) {
        console.log("插件被安装:",app,options)
        console.log(this.name)
    }
}

函数类型的写法

JavaScript
export default function(app,options) {
console.log("插件被安装:",app,options)
}

五、Vue中渲染函数的使用

认识h函数

Vue推荐在大多数情况下使用模版来创建你的HTML 然后一些特殊的场景,你真的需要Js的完全编程能力,这个时候你可以使用 渲染函数 它比 模版更接近编译器

Vue在生成真实DOM之前会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM(VDOM)

事实上,之前编写的template中的HTML 最终也是使用渲染函数生成对应的VNode

那么如果你想充分利用Js的编程能力,可以自己来写createVNode函数,生成对应的VNode

使用h()函数:

h()函数是一个用于创建vnode的一个函数;

其实更准确的命名是createVNode()函数,但是为了简便在Vue将之简化为 h()函数

h()函数如何使用?

h()函数如何使用? => 他接受三个参数:

JavaScript
// {Sting | Object | Function} tag
// 一个HTML 标签名一个组件一个异步组件或一个函数式组件
// 必须的
'div',

JavaScript
// {Object} props
// 与attribute prop 和事件相对应的事件
// 我们会在模版中使用
//
// 可选
{},

JavaScript
// {String | Array | Object} children
// 子VNodes 使用h() 构建
// 或使用字符串获取 '文本 VNode' 或有插槽的对象
//
// 可选
[
    'Some text comes first',
    h('h1','A headline'),
    h(MyComponent,{someProp:'foobar'})
]

图解(一)

注意事项:

如果没有props 那么通常可以将children作为第二个参数传入;

如果产生歧义,可以将 null作为第二个参数传入,将children作为第三个参数传入

h函数的使用过程

h函数可以在两个地方使用:

render函数选项中;

setup函数选项中(setup本身需要是一个函数类型,函数再返回h函数创建的新VNode)

JavaScript
import { h } from 'vue';

export default {
    render() {
        // h传递3个参数 (标签名) ({ 对应的属性 }) (内容)
        // 如果有子标签的话就在第三个参数里写对象
        // 写一个计数器案例
        return h("div", { class: "app" }, [
            h("h2", null, `当前计数:${this.counter}`),
            h("button", { onClick: this.increment }, "+1"),
            h("button", { onClick: this.decrement }, "-1"),
            // 渲染组件
            h(Home)
        ])
    }
}

JavaScript
// setup中
import { h, ref } from 'vue';
import Home from './Home.vue'

export default {
    // 在setup函数
    setup() {
        const counter = ref(0)

        const increment = () => {
            counter.value++
        }
        const decrement = () => {
            counter.value--
        }

        return () => h("div", { class: "app" }, [
            h("h2", null, `当前计数:${counter.value}`),
            h("button", { onClick: increment }, "+1"),
            h("button", { onClick: decrement }, "-1"),
            // 渲染组件
            h(Home)
        ])

    }
}

六、Vue中编写jsx的语法

jsx的babel配置

如果我们希望在项目中使用jsx,需要添加对jsx的支持;

通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的)

对于Vue来说,我们只需要在Babel中配置对应的插件即可

安装Babel支持Vue的jsx插件:

JavaScript
npm install @vue/babel-plugin-jsx -D

在 babel.config.js配置文件中配置插件:

JavaScript
module.exports = {
presets:['@vue/cli-plugin-babel/preset'],
plugins:['@vue/babel-plugin-jsx']
}

如果是Vite环境,需要安装插件:

JavaScript
npm install @vitejs/plugin-vue-jsx -D

收款定制开发Vue | Vue.js 高级语法系列