首页 > Web开发 > 详细

Vue-Html 模板and代码片段

时间:2021-03-17 10:00:24      阅读:46      评论:0      收藏:0      [点我收藏+]

一、模板

<!--
* @description 参数1
* @fileName v-bind-class-array
* @author userName
* @date 2021-03-17 08:43:03
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<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>v-bind-class-array</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app"><h2>{{message}}</h2></div>

    <script>
        var vm = new Vue({
            el: #app,
            data() {
                return {
                    message:Hello Vue
                }
            },
            created(){ // 实例被创建之后执行代码

            },
            computed: { // 计算属性

            },
            components: { // 组件的引用

            },
            methods: { // 方法

            },
            mounted()    { // 页面进入时加载内容

            },
            watch: { // 监测变化

            }
        });

    </script>
</body>

</html>

二、代码片段-vscode设置(左下角小齿轮)-用户代码片段-新建全局

{
  "Html5-Vue": {
    //模板名称
    "prefix": "hv", //触发条件
    "body": [
      //内容
      "<!--",
      "* @description ${1:参数1}",
      "* @fileName ${TM_FILENAME_BASE}",
      "* @author userName",
      "* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      "* @version V1.0.0",
      "!-->",
      "<!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>${TM_FILENAME_BASE}</title>",
      "\t<script src=\"./vue.js\"></script>",
      "</head>\n",
      "<body>",
      "\t<div id=\"app\"><h2>{{message}}</h2></div>\n",
      "\t<script>",
      "\t\tvar vm = new Vue({",
      "\t\t\tel: ‘#app‘,",
      "\t\t\tdata() {",
      "\t\t\t\treturn {",
      "\t\t\t\t\tmessage:‘Hello Vue‘",
      "\t\t\t\t}",
      "\t\t\t},",
      "\t\t\tcreated(){ // 实例被创建之后执行代码",
      "",
      "\t\t\t},",
      "\t\t\tcomputed: { // 计算属性",
      "",
      "\t\t\t},",
      "\t\t\tcomponents: { // 组件的引用",
      "",
      "\t\t\t},",
      "\t\t\tmethods: { // 方法",
      "",
      "\t\t\t},",
      "\t\t\tmounted()\t{ // 页面进入时加载内容",
      "",
      "\t\t\t},",
      "\t\t\twatch: { // 监测变化",
      "",
      "\t\t\t}",
      "\t\t});",
      "",
      "\t</script>",
      "</body>\n",
      "</html>"
    ],
    "description": "快速创建在html5编写的vue模板" //描述
  }
}

 

Vue-Html 模板and代码片段

原文:https://www.cnblogs.com/ABC-wangyuhan/p/14547228.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!