- 博客(32)
- 收藏
- 关注
原创 JS之预解析
1:预解析 JS引擎会把JS里面所有的var和function提升到当前作用域的去前面。2:函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数。1:变量提升就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作。二:预解析分为变量预解析(变量提升)和函数预解析(函数提升)一:js引擎运行JS代码,分两步:预解析和代码执行。2:代码执行 按照代码书写的顺序从上往下执行。
2023-06-29 20:13:25
168
原创 CSS3之标准流
常用的元素有:div、h1~h6、p、hr、ul、ol、dl、form、table。2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。所谓的标准流:就是标签按照默认好的方式排列。常用的元素:span、a、i、em等。1.块级元素会独占一行,从上到下排列。
2023-06-18 16:14:01
127
原创 CSS之盒子模型
注:必须是块元素,行内元素和行内块元素水平居中需要在父级元素添加:text-align:center;padding:5px 10px 20px 上内边距5像素 左右内边距10像素 下边距20像素。padding:5px 10px 20px 30px 上5 右10 下20 左30 顺时针。嵌套块元素垂直外边距的塌陷:父元素有上边距,子元素也有上边距,此时父元素会塌陷较大的的边距。padding:5px 10px 上下5像素内边距 左右10像素内边距。padding:5px 上下左右5个项目内边距。
2023-06-18 15:03:34
51
原创 Vue3之keep-alive缓存组件
keep-alive:有时候我们不希望输入的值不被消除,或者不想重新渲染从而提高性能,维持当前状态,我们就可以使用内置组件keep-alive。-- 和 `<transition>` 一起使用 -->-- 多个条件判断的子组件 -->
2023-04-04 15:55:44
238
原创 Vue3之Teleport传送组件
Teleport:想我们的模板渲染到指定的DOM节点,完全不受父级style的影响。<Teleport to="body">//将组件渲染到body节点。
2023-03-27 16:38:30
87
原创 Vue3之插槽
</slot>),父组件可以在这个占位符填充HTML、组件等,填充的内容会替换子组件的占位符<slot>我是一个具名插槽</div><div>我是一个匿名插槽</div>-- 具名插槽简写和作用域插槽 --><div>作用域插槽
2023-03-17 16:57:31
280
原创 Vue3之配置全局组件
createApp(App).component('组件名称',全局组件).mount('#app')在项目中使用频率高的组件可以设置成全局组件,像table,button,icon等。import 全局组件 from './components/全局组件.vue'在项目中注册全局组件。main.ts文件中。
2023-03-17 15:14:23
537
原创 Vue3之组件父子传参
title="父组件传的值" msg="Hello World" @on-click="getList"></HelloWorld><HelloWorld title="父组件传的值" msg="Hello World"></HelloWorld><HelloWorld title="父组件传的值" msg="Hello World"console.log(list,'父组件接受子组件的值')子组件:通过defineProps接受父组件传过来的值。父组件:导入子组件,通过v-bind向子组件传参。
2023-03-17 14:17:11
1351
原创 Vue3之组件及生命周期
console.log('跟新之前====>',btn.value?//获取数据更新之前的数据。console.log('跟新之后====>',btn.value?//获取数据更新之后的数据。console.log('挂载之后====>',btn.value);console.log('挂载之前====>',btn.value) //无法获取根元素。console.log('卸载之前====>',);console.log('卸载之后====>',);组件:项目中所有.vue的文件都视为组件。
2023-03-16 16:37:12
1940
原创 Vue3之watchEffect
flush:'pre' ,//pre:组件更新前执行 sync:强制效果始终同步触发 post:组件更新后执行。flush:更多的配置选项 pre:组件更新前执行 sync:强制效果始终同步触发 post:组件更新后执行。oninvalidate(()=>{ //监听数据变化之前调用 清除副作用。onTrigger:更多的配置选项 开启debugger,帮助调试。let msg1 = ref<string>('第一个消息')let msg2 = ref<string>('第二个消息')
2023-03-16 15:57:23
197
原创 Vue3之watch侦听器
参数:1:监听数据源 2:参数回调函数(newVal,oldVal) 3:options:{immediate:true,//是否立即调用一次 deep:true,//是否开启深度监听}immediate:true,//是否立即调用一次。watch:侦听需要的数据源,并在回调函数中执行副作用。//能监听到数据,但是newVal==oldVal。//能监听到数据,但是newVal==oldVal。deep:true,//是否开启深度监听。监听对象需要开启 deep:true。//开不开启都能监听到。
2023-03-16 15:28:15
315
原创 Vue3之to系列
可以帮我们批量创建ref对象主要是方便我们解构使用(复制 reactive 里的所有属性并转成 ref)的就不会更新视图 数据是会变的,如果原始对象是响应式的是会更新视图并且改变数据的。const rraw = toRaw(person) //转为普通对象。注:数据(info ,rGreet )会变化,视图会更新。// 复制 info 里的 greet 属性。uname.value= '嘿嘿'注:数据会变化,但是视图不会更新。// 更改 rGreet。将响应式对象转为普通对象。注:解构数据的时候常用。
2023-03-15 16:59:40
226
原创 Vue3之Reactive全家桶
申明响应式变量,但只能申明应用类型,例如Array、Object、Map和Set等,用来绑定复杂数据type F = {age:numbername:'安安',age:18})form.name = '嘻嘻'ref和reactive的区别:ref支持所有类型 reactive只支持引用类型Array、Object、Map和Set等ref取值赋值都需要.value,而reactive不需要。
2023-03-15 16:16:29
190
原创 Vue3之ref全家桶
判断是不是一个ref对象 console.log(isRef(name)) //true。const obj = shallowRef<Obj>({name:"小名"})obj.value = { //视图会更新 只对value进行响应。const name =ref<string>('这是一个名字')obj.value.name = '小姜' //视图不会变化。const aa = shallowRef('强制更新')name.value = '改变了名字'aa.value = '强制更新了'
2023-03-15 15:40:14
230
原创 Vue3之构建vite项目
npm => npm init vite@latest => vite-project(输入你的项目名称) => 选择模板vue、react等 => 选择JavaScript、typescript等 => 安装依赖 npm install => 切换到目录 cd projectName => 启动项目 npm run dev。src=>components 下面用来存放我们的组件。vite.config.ts vite的具体配置文件。src=>assets 下面可以存放可编译的静态资源。
2023-03-15 11:11:19
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人