做网站用php,门户网站开发简历,优化大师win7官方免费下载,wordpress投稿功能漏洞1、route/router的区别
● $route 表示当前激活的路由的状态信息#xff0c;包含了当前URL解析得到的信息#xff0c;包含当前的path路径#xff0c;params参数#xff0c;query对象#xff0c;name路径名等属性 ● r o u t e r 路由器对象#xff08; n e w 的路由器对…1、route/router的区别
● $route 表示当前激活的路由的状态信息包含了当前URL解析得到的信息包含当前的path路径params参数query对象name路径名等属性 ● r o u t e r 路由器对象 n e w 的路由器对象包含一些操作路由的功能函数来实现编程式导航。一般指的是在任何组件内访问路由。如路由编程式导航的 router 路由器对象new的路由器对象包含一些操作路由的功能函数来实现编程式导航。一般指的是在任何组件内访问路由。如路由编程式导航的 router路由器对象new的路由器对象包含一些操作路由的功能函数来实现编程式导航。一般指的是在任何组件内访问路由。如路由编程式导航的router.push() ● 获取路由参数
import { useRoute,useRouter } from vue-router
// useRoute 相当于vue2中的this.$route(),表示当前的路由对象
// useRouter 相当于vue2中的this.$router(),表示全局的路由对象
const route useRoute()
const queryroute.query // 地址兰参数
const praramsroute.params
// 使用router
const router useRouter()
queryrouter.currentRoute.value.query
praramsrouter.currentRoute.value.params2、setup的调用时机
创建组件实例然后初始化 props 紧接着就调用setup 函数。从生命周期钩子的视角来看它会在 beforeCreate 钩子之前被调用 但是在vue2.x版本中是先执行beforeCreatd 之后是setup再是created
3、reactive
● reactive() 会返回一个修改过的原始的对象此行为与 Vue 2 中的 Vue.observable 一致而在vue3中reactive() 会返回一个新的的代理对象。 ● 使用组合函数时必须始终保持对这个所返回对象的引用以保持响应性。这个对象不能被解构或展开可以使用toRefsApi去解决这个问题
const userreactive({name:jake,age:28})
// 使用解构
const {name,age}toRefs(user)4、ref
● 为什么通过ref申明的会有这个value 由于 JavaScript 中基础类型是值传递而非引用传递一个响应式的值一旦作为 property 被赋值或从一个函数返回而失去了响应性之后也就失去了用途。为了确保始终可以读取到最新的计算结果我们需要将这个值上包裹到一个对象中再返回。另外我们同样需要劫持对这个对象 .value property 的读/写操作现在我们可以通过引用来传递计算值也不需要担心其响应式特性会丢失了。当然代价就是为了获取最新的值我们每次都需要写 .value。 ● 那为什么在template模板中又不需要写.value了呢 在渲染过程中Vue 会直接使用其内部的值也就是说在模板中你可以把 {{ count.value }} 直接写为 {{ count }} 。
5、script setup语法糖
● 自动注册子组件 ● 属性和方法无需返回 ● 支持props、emit和contex setup script语法糖提供了三个新的API来供我们使用defineProps、defineEmit和useContext
/** child.vue */
template div{{ props.msg }}/diva-button typeprimary clickhandleClickemit/a-button
/template
script langts setupimport { ref, reactive, onMounted } from vue;// propslet props defineProps({msg: {type: String,default: }});// emitconst emit defineEmits([child-click]);function handleClick() {emit(child-click, child组件的回传信息);}// 导出数据const childData reactive({name: child,description: 这里是子组件的信息});defineExpose({ childData });
/script/** main.vue */
templatediv主页面/divdivChild refchildRef :msgmsg child-clickhandleClick/Childhr /div来自child的值{{ childMsg }}/diva-button typeprimary clickgetInstance获取实例/a-button/div
/template
script langts setupimport Child from ./child.vue;import { ref, reactive, onMounted, getCurrentInstance } from vue;const msg ref(主页面的props);let childMsg refstring();const handleClick (res: string) {childMsg.value res;};// 获取refFormconst childRef ref();// 获取实例const instance getCurrentInstance();function getInstance() {console.log(log内容getInstance, instance.refs[childRef].childData);console.log(log内容childRef, childRef.value.childData);}
/script
style langless scoped/style6、createVNode
const message {setup() {const num ref(1)return {num}},template: divdiv{{num}}/divdiv这是一个弹窗/div/div}// 初始化组件生成vdomconst vm createVNode(message)// 创建容器也可以用已经存在的const container document.createElement(div)//render通过patch 变成domrender(vm, container)
// 弹窗挂到任何你想去的地方
document.body.appendChild(container.firstElementChild)6、v-model与update:value
/** main*/
templateh3pageTitle{{ pageTitle }}/h3h4obj:{{ obj.billNo }}--{{ obj.billEntity.billName }}/h4hr /child v-model:titlepageTitle emitFunemitFun/child
/templatescript langts setup
import { ref, reactive } from vue;
import child from ./child.vue;const pageTitle ref(这是v-model:title);
const obj reactive({billNo: 3333,billEntity: {billName: 单据名称,remark: 备注}
});
const emitFun (data: any) {Object.assign(obj, data);
};/**child*/
templateinput typetext inputsetInput /a-input inputsetInput/a-inputa-button typeprimary clicksetValue调用update:value/a-button
/templatescript langts setup
const emit defineEmits([update:title, emitFun]);
let props defineProps({msg: {type: String,default: }
});
function setInput(val: any) {emit(update:title, val.target.value);
}
function setValue() {emit(emitFun, {billNo: 3333-5555,billEntity: {billName: 单据名称child,remark: 备注child}});
}
/script7、Suspense
Vue 3 中的Suspense特性允许你在异步组件加载时显示占位符这有助于提高用户体验同时减少了不必要的渲染。
8、Fragments片段
Fragments 允许你在不引入额外的 DOM 元素的情况下将多个子元素包裹在一个父元素中。这有助于减少 DOM 结构的嵌套使代码更清晰和简洁。你可以使用 元素或 Vue 3 提供的特殊语法 v-fragment 来创建一个 Fragment。 下面示例中v-fragment 包裹了两个 p 元素但最终渲染的 DOM 结构中并不会包含额外的父元素。
templatedivpParagraph 1/ppParagraph 2/pv-fragmentpParagraph 3/ppParagraph 4/p/v-fragment/div
/template9、Teleport传送门
Teleport 允许你将组件的内容渲染到 DOM 结构的不同位置而不受父组件的限制。这对于处理模态框、对话框、通知消息等需要在页面的不同位置渲染的情况非常有用。你可以在模板中使用 teleport 元素并将其 to 属性设置为一个目标选择器以指定内容应该被渲染到哪个 DOM 元素中。
templatedivbutton clickshowModalShow Modal/buttonteleport to#modal-containerModal v-ifisModalVisible closecloseModal //teleport/div
/template在上面的示例中Modal 组件的内容会被渲染到页面中具有 id“modal-container” 的 DOM 元素内部。
