【vue2.0学习】杂记（CSS居中⽅式、template三种写法、组件基础）CSS中基础的居中⽅式
块中⽂字⽔平居中
text-align ⽤于块级元素，作⽤在使⽤它的块元素中的⽂字或者图⽚上，使得它们在⽔平⽅向上居中。
块元素⾃⾝⽔平居中(确定设置了宽度的块)
⼀般情况下，可以设置margin:0 auto;，这会使这个块级元素在它的⽗级元素中居中，上下左右都会居中。
如果只要⽔平居中的话，就设置margin-left:auto; margin-right:auto;
块元素⾃⾝⽔平居中(不确定宽度的块)
如果块元素的⼦元素也为块元素，就对⼦元素使⽤margin auto⼀类的⽅式就好啦，也可以⽤display设置为inline然后再⽤text-align；
如果块级元素的⼦元素为⾏内元素，就⽤我们⼀开始介绍的text-align也就可以解决。
vertical-align⽤于⾏内元素中的垂直居中
vertical-align这个属性⽤于:
1. 内联元素(以及被转化为内联元素的块元素)
2. display设置为table-cell的元素
3. 这样的元素
注意：设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性
块级元素中的⽂字图⽚垂直居中
设置height的⾼度与line-height的⾼度相同!
<div ></div>
块级元素⾃⾝的垂直居中
设置块级元素⾃⾝在⽗元素中的垂直居中，可以参照块级元素的⽔平居中的⽅法(上⾯说过)，设置外边距即可。如果不想设置⽔平居中，只要设置上下外边距为auto就好。
也可以采⽤vertical-align:middle；的⽅式，但是前提是把display设置为table-cell。
今天才发现⾃⼰上次组件基础部分根本就没读完，我真是个⽠⽪，我说怎么⽂档都看完了，但是还是不明⽩，哈哈哈，原来真正原因都在这。。。。
再吐槽⼀句，这个JS的⼤括号看得我⼼烦= =
vue中template的三种写法
写法⼀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
css设置文字垂直居中<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:`
<h1 >第⼀种写法</h1>
`
})
</script>
</html>
利⽤“（反斜号）的⽅式来实现，适合于写⽐较少的内容量
写法⼆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<template id="template">
<h1>我是模板的第⼆种写法</h1>
</template>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>
最常见的写法
利⽤template标签来实现内容的填充，最终通过id或者其他的选择器挂载到template上⾯如果⽤vue-cli，它的模板应该如下⾯的代码所⽰：
<template>
<!-- 页⾯的内容 -->
</template>
<script>
/* 页⾯的js */
</script>
<style scoped>
/* 页⾯的样式
注意:scoped的作⽤是style中所有的样式只对本页的html起作⽤
*/
</style>
⽅法三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="x-template"id="template">
<h2>我是模板的第三种写法</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>
这种写法是改变了script中的type：变为type=”x-template”，并且给它id，最终挂载到template中就可以了使⽤于内容⽐较多或有公共的模板

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。