【vue 2.0 学习】杂记（CSS居中方式、template三种写法、组件基础）

补漏洞。。。。。漏洞还好大

alicelmx

15787人浏览 · 2018-08-17 11:01:06

alicelmx · 2018-08-17 11:01:06 发布

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 style="line-height:500px;height:500;"></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>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:`
<h1 style="color:red">第一种写法</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中就可以了

使用于内容比较多或有公共的模板

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^