Vue | Vue.js 高級(jí)語(yǔ)法系列

這篇具有很好參考價(jià)值的文章主要介紹了Vue | Vue.js 高級(jí)語(yǔ)法系列。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

??? Vue.js專欄：Vue.js 高級(jí)語(yǔ)法系列
????? 個(gè)人簡(jiǎn)介：一個(gè)不甘平庸的平凡人??

? 個(gè)人主頁(yè)：CoderHing的個(gè)人主頁(yè)

?? 格言: ?? 路漫漫其修遠(yuǎn)兮,吾將上下而求索??

?? 你的一鍵三連是我更新的最大動(dòng)力??

一、Vue中自定義指令

認(rèn)識(shí)自定義指令

指令的生命周期

指令的參數(shù)和修飾符

二、Vue內(nèi)置組件Teleport

認(rèn)識(shí)Teleport

和組件結(jié)合使用

多個(gè)teleport

三、Vue內(nèi)置組件Suspense

異步組件和Suspense

四、Vue中安裝插件的方式

認(rèn)識(shí)Vue插件

插件的編寫(xiě)方式

五、Vue中渲染函數(shù)的使用

認(rèn)識(shí)h函數(shù)

h()函數(shù) 如何使用?

h函數(shù)的使用過(guò)程

六、Vue中編寫(xiě)jsx的語(yǔ)法

jsx的babel配置

一、Vue中自定義指令

認(rèn)識(shí)自定義指令

在Vue的模板語(yǔ)法中我們學(xué)了很多指令除了這些指令 Vue也允許我們自己定義自己的指令

????????注:在Vue中,代碼的復(fù)用和抽象主要還是通過(guò)組件;

????????通常在某些情況下,你需要對(duì)DOM元素進(jìn)行底層操作,這個(gè)時(shí)候就會(huì)用到自定義指令

自定義指令分為兩種:

????????自定義局部指令: 組件中通過(guò) directives選項(xiàng)?只能在當(dāng)前組件中使用

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

當(dāng)我們來(lái)做一個(gè)非常簡(jiǎn)單的案例:當(dāng)某個(gè)元素掛載完成后可以自動(dòng)獲取焦點(diǎn)

????????實(shí)現(xiàn)方式一:使用默認(rèn)的實(shí)現(xiàn)方式

JavaScript
// 在template中




// ?在setup中

// 方式一: 默認(rèn)方法拿到焦點(diǎn) ?但是在很多的時(shí)候就需要寫(xiě)很多
// import { onMounted, ref } from 'vue';
// const inputRef = ref()
// onMounted(()=>{
// ??inputRef.value?.focus()
// })

// 方式二封裝 hooks
import useInput from './hooks/useInput'
const { inputRef } = useInput()
// 方式一跟方式二都是定義ref 綁定到input中調(diào)用focus

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

????return { inputRef }
}

實(shí)現(xiàn)方式二:自定義一個(gè) v-focus的局部指令;

????????這個(gè)自定義指令非常簡(jiǎn)單,我們只需要在組件選項(xiàng)中使用directives即可

????????它是一個(gè)對(duì)象,在對(duì)象中編寫(xiě)我們的自定義指令的名稱(這里不需要加v-)

????????自定義指令有一個(gè)生命周期,是在組件掛載后調(diào)用的mounted?我們可以在其中完成操作

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

// 在setup當(dāng)中
// 必須以 v 加大寫(xiě)字母開(kāi)頭的自定義名稱
const vFocus = {
??mounted(el) {
????el.focus()
??}
}

實(shí)現(xiàn)方式三:自定義一個(gè) v-focus的全局指令

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

指令的生命周期

指令定義的對(duì)象,Vue提供了以下的鉤子函數(shù):

????????Created: 綁定的元素attribute 或事件監(jiān)聽(tīng)器被應(yīng)用之前調(diào)用

????????beforeMount: 當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用

????????Mounted: 在綁定元素的父組件被掛載后調(diào)用

????????beforeUpdate:在更新包含組件的VNode之前調(diào)用

????????Updated: 包含組件的VNode及其子組件的VNode更新后調(diào)用

????????beforeUnmount:在卸載綁定元素的父組件前調(diào)用

????????unmounted:當(dāng)指令與元素解綁且父組件已卸載時(shí),只調(diào)用一次

指令的參數(shù)和修飾符

如果我們指令需要接受一些參數(shù)或修飾符呢?

????????james是參數(shù)的名稱 ?abc,cba是修飾符的名稱后面是傳入的值

在我們的生命周期中,可以通過(guò) bindings獲取到對(duì)應(yīng)的內(nèi)容:

