2020-08-22VUE页面结构深度剖析

VUE页面结构深度剖析

VUE页面结构

一个vue页面主要包括3个部分：

   1.
   
   //其中模板只能包含一个父节点，为的简写，是子路由视图，后面的路由页面都显示在此处。
   
   2.
   
   //vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。
   
   3.
   //样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，

重点部分是业务实现

VUE界面展示代码

{{formCustom.userName}} 普通管理员 超级管理员

VUE项目结构

重点在src文件夹：

assets

​ 静态资源，如css，js ，images,video

components

​ 公共组件

router

​ 路由文件，router下的index.js文件中的routes定义了路径为’/'的路由，该路由对应的页面是HelloWorld组件

App.vue

​ 根组件

main.js

​ main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。

​ components: { App }引入根组件App.vue，App即App:App；

​ template: ‘’ 是简写形式，等价于 。

整个页面渲染过程：

访问http://localhost:8080/显示的就是index.html页面，index.html原本只有一个根结点id=“app”。

index.html

main.js入口文件引入根组件App。

main.js

前边已说过，根组件App中，是子路由视图，后面的路由页面都显示在此处，访问http://localhost:8080/，路由为‘/’，根据路由文件index.js，所以引入HelloWorld组件。

main.js中的template: ''在html页面中添加模板，模板内容即为HelloWorld组件内容。

App.vue

router

HelloWorld.vue

最后渲染出的html结构如下：

外链图片转存中…(img-sfherbod-1598079565132)]

index.html

main.js入口文件引入根组件App。

[外链图片转存中…(img-oMJT4i2I-1598079565134)]

main.js

前边已说过，根组件App中，是子路由视图，后面的路由页面都显示在此处，访问http://localhost:8080/，路由为‘/’，根据路由文件index.js，所以引入HelloWorld组件。

main.js中的template: ''在html页面中添加模板，模板内容即为HelloWorld组件内容。

[外链图片转存中…(img-1qZ84bBK-1598079565136)]

App.vue

[外链图片转存中…(img-OppNKDQn-1598079565138)]

router

[外链图片转存中…(img-274w34jZ-1598079565140)]

HelloWorld.vue

最后渲染出的html结构如下：

[外链图片转存中…(img-gBxfBY2P-1598079565140)]