vue制作官网所遇问题总结

新手第一次写项目遇到很多问题，在这里总结一下，方便下次查找和改善

1. 给盒子右边加上小段边框，如图：

• 使用背景渐变：background:linear-gradient(to bottom,#dd2926,#a82724) no-repeat right / 1px 20px;

2. 去除body上的margin外边距

//App.vue 添加代码
<style lang="scss">
body{
    margin: 0;
    padding: 0;
}
#app {...}
</style>

3. span标签内如何添加空格和换行？

• span标签加css样式：white-space: pre-wrap;
• 或者使用两个span标签，在中间加上 <br />
• 或者直接使用v-html

white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit 
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) 
pre: 保持HTML源代码的空格与换行,等同与pre标签 
nowrap: 强制文本在一行,除非遇到br换行标签 
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 
inherit: 继承 
初始值: normal

4. 实现两边不同的背景颜色

• background: linear-gradient(90deg, #EAEBEE 50%, #FFF 50%);

5. 路由跳转动态传参,并在跳转页面接收传入参数

• 使用字符串拼接的方式传入动态参数<router-link :to="'../news?sort='+item.sort+'&&id='+item.id">
• 在跳转页面接收参数

data() {
	return {
            sort: this.$route.query.sort,
            id: this.$route.query.id,
	}
}

6. 路由跳转后自动回到顶部

• 在页面的create什么钩子中加入代码：window.scrollTo(0,0);

7. 需要在span标签中使用灵活换行等，可以直接使用V-html。如：<div v-html="List.text"></div>

• 可以在List中直接定义“<br/>”标签