新建用户代码片段:
文件 ==> 首选项 ==> 用户代码 ==> 新建全局代码片段
即可按自己的想法生成模板
常用代码片段:
{
"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">