JavaScript
?


// ---------------------------------------
const vXiong = {
??mounted(el, bindings) {
????// console.log(bindings) // 是一個(gè)對(duì)象
????// el.textContent = 'xxx'
????el.textContent = bindings.value
??}
}

二、Vue內(nèi)置組件Teleport

認(rèn)識(shí)Teleport

在組件化開(kāi)發(fā)中,封裝一個(gè)組件A 在另外一個(gè)組件B中使用:

????????那么?組件A中的template元素,會(huì)被掛載到組件B中template的某個(gè)位置;

????????最終應(yīng)用程序會(huì)形成一顆 DOM樹(shù)結(jié)構(gòu)

但在一些情況下,希望 組件不是掛載在這個(gè)組件樹(shù)上的,可能是移動(dòng)到Vue app之外的其他位置:

????????如:移動(dòng)到body元素上.或者我們有其他的div#app之外的元素上,

????????這個(gè)時(shí)候我們就可以通過(guò)teleport來(lái)完成;

Teleport是什么?

????????他是一個(gè) Vue提供的內(nèi)置組件?類似于react的Portals

????????teleport翻譯過(guò)來(lái)是心靈傳輸,遠(yuǎn)距離運(yùn)輸?shù)囊馑?/p>

????????????????它有兩個(gè)屬性:

????????????????To: 指定將其中的內(nèi)容移動(dòng)到目標(biāo)元素,可以使用選擇器

????????????????disabled:是否禁用teleport的功能

import { h } from 'vue,教你16天學(xué)會(huì)Vue,vue.js,javascript,前端,前端框架,es6

和組件結(jié)合使用

teleport也可以和組件結(jié)合一起來(lái)使用:

????????當(dāng)我們在teleport中使用組件,并且也可以給他傳入一些數(shù)據(jù)?

import { h } from 'vue,教你16天學(xué)會(huì)Vue,vue.js,javascript,前端,前端框架,es6 ?

多個(gè)teleport

????????如果我們將多個(gè)teleport應(yīng)用到同一個(gè)目標(biāo)上(to的值相同) 那么這些目標(biāo)會(huì)進(jìn)行合并

import { h } from 'vue,教你16天學(xué)會(huì)Vue,vue.js,javascript,前端,前端框架,es6 ?

三、Vue內(nèi)置組件Suspense

異步組件和Suspense

注:目前(2022年10月9日)Suspense顯示的是一個(gè)實(shí)驗(yàn)性的特性,API隨時(shí)可能會(huì)修改

Suspense是一個(gè)內(nèi)置的全局組件,該組件有兩個(gè)插槽:

????????default:如果default可以顯示,那么顯示default的內(nèi)容

????????fallback:如果default無(wú)法顯示,那么就會(huì)顯示fallback插槽的內(nèi)容;

(一般用于異步組件)

import { h } from 'vue,教你16天學(xué)會(huì)Vue,vue.js,javascript,前端,前端框架,es6 ?

四、Vue中安裝插件的方式

認(rèn)識(shí)Vue插件

通常我們向Vue全局添加一些功能時(shí) 會(huì)采用插件的模式,它有兩種編寫(xiě)模式:

????????對(duì)象類型:一個(gè)對(duì)象?必須包含一個(gè)install的函數(shù),該函數(shù)會(huì)在安裝插件時(shí)執(zhí)行

????????函數(shù)類型:一個(gè)function 這個(gè)函數(shù)會(huì)在安裝插件時(shí) 自動(dòng)執(zhí)行

JavaScript
// 方式一 : 傳入對(duì)象的情況
app.use({
????install:function(app) {
????????// app.component()......
????????console.log("傳入對(duì)象的install被執(zhí)行:",app)
????}
})

JavaScript
// 方式二 : 傳入函數(shù)的情況
app.use(function(app) {
????console.log("傳入的函數(shù)直接被執(zhí)行:",app)
})

插件可以完成的功能沒(méi)有限制,如下面幾種都可以:

????????添加全局方法或 property 通過(guò)把它們添加到config.globalProperties上實(shí)現(xiàn)

????????添加全局資源:指令/過(guò)濾器/過(guò)渡等

????????通過(guò) 全局mixin?來(lái)添加一些組件選項(xiàng)

????????一個(gè)庫(kù),提供自己的API 同時(shí) 提供上面提到的一個(gè)或多個(gè)功能

插件的編寫(xiě)方式

對(duì)象類型的寫(xiě)法

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

函數(shù)類型的寫(xiě)法

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

五、Vue中渲染函數(shù)的使用

認(rèn)識(shí)h函數(shù)

