vue实操

2021-06-29  本文已影响0人  闻乐

1.整理代码快捷键

alt + shift +f 

2.idea快速创建方法快捷键

alt+enter

3.vscode vue snippets

{

    "生成vue模板": {

        "prefix": "vue",

        "body": [

            "<template>",

            "<div></div>",

            "</template>",

            "",

            "<script>",

            "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",

            "//例如:import 《组件名称》 from '《组件路径》'",

            "",

            "export default {",

            "//import引入的组件需要注入到对象中才能使用",

            "components: {},",

            "props: {},",

            "data() {",

            "//这里存放数据",

            "return {};",

            "},",

            "//计算属性 类似于data概念",

            "computed: {},",

            "//监控data中的数据变化",

            "watch: {},",

            "//方法集合",

            "methods: {},",

            "//声明周期 - 创建完成(可以访问当前this实例)",

            "created() {},",

            "//声明周期 - 挂载完成(可以访问DOM元素)",

            "mounted() {},",

            "beforeCreate() {}, //生命周期 - 创建之前",

            "beforeMount() {}, //生命周期 - 挂载之前",

            "beforeUpdate() {}, //生命周期 - 更新之前",

            "updated() {}, //生命周期 - 更新之后",

            "beforeDestroy() {}, //生命周期 - 销毁之前",

            "destroyed() {}, //生命周期 - 销毁完成",

            "activated() {} //如果页面有keep-alive缓存功能,这个函数会触发",

            "};",

            "</script>",

            "<style scoped>",

            "</style>",

        ]

    },

    "生成httpget模板": {

        "prefix": "httpget",

        "body": [

            "this.\\$http({",

            "url: this.\\$http.adornUrl(''),",

            "method: 'get',",

            "params: this.\\$http.adornParams({})",

            "}).then(({data})=>{",

            "})"

        ]

    },

    "生成httppost模板": {

        "prefix": "httppost",

        "body": [

            "this.\\$http({",

            "url: this.\\$http.adornUrl(''),",

            "method: 'post',",

            "data: this.\\$http.adornData(data,false)",

            "}).then(({data})=>{",

            "})"

        ]

    }

}

上一篇下一篇

猜你喜欢

热点阅读