🖥️ Vue.js专栏:Vue.js 高级语法系列
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、Vue中自定义指令

认识自定义指令

指令的生命周期

指令的参数和修饰符

二、Vue内置组件Teleport

认识Teleport

和组件结合使用

多个teleport

三、Vue内置组件Suspense

异步组件和Suspense

四、Vue中安装插件的方式

认识Vue插件

插件的编写方式

五、Vue中渲染函数的使用

认识h函数

h()函数 如何使用?

h函数的使用过程

六、Vue中编写jsx的语法

jsx的babel配置


一、Vue中自定义指令

认识自定义指令

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

        注:在Vue中,代码的复用和抽象 主要还是通过组件;

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

自定义指令分为两种:

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

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

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

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

JavaScript
// 在template中
<!-- 方式一 默认方法 -->
<!-- <input type="text" ref="inputRef"> -->
<!-- 方式二 封装hooks -->
<!-- <input type="text" ref="inputRef"> -->
//  在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
 <!-- 这里的 james 是参数 .abc.cba是修饰符  -->
<!-- 1 参数 修饰符 值 -->
<!-- <h2 v-Xiong:james.abc.cba="msg">哈哈哈</h2> -->
// ---------------------------------------
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的支持;

        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

Logo

前往低代码交流专区

更多推荐