如何给网站做外部优化,怎么优化一个网站,网络营销产品策略,软文案例短篇目录 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表示样式作用域#xff0c;把内部的样式仅限于当前组件模板生效#xff0c;其…目录 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标签内部进行引用时使用的是 langscss,而less则是统一的。
templatediv classlessp clicksetCountcount: {{ count }}/pp clickchangeArr{{ arr }}/pp clickchangeLives{{ lives }}/pdiva href#百度一下/a/divmaindiv123/div/main/div
/template
style langscss scoped
$fontsize: 26px;
.less {width: 100vw;height: 100px;background-color: red;div {//.less div{} 表示.less后代的所以div的样式background-color: yellow;} div {background-color: aqua; a {//.less divafont-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内部如果存在多个响应式数据任何一个发生变化计算属性仍然会重新计算。 templatedivbutton clickisshow true显示/buttondiv :class{ test: true, active: isshow } :stylenewStyle测试div/divdiv clickisshow false v-showisshow classfixed/div/div/templatestyle langless scoped.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;}/stylescriptimport { 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?offset0cate2wzrylimit5);
// 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。
