vue页面信息

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>

 

 

 

 

 

posted @ 2020-08-08 11:14  肥龙啃锅盔  阅读(146)  评论(0)    收藏  举报