web学习笔记（五十九）

目录

1.style样式

1.1作用域 scoped

1.2 less和 sass

1.3  less和 sass两者的区别

2.  计算属性computed

3. 响应式基础reactive()

4.  什么是MVVM?

---

1.style样式

1.1作用域 scoped

scoped表示样式作用域，把内部的样式仅限于当前组件模板生效，其他的vue文件不生效，如果不加这个关键字默认是全局生效的。

 <style  scoped>
.redu {
  position: absolute;
  top: -1vh;
  right: 0px;
}
.div3{
    width: 100%;
    position: absolute;
    top:3vh;
    left: 0px;
}
</style>

1.2 less和 sass

这两个都是css的辅助工具，使用这个辅助工具在style标签内部用嵌套的方式来编写样式。通过选择器的嵌套来表示标签之间的层级关系。在使用这个两个工具时都需要在终端使用npm i来下载对应的文件，需要注意的是：sass在下载时用的是npm i sass命令，但在style标签内部进行引用时使用的是 lang="scss",而less则是统一的。

<template>
  <div class="less">
    <p @click="setCount">count: {
  { count }}</p>
    <p @click="changeArr">{
  { arr }}</p>
    <p @click="changeLives">{
  { lives }}</p>
    <div>
      <a href="#">百度一下</a>
    </div>
    <main>
      <div>123</div>
    </main>
  </div>
</template>
<style lang="scss" scoped>
$fontsize: 26px;
.less {
  width: 100vw;