Vue学习笔记12--自定义代码片段

自定义代码片段操作步骤：

第一步：文件==》首选项==》配置用户代码片段==》新建全局代码片段==》输入自定义文件名称

第一步：设置(鼠标左键)==》用户代码片段==》新建全局代码片段==》输入自定义文件名称

第二步：选择“新建全局代码片段文件，然后输入文件名称

第三步：自定义代码片段

----------------------------------自定义代码片段重点说明信息如下所示：----------------------------------

"Print to console：代码片段的名称，不同代码片段需要不同，在快捷输入中可以看到

scope：表示这个代码片段使用的语言，多种用,分隔，如果不写表示全部适用

prefix：表示快捷输入的字符串，输入的内容出现提示

body：生成代码的主体，具体在后续讲解

description：描述
---------------------------------------------------------------------------------------------------------------------------

示例如下所示：

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
 
    // 自定义 script 动态生成代码片段
 
    "myscript": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "myscript",
     "body": [
      "<script type=\"text/javascript\">",
 
      "",
      "</script>",
     ],
     "description": "自定义script"
   },
 
     "myVue": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "myVue",
     "body": [
            "//console.log(vm)"
      "const vm = new Vue({",
      "el: '#root',",
            "data: {",
                    "",
            "},"
            "",
            "methods: {"
                "methodOne() {",
                    "alert('事件触发成功！')"
                "},"
                "",
                "methodTwo(event, str) {",
                    "alert('事件触发成功！' + str)"
                "},"
                "},"
      "})",
     ],
     "description": "自定义script"
   }
}

效果如下所示：

以下为自定义代码片段(多片段之间使用逗号分开)

mydiv

"mydiv": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "mydiv",
     "body": [
      "<div id=\"root\">",
 
      "",
      "</div>",
     ],
     "description": "自定义script"
   },

自定义input、button

"mybutton": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "mybutton",
     "body": [
      "<button @click=\"method\">查询</button>",
      "",
     ],
     "description": "自定义 button"
   },
 
    "mytextoneway": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "mytextoneway",
     "body": [
      "<input type=\"text\" v-bind:value=\"nickname\">",
      "",
     ],
     "description": "自定义 input text"
   },
     "mytexttwoway": {
    //  "scope": "javascript,typescript,vue", //注释表示所有文件中可用
     "prefix": "mytexttwoway",
     "body": [
      "<input type=\"text\" v-model:value=\"nickname\">",
            "",
     ],
     "description": "自定义 input text"
   },