Vue | Vue.js 高级语法系列

这篇具有很好参考价值的文章主要介绍了Vue | Vue.js 高级语法系列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🖥️ 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的功能

import { h } from 'vue,教你16天学会Vue,vue.js,javascript,前端,前端框架,es6

和组件结合使用

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

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

import { h } from 'vue,教你16天学会Vue,vue.js,javascript,前端,前端框架,es6 

多个teleport

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

import { h } from 'vue,教你16天学会Vue,vue.js,javascript,前端,前端框架,es6 

三、Vue内置组件Suspense

异步组件和Suspense

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

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

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

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

(一般用于异步组件)

import { h } from 'vue,教你16天学会Vue,vue.js,javascript,前端,前端框架,es6 

四、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'})
]

图解(一)

import { h } from 'vue,教你16天学会Vue,vue.js,javascript,前端,前端框架,es6 

注意事项:

        如果 没有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文章来源地址https://www.toymoban.com/news/detail-813158.html

到了这里,关于Vue | Vue.js 高级语法系列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • setup语法糖报错 vue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module:

    当直接将setup写在script标签上 会报错 vue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module: 这是setup语法糖导致的错误,此时就老老实实按照vue3原本的写法export default{xxxxxx}即可解决 vue3中setup语法糖写法: 原始正常写法: 改成原始写法后就不报错了!!!看来还是不能偷

    2024年02月12日
    浏览(29)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(34)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(117)
  • 前端系列-Vue3基本语法

    # 插值操作 1、插值:{{}} 2、指令:v-     在{{}}和v-指令进行数据绑定时,支持js单个表达式     p v-once{{msg}}/p 数据只第一次时显示,不响应式     p v-pre{{msg}}/p 内容原封不动的展示     p v-text=\\\'msg\\\'/p 相当于插值表达式的功能     p v-html=\\\'title\\\'/p 可以解析标签     # 绑定属

    2024年02月09日
    浏览(39)
  • vue系列(三)——手把手教你搭建一个vue3管理后台基础模板

    目录 一、前言: 二、网站页面分析 三、开发步骤 (一)、安装element (二)、安装使用svg插件 (三)、编写主界面框架代码  (四)、编写菜单栏  (五)、新建页面及路由 (六)、定制页面标签栏 第一步: 第二步: (七)、修改封装菜单栏 (八)、添加面包屑 四、结

    2023年04月24日
    浏览(45)
  • 前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by

    主要原因是由于用到的组件进行npm i时默认使用的是vue2,不支持vue3,但是前端框架使用的是vue3,所以导致重构编码时会报错, 网上查询说         当我们在使用rollup编译es6时,可能会遇到以下报错问题,需要 安装@rollup/plugin-commonjs插件 npm install @rollup/plugin-commonjs 最后,

    2024年02月05日
    浏览(51)
  • Module的语法, JS中的 export 和 import

    在ES6之前, 社区制定了一些模块加载方案, 最主要的有CommonJS和AMD两种. 前者用于服务器,后者, 用于浏览器 ES6模块的 设计思想是尽量静态化, 使得编译时就能确定模块的依赖关系 ES6模块不是对象, 而是 通过export命令显示指定输出的代码,再通过import命令输入. 上面代码的实质是从

    2024年02月02日
    浏览(34)
  • vue项目报错:Module build failed (from ./node_modules/vue-loader/index.js)

    运行项目报错 Module build failed (from ./node_modules/vue-loader/index.js):TypeError: Cannot read properties of undefined (reading ‘vue’) 解决方法:提高vue-loader版本 参考===

    2024年02月17日
    浏览(36)
  • 【Vue.js】使用Element中的Mock.js搭建首页导航&左侧菜单---【超高级教学】

          Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的 JavaScript 库。模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 总结来说,Element中的Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的库。它可以帮助

    2024年02月07日
    浏览(31)
  • Vue3报错:Module build failed (from ./node_modules/vue-loader/dist/index.js):TypeError:

    Module build failed (from ./node_modules/vue-loader/dist/index.js):TypeError: Cannot read properties of null (reading \\\'content\\\') 翻译:模块构建失败(from ./node_modules/vue-loader/dist/index.js):TypeError:无法读取null属性(读取\\\'content\\\')  模组报错,多半因为重复声明组件报错,

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包