vue computed
计算属性
computed和methods的区别
计算属性有缓存,数据没变就直接用原先的计算结果,不用再调用
方法没缓存,用一次掉一次
vue2和vue3 computed的写法区别
Vue3里计算属性变成了一种方法,用箭头函数来写
123let fullName = computed(()=>{ return person.firstName + '-' + person.lastName })
需要写set()让计算属性的值可被直接修改,能直接改fullname.value,不然是只读的,只能改firstname.value和lastname.value来重新调用计算属性的方法重新计算fullname
12345678910let fullName = computed({ get(){ return person.firstName + '-' + person.lastName }, set(value)& ...
vue torefs和toref
torefs和toref区别
torefs是直接把整个对象的属性换成ref,
toref是只换一个,需要多一个参数,需要转换的属性
torefs的作用重新定义一下reactive对象里的属性,变成ref对象,因为在外面需要用person.age太烦,定义后,可以直接用age或重新起个名像nl,更加方便。
123456789101112131415161718192021222324252627282930<template> <div class="person"> <h2>姓名:{{person.name}}</h2> <h2>年龄:{{person.age}}</h2> <h2>性别:{{person.gender}}</h2> <button @click="changeName">修改 ...
rem和em
rem和em都是CSS中用于定义字体大小的相对单位,但它们在计算基准和适用场景上有所不同。以下是rem和em的区别:
rem和em的区别
计算基准不同。
rem是相对于根元素(即html元素)的字体大小来计算的。例如,如果html元素的字体大小设置为16px,那么1rem就等于16px,2rem则等于32px;
em是相对于其父元素的字体大小来计算的。如果父元素的字体大小为16px,那么1em就等于16px,2em则等于32px。
适用场景不同。
rem通常用于设置字体大小,也可以用于设置元素的其他尺寸属性,如宽度和高度,适合于垂直继承的场景,特别是在响应式设计中,通过修改根元素的字体大小可以影响所有使用rem单位的元素,从而实现整体的尺寸调整;
em更适合于需要相对于其父元素进行尺寸调整的场景,如水平布局或者特定元素的内边距、外边距等。
总结来说,rem和em的主要区别在于它们的计算基准和使用场景,rem基于根元素,适用于需要统一调整所有元素尺寸的情况,而em基于父元素,适用于需要相对于局部环境调整元素尺寸的情况。
vue3响应式原理
Ref函数创建基本类型和对象类型的响应式数据
改值要加value
12let age = ref(18)age.value += 1
ref创建对象用的还是reactive,获取对象里的值要用.value(用reactive创建可以省略)
12car.value.price = 10games.value[0].name = 'game01'
Reactive函数创建对象类型的响应式数据
1let car = reactive({ brand: '奔驰', price: 100 })
能修改对象里的属性的值,但不能一下修改整个对象,页面不会更新要用Object.assign(obj1,obj2),obj1被覆盖(相同的属性)和增加(新的属性),还是响应式的
1Object.assign(car,{brand:’奥迪’,price:1})
用ref可以改整个对象,用value
1car.value={ brand:’奥迪’,price:1}
直接打印ref定义的 ...
vue2响应式原理
Objedct.definepropertyObjedct.defineproperty给对象定义属性有三个参数,对象,属性名,配置项。
1Object.defineproperty(person,’age’,{value:18})
给person对象添加了age属性,值为18。
但是通过该方法增加的属性不可枚举,用Object.keys(person)获取不到;
不可被修改,在浏览器里定义person.age=19,查看person,里面数据还是18;
在Object.defineproperty方法里增加enumerable属性设置为true可以让修改的属性可被遍历到;
增加writable属性设置为true可以让属性可被修改;
增加configurable属性设置为true可以让属性可被删除;
123456Object.defineproperty(person,’age’,{value:18,enumerable:true,//控制属性是否可被枚举,默认值是falsewritable:true,//控制属性是否可被修改, ...
选项式api和组合式api
选项式api和组合式api区别
选项式api把一个功能的data、methods、computed、watch拆散到各个部分
组合式api用函数的方式,一个功能放到一块,和之前学的java啥的一样,
setupthis
Setup函数里没有this关键字,之前也没怎么用过,只在c指针那里用过
setup()的生命周期
用了setup,data和method也能用,data里用this.name可以获取到setup里的name,因为setup在beforecreated之前,所以其他属性能用setup属性里的东西,反过来不行
<script setup>
Setup写在script标签里就不用return了setup()函数需要return
css笔记
段落开头空两格文本缩进属性是用来指定文本的第一行的缩进。实例
1p {text-indent:50px;}
文本的对齐方式文本可居中,对齐到左或右,两端对齐
123h1 {text-align:center;}// 居中p.date {text-align:right;}// 对齐到右p.main {text-align:justify;}// 两端对齐
a标签a:link - 正常,未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻
table表格表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框,使用 border-collapse属性。
12table{border-collapse:collapse;}table,th, td{border: 1px solid black;}
display: hidden、inline、 ...
VarLetConst
重复声明同一作用域内Let和const不能重复声明同一个值如 let a=1 ; let a =2 这样是不被允许的,但var可以,最后一个var声明的值会覆盖之前的
常量和变量const 声明的是常量,常量不能被修改,不过可以const数组和对象,这样值就可以变了。let和var声明的是变量,可以被修改
声明提前var有声明的提前,const let没有,所以在const和let声明之前,使用声明的值会报错,var会显示undefined,不报错,另外for循环里用var也会提前到for前面,所以用let
作用域const let 是块级作用域
Vue是什么
定义一套用于构建用户界面的渐进式JavaScript框架。Vue是把数据变成界面,可以引入各种插件实现各种功能
Vue的特点
1、 组件化,提高复用率,更好维护2、 声明式编码,不用直接操作DOM,效率高3、 虚拟DOM+Diff算法,复用DOM节点
django笔记(09) | 部署项目
Tip
如果修改完代码,但没变化,可以试试保存两次,ctrl+s两下,浏览器刷新两下
如果models写完makemigrations 显示没变化,看看settings里有没有注册该应用
安全组就是防火墙
连接数据库失败可以删掉数据库重新建一个试试
除了阿里云的安全组、腾讯云的防火墙要开放端口(新建一个),在宝塔面板的安全里也要开放,不然无法访问,页面无法访问一定要检查!!!
python manage.py runserver要在venv环境中运行,不然可能因为服务器没下载python不能执行python命令
1234ubuntu@vM-16-13-ubuntu:~$ python manage.py runserverCommand 'python' not found, did you mean: command 'python3' from deb python3 command 'python' from deb python-is-python3
Linux使用source venv/ ...