Vue前端学习
Vue前端学习type
status
date
slug
summary
tags
category
icon
password
心得
点击展开
- 使用IDE写代码的好处就是,代码中不同的关键字会使用不同的颜色标识
- 学习vue重点关注的是这个框架提供的函数或者关键字,而不是变量的命名,或者换句话说,我们应该关注的是等号后面的内容 而不是等号前面的内容,比如const app = createApp(App),我们应该关注的是createApp这个vue提供的函数是做什么的,而不是关注这个app是什么,你命名为abcdefg都没问题,只要你能看懂你起的名字,否则就变成了“学代码”而不是“学框架”
- 使用IDE的一个好处是,会对代码中不同的部分标识不同的颜色,比如这个截图中有黄蓝绿紫几种颜色,对于学习很有帮助.
- 我的笔记中 对于某些关键字或函数,将使用下划线标识,标识这是vue提供的函数或者必须这样写vue才能识别的字段
路由
实现效果
路由创建过程
- 自定义路由规则
router.js
- 挂载路由规则
3.1 使用路由规则(主要是router-link和router-view这两个标签的使用)
homePage.vue(展示主要路由)
3.2 使用嵌套路由(newsPage.vue)
使用方法和上面没有区别,只是定义嵌套路由的时候使用children关键字标识
路由传参
为什么路由传参?
上面创建嵌套路由的时候,创建了两个组件来展示,如果都这么做的话 会产生很多的小组件
使用路由传参就只需要一个vue组件,展示不同信息,不用产生如此多的小组件
如何传参? query和pamas
- query传参
传参的时候 父传子,谁拥有router-link谁传参
拓展工具
- 使用json-server可以模拟后端请求数据 Json-server 的使用教程-CSDN博客
- concurrently是跨平台的终端命令解决方案（pnpm add -D concurrently）
修改package.json文件中的运行脚本
package.json:
db.json:
Loading...