网站 手机版 电脑版 怎么做,国外服务器免费ip地址,东莞网络公司哪家最好,摄影标志logo设计欣赏这里终于明白了为什么一直有这个语法报错#xff0c;就是在提示你哪里错的地方上方注释一行/*eslint-disable*/#xff0c;之前一直警告这个错误感谢老师#xff01; 一、vue2和vue3生命周期 还有一个问题就是父组件和子组件哪个先挂载完毕呢#xff1f;答案是子组件先挂…这里终于明白了为什么一直有这个语法报错就是在提示你哪里错的地方上方注释一行/*eslint-disable*/之前一直警告这个错误感谢老师 一、vue2和vue3生命周期 还有一个问题就是父组件和子组件哪个先挂载完毕呢答案是子组件先挂载完毕。因为首先解析入口文件index.htmlmain.tsApp.vuePerson.vue所以当然是Person.vue先挂载完毕才能继续解析App.vue。 templatediv classpersonh2当前求和为{{ sum }}/h2button clickchangeSum点我sum1/button/div/template!-- vue3写法 --script langts setup namePersonimport { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue// 数据let sum ref(0)// 方法function changeSum() {sum.value 1}console.log(setup)// 生命周期钩子onBeforeMount((){console.log(挂载之前)})onMounted((){console.log(挂载完毕)})onBeforeUpdate((){console.log(更新之前)})onUpdated((){console.log(更新完毕)})onBeforeUnmount((){console.log(卸载之前)})onUnmounted((){console.log(卸载完毕)})/script
二、自定义hooks
hook本质是一个函数用use开头把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑.
有时候我们会写很多数据和方法如果都写在Person.vue会很大很复杂也不好修改所以我们可以在src下新建hooks文件夹 建立useDog.ts和useSum.ts拆分Person.vue中的东西。
例如
Person.vue
templatediv classpersonh2当前求和为{{ sum }}放大十倍{{ bigSum }}/h2button clickadd点我sum1/buttonhrimg v-for(dog,index) in dogList :srcdog :keyindexhrbutton click getDog再来一只小狗/button/div
/templatescript langts setup namePersonimport useSum from /hooks/useSumimport useDog from /hooks/useDoglet { sum,add,bigSum} useSum()let { dogList, getDog } useDog()
/scriptstyle scoped
.person {background-color: skyblue;border-radius: 0 0 10px;box-shadow: 10px;padding: 10px;
}
button {margin: 5px;
}
img{height: 100px;
}
/style
useDog.ts
import { reactive, onMounted } from vue;
import axios from axios;export default function () {//数据let dogList reactive([https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg,]);//方法async function getDog() {try {let result await axios.get(https://dog.ceo/api/breed/pembroke/images/random);dogList.push(result.data.message);} catch (error) {alert(error);}}//钩子onMounted(() {getDog();//千万别忘了在上面引入onMounted});//向外部提供数据return { dogList, getDog };
}useSum.ts
import { ref,onMounted,computed } from vue;export default function () {//数据let sum ref(0);let bigSum computed((){return sum.value*10})//方法function add() {sum.value 1;}//钩子onMounted((){add()})//向外传输return {sum,add,bigSum}
}效果 但是可能遇到如下报错xxx is never reassigned.use const instead prefer-const解决办法如下 三、路由
1.理解 2.路由的基本切换
其实大致和vue2是差不多的
1首先要下载vue-router的依赖
可能有些在创建项目的时候就已经选择了要配置router那么这时候就不要下载了可以去packge.json中查看自己的vue-router版本号如果有的话就不用下载了
npm install vue-router4后面可以指定版本或者不直接下载就是最新版本 2在src目录下新建一个router目录在router目录下新建一个index.ts文件
//创建一个路由器并暴露粗去//第一步引入
import { createRouter, createWebHistory } from vue-router;
//引入一个个要呈现的组件
import Home from ../pages/Home.vue;
import News from ../pages/News.vue;
import About from ../pages/About.vue;//第二步创建路由器
const router createRouter({history: createWebHistory(),//路由器的工作模式routes: [//引入路由规则{path: /home,component: Home,},{path: /news,component: News,},{path: /about,component: About,},],
});
export default router;createRouter函数新建一个路由器
createWebHistory函数可以创建一个 HTML5 History 路由实例从而能够支持浏览器的前进和后退按钮。
routes存放一个一个的路由在这里每一个路由都是一个对象必须要指定的由两个参数
path指定路由的路径
component指定路由对应的组件
3在main.ts中引入路由
import { createApp } from vue
import APP from ./App.vue
//引入路由
import router from ./router
//创建一个应用
const app createApp(APP)
// 使用路由器
app.use(router)
//挂载整个应用到app中
.mount(#app)
4实现路由的跳转
在App.vue中这样写利用RouterLink导航 和to路径active-class实现点哪哪亮效果
RouterLink标签会被渲染成一个 a 标签点击它时会触发路由切换。
RouterView 标签是展示区会根据当前路由的路径自动加载对应的组件并将其渲染到页面中。
templatediv classapph2 classtitleVue路由测试/h2!-- 导航区 --div classnavigateRouterLink to/home active-classxiaozhupeiqi首页/RouterLinkRouterLink to/news active-classxiaozhupeiqi新闻/RouterLinkRouterLink to/about active-classxiaozhupeiqi关于/RouterLink/div!-- 展示区 --div classmain-contentRouterView/RouterView/div/div
/templatescript langts setup nameApp
import { RouterView, RouterLink } from vue-router/scriptstyle
/* App */
.title {text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, gray, white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;
}.navigate {display: flex;justify-content: space-around;margin: 0 100px;
}.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;
}.navigate a.xiaozhupeiqi {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;
}.main-content {margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;
}/style5pages中的静态页面 分别有Home.vue,About.vue,News.vue 这里不再写明可以去老师的笔记里面自取
6效果 3.两个注意点 4.两种工作模式
1. history模式 优点URL更加美观不带有#更接近传统的网站URL。 缺点后期项目上线需要服务端配合处理路径问题否则刷新会有404错误。
//创建一个路由器并暴露粗去//第一步引入
import { createRouter, createWebHistory } from vue-router;
//引入一个个要呈现的组件
import Home from ../pages/Home.vue;//第二步创建路由器
const router createRouter({history: createWebHistory(),//路由器的工作模式historyroutes: [//引入路由规则{path: /home,component: Home,}],
});
//暴露出去
export default router;2. hash模式 优点兼容性更好因为不需要服务器端处理路径。 缺点URL带有#不太美观且在SEO优化方面相对较差。 const router createRouter({history:createWebHashHistory(), //hash模式/******/}) 5.to的两种写法 字符串写法和对象写法
!-- 第一种to的字符串写法 --
router-link active-classactive to/home主页/router-link!-- 第二种to的对象写法 --
router-link active-classactive :to{path:/home}Home/router-link其实对象写法也分为两种在学完命名之后可以有name和path两种写法 6.命名路由 作用可以简化路由跳转及传参
写法name:xxx 这样写的话就可以在跳转路由的时候这样写 7.嵌套路由
假如想在新闻的展示区再做一个导航区和显示区如图所示这时候就需要嵌套路由。 1 首先我们编写News的子路由在pages下新建Detail.vue
templateul classnews-listli编号xxx/lili标题xxx/lili内容xxx/li/ul
/templatescript setup langts nameAbout/scriptstyle scoped
.news-list {list-style: none;padding-left: 20px;
}.news-listli {line-height: 30px;
}
/style
2配置路由规则使用children配置项
用法children:[{ path:xxxx, componnent:xxxx}]
{name: xinwen,path: /news,component: News,children:[{path: detail,//嵌套路由路径不用加/component: Detail,}]},
3 news.vue中跳转路由记得要加完整路径 template!-- 导航区 --div classnewsulli v-fornews in newsList :keynews.idRouterLink to/news/detail{{ news.title }}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/templatescript setup langts nameNews
import { reactive } from vue;
import { RouterView,RouterLink } from vue-router;const newsList reactive([{id:cgp01,title:今天周一,content:嘻嘻},{id:cgp02,title:今天周二,content:不嘻嘻},{id:cgp03,title:今天周三,content:不不嘻嘻细},{id:cgp04,title:今天周四,content:不不不嘻嘻}
])
/script
8.query参数
我们发现上方实现的效果newscontent的数据是写死的那怎么把数据传过去呢
1传递参数
用to传参有两种写法 // News.vue ulli v-fornews in newsList :keynews.id!-- 第一种写法 模板字符串写法 冗杂 --!-- RouterLink :to/news/detail?id${news.id}{{ news.title }}/RouterLink --!-- 第二种写法 对象写法 --RouterLink :to{// path:/news/detail,name:xiangqing,query:{id:news.id,title:news.title,content:news.content}}{{ news.title }}/RouterLink/li/ul
2 接收参数
templateul classnews-listli编号{{query.id }}/lili标题{{query.title}}/lili内容{{query.content}}/li/ul
/templatescript setup langts nameAbout
import { toRefs } from vue;
import { useRoute } from vue-router;
let route useRoute()
// console.log(route);可以发现route上有我们需要的query参数
//解构让query参数等于route上面就不用写route.query.id
let { query } toRefs(route)
// 直接解构query一定丢失响应式导致点两次导航区就不更新了
// 加上torefs是不让query丢失响应式
/script 需要注意的是 直接解构query一定会让其丢失响应式导致点两次导航区就不更新了加上torefs是不让query丢失响应式。
9.params参数
第一种字符串
!-- params第一种 占位符模板字符串 --
RouterLink :to/news/detail/${news.id}/${news.title}/${news.content}{{ news.title }}/RouterLink
记得一定要占位符 这里有个注意点就是万一不想传content怎么办就是在占位符后面加个就好了 第二种对象
需要注意的是不能用path
!-- 第二种 对象 params --RouterLink :to{name: xiangqing, //用name跳转params: {id: news.id,title: news.title,content: news.title}}{{ news.title }}/RouterLink
备注1传递params参数时若使用to的对象写法必须使用name配置项不能用path。
备注2传递params参数时需要提前在规则中占位。
Detail.vue 10.路由的props配置
之前上面写的detail.vue很冗杂我们可以利用props配置
1props布尔值写法 props的布尔值写法作用把收到了每一组params参数作为props传给Detail组件只能和params配合
props:true 2 props的函数写法常用 作用把返回的对象中每一组key-value作为props传给Detail组件 3 对象写法少写
作用把对象中的每一组key-value作为props传给Detail组件 11.replace属性
1. 作用控制路由跳转时操作浏览器历史记录的模式。
2. 浏览器的历史记录有两种写入方式分别为push和replace
push是追加历史记录默认值。 replace是替换当前记录。
3. 开启replace模式
RouterLink replace .......News/RouterLink
添加replace之后不能前进后退 12.编程式导航
先来实现一个效果点击首页看三秒之后自动跳转到新闻页面。其实这就是实现了一个简单的编程式路由导航效果。
//home.vue
script setup langts nameHome
import { onMounted } from vue
import { useRouter } from vue-router
const router useRouter()
onMounted(() {setTimeout(() {router.push(/news)}, 3000)
})
/script
那么接下来做一个复杂一点的 在新闻页面的导航区增加按钮通过点击按钮实现跳转。其实这也是现实开发中常用的编程时路由导航而且一般都比routerlink使用的多。而且在vue2中用这个点击次数多可能会报错但是在vue3中并不会。
//news.vue
templatediv classnews!-- 导航区 --ulli v-fornews in newsList :keynews.id!-- 通过点击按钮实现路由跳转 --button clickshowNewsDetail(news)查看新闻/buttonRouterLink :to{name: xiang,query: {id: news.id,title: news.title,content: news.content}}{{ news.title }}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/templatescript setup langts nameNews
import { reactive } from vue
import { RouterView, RouterLink, useRouter } from vue-routerconst newsList reactive([{ id: asfdtrfay01, title: 很好的抗癌食物, content: 西蓝花 },{ id: asfdtrfay02, title: 如何一夜暴富, content: 学IT },{ id: asfdtrfay03, title: 震惊万万没想到, content: 明天是周一 },{ id: asfdtrfay04, title: 好消息好消息, content: 快过年了 }
])const router useRouter()
//写一个接口限制类型防止news报错
interface NewsInter {id: string,title: string,content: string
}function showNewsDetail(news: NewsInter) {router.replace({name: xiang,query: {id: news.id,title: news.title,content: news.content}})
}
效果 13.重定向
1. 作用将特定的路径重新定向到已有路由。
2. 具体编码 这样默认显示的教师你redirect后的页面。
