網(wǎng)上怎么接單做網(wǎng)站博客
文章目錄
- 1、vite-plugin-inspect
- 2、安裝
- 3、使用
- 4、鏈接
1、vite-plugin-inspect
vite-plugin-inspect
可以讓開發(fā)者在瀏覽器端就可以看到vue文件編譯后的代碼、vue文件的相互依賴關系
2、安裝
npm i -D vite-plugin-inspect
// vite.config.ts
import Inspect from 'vite-plugin-inspect'export default {plugins: [Inspect() // 加上這一行],
}
然后重啟項目,這個時候會有三個地址,最后一個就是這個插件提供的地址
3、使用
<template><div><h3>你好</h3><ul><li v-for="i in 20">{{ i }}</li><li v-for="i in 20"><span v-if="i > 5">顯示</span></li></ul><input type="text" v-model="name" @change="handleNameChange" /></div>
</template><script setup>
import { ref } from "vue";const name = ref("呆呆狗嗎?");const handleNameChange = (e) => {console.log(e.target.value);
};
</script><style scoped></style>
h3 標簽 編輯后的代碼就是
- 先執(zhí)行
_createElementVNode
創(chuàng)建虛擬DOM,第一個參數(shù)就是標簽名稱;第二個參數(shù)是屬性;第三個參數(shù)是 這個標簽的文字,或者是子節(jié)點(如若是子節(jié)點應該是一個數(shù)組) - 然后定義了
_sfc_render
方法,返回一個塊虛擬DOM,第一個參數(shù) h3 的虛擬DOM
v-for 直接循環(huán)20行l(wèi)i。的代碼,編輯后的代碼就是下面這個
也是先創(chuàng)建 ul 的 虛擬DOM,然后 子元素里面是 渲染 li , 用了 文檔片段,里面 包含 li 標簽 20次
4、鏈接
- npm vite-plugin-inspect