vue的template

问题：如何在vue中创建tenplate?因为每写一个vue的html网页都要书写一下模板，甚是麻烦！

方法：解决如何在vue中创建template模板？

1、首先点击左下方的设置，进入用户代码片段

 

 

2、选择在html中创建模板

 

 

 

3、接下来打开的是一个json文件格式的文件。里面的注释就是解释如何来创建属于自己的模板

 

 

 4、一般看不懂，直接删掉里面的注释，留下{}。然后粘贴下面的代码：

"vue_learn_template":{
        "prefix": "vl",
        "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<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src=\"./lib/vue.js\"></script>",     
            "</head>\n",
            "<body>",
            "\t<div id =\"app\"> </div>\n",
            "\t<script>",
            "\t //创建Vue实例,得到 ViewModel",
            "\t var vm = new Vue({",
            "\t\tel: '#app',",
            "\t\tdata: {},",
            "\t\tmethods: {}",
            "\t });",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "vue学习时创建文件的模板" // 模板的描述
    }

 

5、输入我们自定义的触发标志：v1

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

<body>
    <div id ="app"> </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
     });
    </script>
</body>

</html>

注意修改一下自己引入的vue.js的路径，之后以后写代码就不用做重复工作了！是不是感觉很有趣！

 

posted @ 2022-02-15 15:37  starter123  阅读(567)  评论(0)    收藏  举报