当前位置:首页 > vue > 正文内容

vscode使用vue代码模板

xi4年前 (2022-02-27)vue1450

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车
2、复制下面代码并保存。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=''></div>",
            "</template>",
            "",
            "<script>",
            "import xxx from './xxx';",
            "",
            "export default {",
            "  //父组件通过 props 向下传递数据给子组件",
            "  props:{},",
            "  //import引入的组件需要注入此处能使用",
            "  components: {},",
            "  //此处存放数据",
            "  data() {",
            "    return {};",
            "  },",
            "  //计算属性",
            "  computed: {},",
            "  //监听data中数据变化",
            "  watch: {},",
            "  //方法集合",
            "  methods: {},",
            "  created() {}, //生命周期 - 创建完成",
            "  mounted() {}, //生命周期 - 挂载完成",
            "  beforeCreate() {}, //生命周期 - 创建之前",
            "  beforeMount() {}, //生命周期 - 挂载之前",
            "  beforeUpdate() {}, //生命周期 - 更新之前",
            "  updated() {}, //生命周期 - 更新之后",
            "  beforeDestroy() {}, //生命周期 - 销毁之前",
            "  destroyed() {}, //生命周期 - 销毁完成",
            "  activated() {}, //若页面有keep-alive缓存,此函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

3、新建vue文件后直接输入vue按下回车:

扫描二维码推送至手机访问。

版权声明:本文由曦的博客发布,如需转载请注明出处。

本文链接:http://xiblogs.top:1111/?id=20

“vscode使用vue代码模板” 的相关文章

vue组件间传值

父传子利用props传值,子组件中规定props数据类型,然后父组件使用子组件时需要绑定数据在子组件上:父组件: <template> <div class="parents-div"> <!--绑定msg传入子组件-->...

vue中按需引入Element-ui

vue中按需引入Element-ui

安装1、安装element-ui:npm i element-ui -S。2、安装babel-plugin-component:npm install babel-plugin-component -D。 修改1、在项目根目录下新建.babelrc文件:2、在.babelrc中写入: {...

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

vue+xlsx实现表格的导入导出

vue+xlsx实现表格的导入导出

前言前端在开发过程中若是管理系统之类的业务系统,则大多都会涉及到表格的处理,其中最为常见的就是表格的导入导出。有很多办法都可以实现,其中最简单的还是使用插件xlsx。 实现目标1、对表格数据进行增加、删除。2、表格数据的导出、导入。 具体逻辑增加、删除功能比较简单,直接利用vue数据的响应式即可...

DataV兼容vue3的方法

DataV兼容vue3的方法

发现问题在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV(http://datav.jiaminghi.com/ ),不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升级项目到vue3时,发现一堆报错,后面查了下,好像是DataV不兼容vue3,而vue3版本的Dat...

数据看板可视化

数据看板可视化

前言这段时间一直在做可视化,在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单,我将其单独抽离出来形成一个demo,为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接:https://xiblogs.top/original/bigScreen/29/in...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。