注册或者浏览社交类网站时不恰当,东莞建设培训中心网站,wordpress中文图片插件下载,企业标志logo设计免费上一周实在是过得太颓废了#xff0c;我感觉还是要把自己的规划做好一下#xff1a;
周计划
这周截至周四#xff0c;我可以用vue简单的画完登陆注册的界面并且弄一点预处理#xff1a;
周一
的话可以把这些都学一下#xff1a;
父传子#xff0c;子传父#xff1a…上一周实在是过得太颓废了我感觉还是要把自己的规划做好一下
周计划
这周截至周四我可以用vue简单的画完登陆注册的界面并且弄一点预处理
周一
的话可以把这些都学一下
父传子子传父
script setup// 1.给子组件以添加属性的方式传值
// 2.在子组件通过props的方式接受
// 对于局部组件导入进来就能用
import testDemo1 from ./components/test-demo1.vue;
import{ref} from vue;
const moneyref(100);
const getMoney()
{money.value10;
}
const changeFf(newMoney){money.valuenewMoney;
}
/scripttemplate
h3我是父组件---{{ money }}/h3
!-- 给子组件添加属性的方式传值 --
testDemo1 car宝马
:moneymoney
changeMoneychangeFf/testDemo1
button clickgetMoney/button
!-- 也可以动态传递子属性数据 --
money
/template
script setup
// 注意由于写了setup所以无法配置props选项
// 借助编译器宏函数接受子组件传递的数据,是编译阶段的一个标识实际编译器解析后遇到后会进行编译转换
const emitdefineEmits([changeMoney]);
const propsdefineProps({car:String,money:Number
})
const buy()
{//单向流需要emit去触发事件emit(changeMoney,5);}
console.log(props.car)
/scripttemplatediv classson我是子组件---{{ car }}-----{{ money }}button clickbuy花钱/button/div/templatestyle scoped
.son{padding: 30px;border: red solid 1px;
}/style
defineExpose和模板引用
默认在setup语法糖下是不开放组件内部的方法和属性的可以通过defineExpose向外暴露
script setup
import { onMounted, ref } from vue;
import testDemo2 from ./components/test-demo2-copy.vue;
// 模板引用可以获取dom也可以获取组件
/* 1.调用ref函数创建ref对象
2。通过ref标识进行绑定
通过ref对象.value即可访问绑定的元素必须渲染完成后才能拿到 */
const inpref(null);
//-------------------------------------
const testRefref(null);const getCom(){console.log(testRef.value.count);}//生命周期钩子
onMounted((){console.log(inp.value)inp.value.focus();
});
/scripttemplateinput refinp typetext
button点击让输入框聚焦/button
testDemo2 reftestRef/testDemo2
button clickgetCom获取组件/button/template
script setup
import { ref } from vue;
const countref(999);
const sayHi()
{console.log(你好呀);
}
defineExpose({// 使用宏向外暴露sayHi,count
});/scripttemplatediv我是用于测试的组件--{{ count }}/div/template
同时去搜索了一下vue里面响应式和非响应式的数据有什么区别
provide和inject
从顶层组件向任意底层组件传递数据和方法 script setup
import centerCom from /components/center-com.vue
import {ref,provide} from vue//跨层级传递普通数据
provide(theme-color,小冏);//跨层级传递响应式数据
const countref(100);
provide(count,count);//跨层级传递函数
provide(changeCount,(newValue)
{count.valuenewValue;
})/scripttemplatedivh1我是顶层组件/h1/divcenterCom/centerCom
/template
script setup
import bottomCom from /components/bottom-com.vue
/scripttemplatedivh2我是中间组件/h2/divbottomCom/bottomCom
/template
script setup
import { inject } from vue;
const themeColorinject(theme-color);
const countinject(count);
const changeCountinject(changeCount);
const clickFn()
{changeCount(500);
}
/scripttemplatedivh3我是底层组件--{{ themeColor }}---{{ count }}/h3/divbutton clickclickFn修改count/button/template defineOptions script setup
defineOptions({name:loginIndex
})
/script
templatediv
哈哈哈哈
/div
/template
然后好奇的又搜了一下有关setup语法糖的作用
Vue3.0的新语法糖-script setup - 知乎 (zhihu.com)
defineModel
script setup
import myInput from ./components/my-input.vue;
import { ref } from vue;
const countsref(123456);/scripttemplatedivdivmyInput typetext v-modelcounts/myInput{{ counts }}
/div/div/template
script setup
import { defineModel } from vue;
const modelValuedefineModel();
/script
templatedivinput typetext :valuemodelValueinputemodelValuee.target.value/div
/template
Pinia Pinia基本语法
script setup
import { useCountStore } from ../store/counter;
const counterStoreuseCountStore();
/scripttemplate
div 我是son1{{ counterStore.count }}--button clickcounterStore.addCount/button
/div/template
style scoped/stylescript setup
import { useCountStore } from ../store/counter;
const counterStoreuseCountStore();
/script
template
div我是son2{{ counterStore.count }}--button clickcounterStore.subCount-/button
/div/template
style scoped
/stylescript setup
import sonCom1 from /components/sonCom1.vue
import sonCom2 from /components/sonCom2.vue
import {useCountStore} from /store/counterconst counterStoreuseCountStore();
console.log(counterStore);
/scripttemplate
divh3根组件-{{counterStore.count}}/h3
sonCom1/sonCom1
sonCom2/sonCom2/div/template
style scoped/styleimport { defineStore } from pinia;
import { ref } from vue;
//定义store
//仓库里面修改数据都是靠导出来修改的
export const useCountStoredefineStore(counter,()
{//声明数据 state-countconst countref(0);//声明操作数据的方法-actionsconst addCount(){count.value}const subCount(){count.value--;}//声明基于数据派生的计算属性gettersreturn {count,addCount,subCount}});pinia-action异步写法 数据库的作业: 周二 上午词汇下午翻译训练 周三
写一下java作业以及上午词汇训练 周四
上午词汇训练下午范文复习 明天和意外我永远不知道哪个先发生。。。
其实这几天多了很多其它的事情所以进度直接跳到周天
周日
录题数据库作业各种作业 保证书
对于时长除了每天3.5小时*621小时
大概每天可以拿出一个半小时多余时间出来自习1.5*69小时
然后周六235小时可以用来自习还有周二没什么课几乎1小时
2195136小时一周
刷题的话我打算用c但是还不会力扣也没怎么刷过所以先试试一周写五道题
功能点
第三周的时候开始写项目在此之前会先用vue先画一下登陆注册的界面和前端
