vue 页面代码片段

最新推荐文章于 2025-07-16 10:35:12 发布

原创最新推荐文章于 2025-07-16 10:35:12 发布 · 932 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

模板专栏收录该内容

3 篇文章

订阅专栏

本文提供新手教程，介绍了如何通过新建全局代码片段创建Vue组件模板，并对比了Vue组件和Pug模板的使用方法。涵盖了组件名、数据绑定、计算属性、监听器、方法定义等关键部分。

新建用户代码片段:

文件 ==> 首选项 ==> 用户代码 ==> 新建全局代码片段

即可按自己的想法生成模板

常用代码片段:

{
  "Print to console": {
  "prefix": "vuec",
  "body": [
  "<template>",
  "  <div class=''>\n",
  "  </div>",
  "</template>\n",
  "<script>",
  "export default {",
  "  name: '',",
  "  data () {",
  "    return {\n",
  "    }",
  "  },",
  "  watch: {\n",
  "  },",
  "  props: {",
  "  },",
  "  components: {\n",
  "  },",
  "  computed: {\n",
  "  },",
  "  mounted() {\n",
  "  },",
  "  methods: {\n",
  "  },",
  "  filters: {\n",
  "  }",
  "}",
  "</script>\n",
  "<style scoped lang='scss'>\n",
  "</style>"
  ],
}
}

文字说明:

name：组件名字
props：组件接收父组件传值
components：使用子组件时，注册子组件。
data：所有全局属性存放的位置。双向绑定的数据。
computed：计算属性，其中放函数，每一个函数都有返回值，使用计算属性时，只需要使用函数名字即可，不写括号。
watch：监听器。监听属性值的变化。
methods：函数存放的位置，可以是事件触发的函数，也可以是被其他函数调用的函数。methods之中的函数可以相互调用，不过要加thiwenwen

pug 模板代码片段:

{
    "Print to console": {
        "prefix": "pug",
        "body": [
            "<template lang="pug">,
            " div()\n",
            "</template>"
            "<script>",
            " export default {",
            "   name: '',",
            "   props: {",
            "   },",
            "   components: {\n",
            "   },",
            "   data () {",
            "     return {\n",
            "     }",
            "   },",
            "   methods: {\n",
            "   },",
            "   mounted() {\n",
            "   },",
            "   watch: {\n",
            "   },",
            "   computed: {\n",
            "   },",
            "   filters: {\n",
            "   }",
            " }",
            "</script>\n",
            "<style scoped lang='scss'>\n",
            "</style>"
        ],
	}
}

说明:

安装:

# common install
npm install pug
 
# install for hexo blog
npm install hexo-renderer-pug --save

语法:

pug不同于html，前者不需要标签的开和闭，如html的

Demo

，在pug使用p Demo即可。

缩进:

pug对空格敏感，有点类似python对制表符tab敏感。pug使用空格作为缩进符，当然用soft tab也可行。同一级标签需保证左对齐。

div
    p Hello, world!
    p Hello, pug.

注释:

pug使用//-或//对代码进行注释，前者注释内容不出现在渲染后的html文件中，后者反之

属性 :

pug将标签属性存放于括号()内，多个属性之间以逗号或空格分隔。此外，对于标签的id和class，pug使用#紧跟标签id,使用.紧跟标签class，可以同时设置多个class。

h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")

-------------------------------------------------

<h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">