一键快速生成 Vue 的 HTML页面结构代码
目錄
- 1. 創(chuàng)建配置文件
- 2. 使用
- 3. 配置說明
- 4. 注意
VS Code除了使用 !+Tab 在html文件中快速創(chuàng)建html結(jié)構(gòu)代碼之外，還可以自己定義代碼段，這里分享如下在 Vue 環(huán)境下快速通過成 html 結(jié)構(gòu)。
1. 創(chuàng)建配置文件
第一步
文件 ==> 首選項(xiàng) ==>用戶代碼片段
第二步
搜索框中輸入html （如果需要在別的類型的文件中可以輸入對應(yīng)的名字，如：vue.json)，
然后回車，進(jìn)入配置窗口。
第三步： 輸入以下代碼（可根據(jù)自己的需求修改）
{ "Html5-Vue": {"prefix": "vh","body": ["<!DOCTYPE html>","<html lang=\"en\">","","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","\t<title>Document</title>","</head>","","<body>","\t<div id=\"app\"> ","\t\t<template>","\t\t\t<hl>{{title}}$0</hl>","\t\t</template>","\t</div>","","\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>","","\t<script>","\t\tvar vm = new Vue({","\t\t\tel: '#app', //綁定到DOM上","\t\t\tdata() {","\t\t\t\treturn {","\t\t\t\t\ta: 3,","\t\t\t\t}","\t\t\t},","\t\t\t//監(jiān)聽data中的數(shù)據(jù)變化","\t\t\twatch: {","","\t\t\t},","\t\t\t//方法集合","\t\t\tmethods: {\n","\t\t\t},","\t\t\t//計(jì)算屬性-以函數(shù)形式聲明，但不接受參數(shù),它的this指向Vue實(shí)例","\t\t\tcomputed: {","\t\t\t\tnum() {","\t\t\t\t\treturn this.a * 2 + 2","\t\t\t\t},","\t\t\t},","\t\t\t//生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實(shí)例）","\t\t\tcreated() {","","\t\t\t},","\t\t\t//實(shí)例初始化之后，數(shù)據(jù)觀測和事件綁定之前","\t\t\tbeforeCreate(){},\n","\t\t\t//實(shí)例初始化完成，掛載尚未開始時(shí)","\t\t\tcreated() {","\t\t\t\tconsole.log('created');","\t\t\t},","\t\t\t//生命周期 - 掛載之前，render 函數(shù)首次被調(diào)用時(shí)","\t\t\tbeforeMount(){},\n","\t\t\t//生命周期 - 掛載完成（可以訪問DOM元素）","\t\t\tmounted: {","","\t\t\t},","\t\t\t//生命周期 - 數(shù)據(jù)更新時(shí)，在虛擬DOM狀態(tài)變化之前","\t\t\tbeforeUpdate(){},\n","\t\t\t//生命周期 - 虛擬DOM被重新渲染之后","\t\t\tupdated(){},\n","\t\t\t//生命周期 - 實(shí)例銷毀之前，此時(shí)實(shí)例依然可用","\t\t\tbeforeDestroy(){},\n","\t\t\t//生命周期 - 銷毀完成，此時(shí)Vue 實(shí)例及其子實(shí)例將完全解綁","\t\t\tdestroyed(){},\n","\t\t\t//如果頁面有keep-alive緩存功能，這個(gè)函數(shù)會(huì)觸發(fā)","\t\t\tactivated(){},\n","\t\t})","\t</script>","</body>","", "</html>"],"description": "快速創(chuàng)建在 html5 編寫的 vue 模板"} }如下圖所示：
第四步 ：ctrl + s 保存文件
2. 使用
在新建的 html 文件中輸入自己先前定義好的快捷指令名稱并按下 Tab（或回車鍵，本例中的名稱是 vh ）
自動(dòng)生成的效果，如下圖：
3. 配置說明
“Print to console”：這個(gè)可以自定義。就是在鍵入代碼時(shí)，代碼提示窗口中出現(xiàn)在右側(cè)的指令名稱，如下圖所示，本例中是“Html5-Vue”，你可以任意名稱命名。
“prefix”：快捷指令標(biāo)簽。定義好名稱后，后面在新建文件時(shí)鍵入它并按下Tab鍵或回車鍵后，預(yù)定義的結(jié)構(gòu)就能瞬間生成。
“body”：你想生成的結(jié)構(gòu)內(nèi)容；
$0、$1、$2、$3……，結(jié)構(gòu)生成后的光標(biāo)定位。
當(dāng)快捷生成結(jié)構(gòu)后，光標(biāo)所在的位置，當(dāng)然肯定是在1位置。即我們定義結(jié)構(gòu)后有些地方是要修改或者增加內(nèi)容，有了上面的定義，直接TAB鍵，就會(huì)依次準(zhǔn)備定位到了該位置。神速……
\t 、\n：是轉(zhuǎn)義字符。\t 是橫向跳i到下一制表符位置（這里用于代碼縮進(jìn)控制），\n 是回車換行。
4. 注意
配置文件中，以下幾點(diǎn)請注意：
如果不這樣，就會(huì)報(bào)錯(cuò)！
總結(jié)
以上是生活随笔為你收集整理的一键快速生成 Vue 的 HTML页面结构代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： docker-compose命令介绍和使
- 下一篇： 小程序开发(2)-之app.js、app