vscode生成自己的代码片段

最新推荐文章于 2024-09-12 11:00:56 发布

前端段

最新推荐文章于 2024-09-12 11:00:56 发布

阅读量303

点赞数

分类专栏：项目总结

本文链接：https://blog.csdn.net/hkduan/article/details/115231854

版权

项目总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vscode生成自己的代码片段
第一步：
在这里插入图片描述
第二步：
新建，取个名字

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. 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": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }

    "Html5-Vue": {
        "prefix": "vh",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">\n",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src=\"./lib/vue.min.js\"></script>",
            "</head>\n",
            "<body>",
            "\t<div id=\"app\">$1</div>\n",
            "\t<script>",
            "\t\tvar vm = new Vue({",
            "\t\t\tel: '#app',",
            "\t\t\tdata: {},",
            "\t\t\tmethods: {}",
            "\t\t});",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "快速创建在html5编写的vue模板"
    }

}

!+tab通用的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

vue空的new模板

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <div @click="addmsg">点击加2{{fooObj.foo}}</div>
    <child>
        <!-- 作用域插槽必须是template开头且结尾 -->
        <template slot-scope="props">
           <li v-html="props.value ===2? '<strong style=\'color:red;\'>2</strong>':props.value" ></li>
        </template>
    </child>
</div>
<script type="text/javascript">
    Vue.component("child", {
        data: function() {
            return {
                list: [1, 2, 3, 4, 5, 6]
            }
        },
        inject:['newFoo'],
        mounted(){
            console.log('newFoo', this.newFoo)
        },
        methods:{
            addmsg(){
                this.newFoo.foo --
                console.log(this.newFoo.foo)
            }
        },
        template: `<div>
                        <ul>
                            <li v-for="item of list">{{item}}</li>
                            
                        </ul>
                        -------
                            <div @click="addmsg">addmsg{{newFoo.foo}}</div>
                        <ul>
                            //这种方式的作用是：显示什么，怎么显示不再是子组件决定了，而是父组件调子组件的时候给子组件传递模版:
                            <slot v-for="item of list" :value=item></slot>
                        </ul>
                    </div>`
    });

    var vm = new Vue({
        el: "#root",
        data(){
            return{
                fooObj:{
                    foo:5
                }
            }
        },
        methods:{
            addmsg(){
                this.fooObj.foo ++
                console.log(this.fooObj.foo)
            }
        },
        provide() {
            return {
                newFoo: this.fooObj
            }
        }
    })
</script>
</body>
</html>