vue页面书写顺序
<template> <!-- html模板 --> <div class="a-class"> <div class="b-class"> <div class="c-class">vue页面书写规范</div> </div> </div> </template> <script> /* 模块系统 */ import a from "./module/a.vue"; import moment from "momnet"; export default { // 页面组件名称 name: "MyComponentName", // 引用组件 components: {}, //接收来自父组件的数据。可以为数组形式,也可以为对象形式 props: [], //Vue 实例的数据对象 data() { return {}; }, // 计算属性 computed: {}, //侦听属性 watch: {}, //Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用 mixins: [], //在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 beforeCreated() {}, //在实例创建完成后被立即调用.然而,挂载阶段还没开始,$el 属性目前不可见。 created() {}, //在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用 beforeMount() {}, //el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。//如果希望子组件也挂载完毕可以用vm.$nextTick mounted() {}, //数据更新时调用,发生在虚拟 DOM 打补丁之前 //该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。 beforeUpdate() {}, //当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。 //该钩子在服务器端渲染期间不被调用。 updated() {}, //keep-alive 组件激活时调用。 //该钩子在服务器端渲染期间不被调用。 activated() {}, //keep-alive 组件停用时调用。 deactivated() {}, //实例销毁之前调用。在这一步,实例仍然完全可用。 beforeDestroy() {}, //Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定, //所有的事件监听器会被移除,所有的子实例也会被销毁。 destroyed() {}, //当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数: //错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。 //此钩子可以返回 false 以阻止该错误继续向上传播。 errorCaptured() {}, // Vue 实例方法 methods: {}, }; </script> <style lang="scss" scoped> /* 页面样式 */ .a-class { .b-class { .c-class { } } } .a-class { } .b-class { } .c-class { } </style>