Vue所有信息
1 <!-- 2 3 功能：功能描述 4 5 作者：肥龙啃锅盔 6 7 邮箱：1769811019@qq.com 8 9 时间：2020年08月08日 11:12:59 10 11 版本：v1.0 12 13 修改记录： 14 15 修改内容： 16 17 修改人员： 18 19 修改时间： 20 21 -->
页面主体：
1 2 <template> 3 <div> 4 <!-- 功能描述 --> 5 6 <!-- 功能描述 --> 7 </div> 8 9 </template>
js部分：
1 <script> 2 3 export default { 4 5 // 组件名称 6 7 name: 'demo', 8 9 // 组件参数 接收来自父组件的数据 10 11 props: {}, 12 13 // 局部注册的组件 14 15 components: {}, 16 17 // 组件状态值 18 19 data () { 20 21 return {} 22 23 }, 24 25 // 计算属性 26 27 computed: {}, 28 29 // 侦听器 30 31 watch: {}, 32 33 // 组件方法 34 35 methods: {}, 36 37 // 以下是生命周期钩子 注：没用到的钩子请自行删除 38 39 /** 40 41 * 在实例初始化之后，组件属性计算之前，如data属性等 42 43 */ 44 45 beforeCreate () { 46 47 }, 48 49 /** 50 51 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在 52 53 */ 54 55 created () { 56 57 }, 58 59 /** 60 61 * 在挂载开始之前被调用：相关的 render 函数首次被调用。 62 63 */ 64 65 beforeMount () { 66 67 }, 68 69 /** 70 71 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。 72 73 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。 74 75 */ 76 77 mounted () { 78 79 }, 80 81 /** 82 83 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 84 85 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 86 87 */ 88 89 beforeUpdate () { 90 91 }, 92 93 /** 94 95 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 96 97 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 98 99 */ 100 101 updated () { 102 103 }, 104 105 /** 106 107 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效 108 109 */ 110 111 activated () { 112 113 }, 114 115 /** 116 117 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效 118 119 */ 120 121 deactivated () { 122 123 }, 124 125 /** 126 127 * 实例销毁之前调用。在这一步，实例仍然完全可用。 128 129 */ 130 131 beforeDestroy () { 132 133 }, 134 135 /** 136 137 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定， 138 139 * 所有的事件监听器会被移除，所有的子实例也会被销毁。 140 141 */ 142 143 destroyed () { 144 145 } 146 147 } 148 149 </script>
样式部分：
1 <!-- Add "scoped" attribute to limit CSS to this component only --> 2 3 <!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，--> 4 5 <!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，--> 6 7 <!--这么设计的目的是父组件可以对子组件根元素进行布局。--> 8 9 <style lang='less' scoped> 10 11 12 13 </style>