vue知识点整理

最新推荐文章于 2022-08-02 11:36:56 发布

会飞的鱼儿android

最新推荐文章于 2022-08-02 11:36:56 发布

阅读量468

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/f552126367/article/details/104517566

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、vue设置div的背景色

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

<div class="person-info_div" :style="memberWrap">

<script>
  export default{
    data(){
      return{
        memberWrap:{
          backgroundImage: "url(" + require("../../assets/images/bg.png") + ")",
          backgroundRepeat:"no-repeat",
          backgroundPosition:"center",
          backgroundSize: "100%",
        }
      }
    }
  }
</script>

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;">

</div>

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

overflow 属性

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

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