Vue重构tyut新闻网项目复盘

目录

组件封装

页面跳转

从后端接口获取数据并显示

时间格式化显示（过滤器）

页面跳转后标题同步显示（监听器）

轮播图

分页按钮

图标库

设置居中容器

子元素在一行排列（左一个，右一个）

子元素在一行排列（左、中、右）

光标悬浮样式

行高

文字加粗

居中显示

文本超出一行省略

内容超出盒子高度自动生成滚动条

取消超链接默认样式

取消无序列表的默认样式

---

组件封装

1、写组件

2、引入组件

3、注册组件

4、使用组件

页面跳转

1、安装依赖：vue-router

2、绑定点击事件

3、编写点击事件（编程式导航）：this.$router.push;

从后端接口获取数据并显示

1、安装依赖：axios

2、写get、post方法

3、引入get、post方法

4、声明vue变量，用来存放获取来的数据

5、写请求函数

6、在声明周期中调用请求函数

7、在页面中显示获取来的数据

时间格式化显示（过滤器）

1、安装依赖：moment

2、写时间格式化函数

3、调用时间格式化函数（xx | 函数名）

页面跳转后标题同步显示（监听器）

1、声明vue变量，用来接收编程式导航传递的参数

2、跳转到的新页面接收编程式导航传递的参数：this.$route.query;

3、写监听器

4、显示监听的数据

轮播图

1、安装依赖：element-ui

2、从官网找代码直接复制

分页按钮

1、安装依赖：element-ui

2、从官网找代码直接复制

3、写handleSizeChange方法

4、写handleCurrentChange方法

5、从后端接口获取属性并显示到分页按钮中

图标库

从iconfont官网找代码直接复制：<i class="el-icon-edit"></i>

设置居中容器

.wrapper{

        width: 75%;

        margin: 0 auto;

}

子元素在一行排列（左一个，右一个）

1、浮动布局

子元素左：float：left;

子元素右：float：right;

父元素：overflow：hidden;

2、伸缩盒布局+浮动布局

父元素：display：flex;        justify-content: space-between;        position: relative;

子元素右：position: absolute;        top: 0;        right: 0;

子元素在一行排列（左、中、右）

三个子元素：float：left;        width：32%;

父元素：overflow：hidden;

光标悬浮样式

标签名：hover{

        background-color: #fff;        //背景色

        color: #003262;        //文字颜色

        cursor: pointer;        //手型样式

}

行高

line-height：3em/;

文字加粗

font-weight: bold;

居中显示

text-align：center;

文本超出一行省略

text-overflow: ellipsis;        white-space: nowrap;        overflow: hidden;

内容超出盒子高度自动生成滚动条

min-height: 500px;        overflow-y:scroll;

取消超链接默认样式

text-decoration: none;

取消无序列表的默认样式

list-style: none;