vue知识点整理

1、vue设置div的背景色

在vue中直接设置背景色是报错的，只能通过nodejs的require方法来引用，具体方法如下：

2、vue中各方法执行顺序

computed是在DOM执行完成后立马执行（如：赋值）
created执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。
mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
methods方法有一定的触发条件，如click等。
watch用于检测vue实例上数据的变动
默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

所有方法都应该在methods里定义，在mounted或created里面使用this调用，用这种方法实现初始化。

3、css属性中position和overflow详解

Position属性很重要,他将控制[浏览器布局引擎(不同的浏览器布局引擎是不一样的)]如何以及在哪里放置元素.，有以下几个值：static，relative，absolute，fixed。

Static(dafault)：静态定位。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

Relative：相对定位。元素将按照静态定位(就是html中写固定的,静态页面时候的位置)时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

如果三个闪电的 css 使用relative 则三幅图像将自上而下排成一竖列 达不到所要的效果

$("#head").animate({left:"-=367px"},1500); 使某元素向左移动367个元素  在1500毫秒时间内

 

Absolute：绝对定位(其实也是相对他父级元素的位置)。元素将按照包含它的元素(eg他的上层的div)的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。Absolute要结合top和left才有其实际的作用,只写Absolute不会改变元素在网页中的位置.

Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理

 

div style="position: relative;">

------------------

 overflow 属性

这个属性定义溢出元素内容区的内容会如何处理  

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。 如 图片 外的div宽度定义小了 图片将会被剪掉
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

4、框架居中

1、可以使用如下代码实现居中，其中必须定义宽度才可以

margin-left: auto;
margin-right: auto;

 2、行内元素span,p等自身无法实现水平居中，因为无法设置宽度，需要包括在块级元素下。

3、文本居中用text-align

5、display显示

inline：行内

block：块级

none：无

6、去掉a链接的下划线

text-decoration:none

7、overflow:hidden的作用

(1)overflow:hidden  溢出隐藏：给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位

(2)overflow:hidden  清除浮动：由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应

(3)、overflow:hidden  解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷

8、v-bind:src可以缩写成 :src