Vue学习笔记

知识速览

下面就简单记录一下Vue学习笔记了，适合回顾。

• 基础知识（熟记于心）
• 组件（组件通信）
• 路由（各种类型）
• axios（请求处理）
• 状态管理（基本使用）
• 脚手架和vite（构建工具）

项目目录

使用 vue cli 和 vite 构建出来的 vue 项目目录结构可能会有细微的差别，但是大体上都是差不多的，这里以 vue cli 为例讲解各文件夹及文件作用：

 - node_modules 项目依赖的模块
 - public 不会被webpack编译 可以存放引用的第三方js
 - favicon.ico 图标文件
 - index.html 项目主页面
 - src 项目代码主目录
 - assets 项目中的静态资源 诸如图片 css
 - components 编写的组件存放位置
 - app.vue 项目的根组件
 - main.js  程序入口js文件
 - router  路由配置文件
 - store  项目状态管理
 - utils  实用函数
 - views  页面级组件
 - .browserslistrc 配置项目的目标浏览器的范围
 - .eslintrc.js  ESLint使用的配置文件
 - .gitignore 配置在git提交项目代码时忽略那些文件或者文件夹
 - babel.config.js Babel使用的配置文件
 - package.json npm的配置文件
 - package-lock.json 用于锁定项目实际安装的各个npm包的具体来源和版本号
 - README.md  项目说明文件  

重点掌握src文件夹！

基础知识

1、语法糖 {{}}

2、v-指令

 - v-once  一次性插值 即当数据改变时插值内容不会更新
 - v-html   输出html代码
 - v-bind   绑定属性 
 - v-on     绑定事件
 - v-model  双向绑定 一般用于表单
 - v-if v-else-if v-else  条件渲染 切换开销大
 - v-show  条件显示  渲染开销大  即通过改变css来决定是否显示
 - v-for  遍历 可以遍历数组和对象 一般会绑定 :key

组件

export default {
name：名称
data：数据
methods：方法
computed：计算属性
生命周期函数
watch：监听数据变化
props：子组件接收父组件传递来的值
provide：向后代传递数据
inject：接收祖代传递数据
}

1、全局组件、本地组件定义及区别

2、父子组件传递数据：

父向子传递数据：父：自定义属性 子：props接收(可以props验证)
子向父传递数据：$emit()

3、组件通信：provide和inject

路由

1、基本路由

①设置导航链接
②路由在何处渲染
③定义路由组件（组件）
④定义路由（路由和组件的对应关系）
⑤创建VueRouter实例
⑥调用use方法

2、动态路由匹配
/book/:id      :表示动态 对应/book/1 /book/2 
可以有多个参数    设置this.$router.params

3、查询路由参数 
$router.query.id  id在这里是参数

4、嵌套路由
children

5、重定向
redirect

6、命名路由
name

axios

axios.get(url)/post(url)
.then(成功时)
.catch(错误时)

登录验证要学习拦截器~

状态管理

state：类似于data
mutations：改变state 然后在使用数据的组件中的methods中写对应关系
actions：异步处理
getters：计算state 然后在使用数据的组件中的computed中写对应关系

mapState mapMutations

学习心得

大家好，我是以前常常为自己发量太多而烦恼的×××，于是我听取了朋友的建议，报考了计算机专业，大家也看到了，效果很明显。

最近去微软俱乐部，跟着qm和ny学习，感觉整个人都要被他们吊打，我都开始怀疑自己的学习方法有问题了，感叹到底考试和学技术还是不一样啊。

我每次喜欢先看学习路线，然后再去准备环境，再就是看官方文档，这一学科有哪些大块的知识点，各自是干什么的，看不懂的跳过去看看视频，最后理一理思维导图，再去写一个项目。

但是问了问，大佬们都是和我相反的。作为一名合格的工程师，首先是要把东西写出来，再去探究内部的底层原理。先搞一个项目，搞一搞思维导图，看看需要学习哪些知识，再去看看官方文档，最后再准备环境，去写写项目。

而且很重要的一点，就是写项目和跟着抄代码是不一样的。在前期学习过程中，必然是要跟着别人的demo去照着抄，看一下项目各个部分都是干什么的，以及比较常用的代码规范和开发技巧等，但是后期就需要自己去想想思路怎么写了。

我们学知识不能太浮躁了，不要纠结今天学习了什么，而是去想这十天半个月对于这个新知识的学习。

知识是很多的，全部学会记住那是不可能的，记住常用的知识也能够走得很远。