Vue推薦在大多數(shù)情況下使用模版來(lái)創(chuàng)建你的HTML 然后一些特殊的場(chǎng)景,你真的需要Js的完全編程能力,這個(gè)時(shí)候你可以使用 渲染函數(shù)?它比 模版更接近編譯器

????????Vue在生成真實(shí)DOM之前會(huì)將我們的節(jié)點(diǎn)轉(zhuǎn)換成VNode,而VNode組合在一起形成一顆樹(shù)結(jié)構(gòu),就是虛擬DOM(VDOM)

????????事實(shí)上,之前編寫(xiě)的template中的HTML 最終也是?使用渲染函數(shù) 生成?對(duì)應(yīng)的VNode

????????那么如果你想充分利用Js的編程能力,可以自己來(lái)寫(xiě)createVNode函數(shù),生成對(duì)應(yīng)的VNode

使用h()函數(shù):

????????h()函數(shù) 是一個(gè)用于創(chuàng)建vnode的一個(gè)函數(shù);

????????其實(shí)更準(zhǔn)確的命名是createVNode()函數(shù),但是為了簡(jiǎn)便在Vue將之簡(jiǎn)化為 h()函數(shù)

h()函數(shù) 如何使用?

h()函數(shù) 如何使用? => 他接受三個(gè)參數(shù):

JavaScript
// {Sting | Object | Function} tag
// 一個(gè)HTML 標(biāo)簽名一個(gè)組件一個(gè)異步組件或一個(gè)函數(shù)式組件
// 必須的
'div',

JavaScript
// {Object} props
// 與attribute ?prop 和事件相對(duì)應(yīng)的事件
// 我們會(huì)在模版中使用
//
// 可選
{},

JavaScript
// {String | Array | Object} children
// 子VNodes 使用h() 構(gòu)建
// 或使用字符串獲取 '文本 VNode' 或有插槽的對(duì)象
//
// 可選
[
????'Some text comes first',
????h('h1','A headline'),
????h(MyComponent,{someProp:'foobar'})
]

圖解(一)

import { h } from 'vue,教你16天學(xué)會(huì)Vue,vue.js,javascript,前端,前端框架,es6 ?

注意事項(xiàng):

????????如果沒(méi)有props?那么通?？梢?span style="color:#d83931;">?將children作為第二個(gè)參數(shù)傳入;

????????如果產(chǎn)生歧義,可以將 null作為第二個(gè)參數(shù)傳入,將children作為第三個(gè)參數(shù)傳入

h函數(shù)的使用過(guò)程

h函數(shù)可以在兩個(gè)地方使用:

????????render函數(shù)選項(xiàng)中;

????????setup函數(shù)選項(xiàng)中(setup本身需要是一個(gè)函數(shù)類型,函數(shù)再返回h函數(shù)創(chuàng)建的新VNode)

JavaScript
import { h } from 'vue';

export default {
????render() {
????????// h傳遞3個(gè)參數(shù) ?(標(biāo)簽名) ({ 對(duì)應(yīng)的屬性 }) ?(內(nèi)容)
????????// 如果有子標(biāo)簽的話就在第三個(gè)參數(shù)里寫(xiě)對(duì)象
????????// 寫(xiě)一個(gè)計(jì)數(shù)器案例
????????return h("div", { class: "app" }, [
????????????h("h2", null, `當(dāng)前計(jì)數(shù):${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函數(shù)
????setup() {
????????const counter = ref(0)

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

????????return () => h("div", { class: "app" }, [
????????????h("h2", null, `當(dāng)前計(jì)數(shù):${counter.value}`),
????????????h("button", { onClick: increment }, "+1"),
????????????h("button", { onClick: decrement }, "-1"),
????????????// 渲染組件
????????????h(Home)
????????])

????}
}

六、Vue中編寫(xiě)jsx的語(yǔ)法

jsx的babel配置

如果我們希望在項(xiàng)目中使用jsx,需要添加對(duì)jsx的支持;

????????jsx通常會(huì)通過(guò)Babel來(lái)進(jìn)行轉(zhuǎn)換(React編寫(xiě)的jsx就是通過(guò)babel轉(zhuǎn)換的)

????????對(duì)于Vue來(lái)說(shuō),我們只需要在Babel中配置對(duì)應(yīng)的插件即可

安裝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環(huán)境,需要安裝插件:

JavaScript
npm install @vitejs/plugin-vue-jsx -D文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-813158.html

到了這里，關(guān)于Vue | Vue.js 高級(jí)語(yǔ)法系列的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

Vue | Vue.js 高級(jí)語(yǔ)法系列