web学习笔记（五十九）
shan33__ 2024-07-16 13:03:04 阅读 68
目录
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文件不生效，如果不加这个关键字默认是全局生效的。
<code> <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则是统一的。
<code><template>
<div class="less">code>
<p @click="setCount">count: { { count }}</p>code>
<p @click="changeArr">{ { arr }}</p>code>
<p @click="changeLives">{ { lives }}</p>code>
<div>
<a href="#">百度一下</a>code>
</div>
<main>
<div>123</div>
</main>
</div>
</template>
<style lang="scss" scoped>code>
$fontsize: 26px;
.less {
width: 100vw;
height: 100px;
background-color: red;
div {
//.less div{} 表示.less后代的所以div的样式
background-color: yellow;
}
> div {
background-color: aqua;
> a {
//.less >div>a
font-size: $fontsize;
}
}
p {
font-size: $fontsize;
}
}
</style>
1.3 less和 sass两者的区别
sass的功能比less强大，更像是一个独立的编程语言，我们之前学过的前端框架Bootstrap 4 就是基于 Sass 开发的。Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。在定义变量时Less和Sass中的唯一区别就是Less用@，Sass用$。
2. 计算属性computed
计算属性特点：
需要根据某一个或多个响应式数据的变化，计算得出一个新的结果(可以是样式对象，也可以是一个值)，供组件模板使用； 计算属性必须返回一个结果；计算属性会自动监测到函数内部响应式数据的变化，根据新的响应数据，重新计算结果。 computed内部如果存在多个响应式数据，任何一个发生变化，计算属性仍然会重新计算。
<template>
<div>
<button @click="isshow = true">显示</button>code>
<div :class="{ test: true, active: isshow }" :style="newStyle">测试div</div>code>
<div @click="isshow = false" v-show="isshow" class="fixed"></div>code>
</div>
</template>
<style lang="less" scoped>code>
.active {
font-size: 30px;
color: blue !important;
}
.test {
width: 100vw;
height: 200px;
background-color: red;
color: yellow;
}
.fixed {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(100, 100, 190, 0.5);
left: 0;
top: 0;
}
</style>
<script>
import { ref, computed } from "vue";
export default {
setup() {
const isshow = ref(false);
const newStyle = computed(() => {
if (isshow.value) {
return {
fontSize: "40px",
color: "blue",
textAlgin: "center"
};
} else {
return {
fontSize: "16px",
color: "yellow",
textAlgin: "left"
};
}
});
return {
isshow,
newStyle
};
}
};
</script>
3. 响应式基础reactive()
reactive:组合式API，只能声明引用类型数据。数组和对象,不太适用于请求，请求推荐使用ref，通过修改ref.value来修改内部的值。
Proxy 代理对象类型，通过它实现深度响应式
<script setup>
import { ref, reactive } from "vue";
import http from "@/utlis/http";
const count = ref(0);
const setCount = () => {
count.value++;
};
// reactive:组合式API，只能声明引用类型数据。数组和对象,不太适用于请求，请求推荐使用ref，通过修改ref.value来修改内部的值。
const arr = reactive([1, 2, 3, 4, [100, 200]]); //元素增删改都具备响应式。
console.log(arr); //Proxy 代理对象类型，通过它实现深度响应式
// const arr = reactive([1, 2, 3, 4, [100, 200]]);
const changeArr = () => {
arr[0] = 100;
// arr.push(100);
arr[4][1] = 300;
};
// let lives = reactive([]);
let lives = reactive({list:[]});
const changeLives = () => {
lives.list[0].roomName = "测试";
};
const {
data: { list }
} = await http("/hgapi/live/cate/newRecList?offset=0&cate2=wzry&limit=5");
// console.log(list);
lives.list = list;
console.log(lives); //此时lives是普通数组，不是Proxy
</script>
4. 什么是MVVM?
MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化 和 视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。