前端vue学习笔记汇总

脚手架： 创建项目：vue create 项目名字

install：添加，直接在cmd编辑器内写：npm install -g @vue/cli 这里的-g代表全局的，加了后以后其他项目也可以用，如果不加就只能当前项目用
vue插件：vue引入所有插件都需要注册，语法是Vue.use(插件名)
import注意：在vue脚手架开发中如果前面不加路径就默认从核心模块引入，所以写路径前面要加 ./ 这个点斜杠代表当前目录下。
路径：@代表src文件夹，可以直接从src开始往下找。可以写@/demo/demo.vue。后面的.vue是可以省略的，默认如果文件没有后缀会优先找vue文件。因为脚手架内置了webpack
组件个体化链接：创建单一组件写，然后通过export default{}把组件全部传出去，在app这个大组件内import 名字 from "(加./或者@/)路径"引入组件，然后components注册组件，在结构中写入组件名使用组件，然后在main.js中有根实例，把app组件引入进来渲染出来，
组件引入：每个组件需要引入需要使用的文件
vue引入：import Vue from ‘vue’
路由引入：import VueRouter from ‘vue-router’
scoped：加在style开始标签上，会让组件样式不会互相影响。每个组件一定要加一个
vbase：快速生成组件框架和html5自动生成框架一样。
项目打包：npm run build 生成dist文件，把这个文件夹的东西放到服务器上就上线了
性能优化：v-if和v-show，路由和图片懒加载，缓存keep-alive，v-for时加key方便diff算法更快，打包优化（js，css按需引入，公共代码提取，最小化压缩，图片压缩）

Git：代码版本控制工具

https://npm.taobao.org/mirrors/git-for-windows/ 快速下载
流程：git config --global user.name “取个名” git config --global user.email “邮箱” 。然后git init 创建git仓库管理当前的文件夹。然后就可以操作下面的指令了。
上传流程：add加入暂存区，commit提交，push推送到网站，如果出错了，可能需要git pull --rebase origin master拉一下更新
git add 文件名：放到暂存区
git commit -m “提示信息”：用来提交有暂存区的文件，并附加个提示信息表示更改了什么可以写
git log：可以看到更新了多少个版本以及详细信息
git reset --hard HEAD^{：回退到上个版本，HEAD后面跟一个}就是回退一个版本，类推，如果太多可以选择HEAD~数字直接跳转
git reset --hard 版本号：只要命令行还没有关闭，可以找到想改的版本号，不需要全，前面几个数字就可以了，可以让你回退后如果后悔了还可以再重新返回来。
git reflog：如果回退版本后想恢复最新版本，但是又关闭了命令行，找不到commit id，那可以通过这个查找每一次的命令，
git restore --文件名：可以把你更改的内容全部撤销，如果已经add到了暂存区也可以这样操作，或者直接把版本回退到上一个
git remote add origin 仓库地址:本地仓库链接到远程仓库，origin一般是仓库的名字。
git push -u origin master：本地仓库内容推送到远程仓库，origin是仓库名，master默认分支名，第一次推送加-u，后面在推送就不需要-u了
git clone 代码地址：从仓库把代码拉出来。
git checkout -b dev:创建一个分支，这样更改这个分支不会影响到主分支的代码，相当于复制一份更改，如果改好了一把提交更改，可以正常add，commit。
git checkout master：切换回master分支
git merge dev:把dev的内容合并到主分支，一般dev分支写完感觉没问题可以把他合并过来主分支。如果有冲突的地方手动解决选择留哪一个删另一个
mock：模拟后端接口，以后直接改地址就行
先安装：npm install mockjs
路由（router）：
new VueRouter（{}）：创建一个路由实例，括号内传参数，参数是路由的配置。路由就是路径和视图的关系。
路由配置：先Vue.use(VueRouter)注册插件，关键字path=路径。component=视图。等于输入什么路径对应什么视图，然后在路由实例中传入这个对应关系，然后用export default router给他传出去就可以用了。

路由视图渲染位置：这个代表路由组件视图渲染的位置

路由跳转方式：中间可以写结构，这个类似于button
to跳转：
1，to：‘路径’
2，：to="{path：‘路径’}"
3:，：to="{name:“路由名字”}"
js跳转：
this.$route.push("路径")这种需要在methods内定义个函数然后事件触发跳转就行。另两个方法同上。router.push（path{：}^{\prime }路{径}^{\prime }）router.push（name:"路由名"）query：需要和path搭配，this.$route.push(“路径”，query：{name：“名字”})。可以传到路由根实例中在其他页面调用。
params：需要和name搭配使用，：to="{name:“路由名字”，params：“user：123”}"和query一样，可以传值
重定向：当进入某路由后直接定位跳转到什么另一个地址，后面的路径可以填任意地址，语法：redirect：“路径”。
alias：别名，增加一个路径，可以用来使用，用途是避免被人看到真是路由地址。
mode：路由模式，可以在后面字符串改hash和history模式。
路由原信息：mate：就是给当前路由携带数据的用途，比如放面包屑导航，比如给个名字用来区分权限之类的，一般mate后跟对象，写多个信息，可以用来携带信息用来渲染和if判断。直接在路由内声明。
路由模式区别：
hash：网址路径后会有#号，不好看。但是请求后台时只会传基础地址
history：没有#号，好看，但是刷新请求后台时会把所有路径全部传回去，但是后台只有基础地址的话就会匹配不上，出现404.这时候要让后端做重定向，就是如果收到这个不存在的地址就通过nginx转发到某个地址。
动态路由：在路由配置地址后加：/名字 加了可以让地址后面随便些什么都会跳转同一个页面，注意只改后面路径是不会触发组件声明周期的。
嵌套路由：chuldren：[ ]。哪里嵌套就在哪个路由内写，代表子集的意思，数组内还是一个个对象，和父路由相同
嵌套的路由需要在父路由的组件内写router-view渲染出来。
路由懒加载：component：（）=>import（路径）
路由对象：$route。当前路由的对象。this.$route可以访问到根路由实例了，可以用$route.mate类似对象操作来拿到路由对象内的信息。前面加$符号代表根实例

路由守卫：全局和局部

全局前置守卫：语法：router.beforeEach((to,from,next)=>{next（）})。 to：去哪里，from：从哪来，next：放行，小括号内也可以写false，代表从哪里来回哪里去。可以用if判断来看是否next放行。小括号还可以放路径，代表主动更改跳转路径，被拦截后直接跳转到这。
后置守卫：afterEach（(to,from)=>{next（）}），这个是已经进入地址后的守卫，一般不用，可以用生命周期写。这个没有next因为已经进去了。
局部守卫：beforeRouteEnter：写在组件内，只守卫当前组件。注意，这里不能获取到this实例。其他两个可以。
beforeRouteUpdate：可以用来在地址后面动态参数：/ 变动的时候触发，

守卫死循环：判断时要注意条件如果是某些网页就放行，其他的拦截，如果直接跳转别的页面，会死循环。
这种死循环

加个验证就行

------------------------------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------------------------

axios：查文档

引入：直接import直接引入，然后通过原型挂上去。Vue.pototype.$axios=axios
跨域解决代码
module.exports = {devServer: {proxy: {’/api’: {/* 目标代理服务器地址 /target: ’
https://api.binstd.com/recipe/search’,/ 允许跨域 */changeOrigin: true,pathRewrite:{^/api:}},},},}
跨域解决方案：用请求代理，需要改webpack配置，创建一个vue.config. js文件，里面devServe（服务器相关配置）内proxy（代理），改这个里面的参数就行，参数：target（目标请求地址）changeOrigin（布尔值，代表是否允许跨域）pathRewrite(把/api开头的变为空)。逻辑：创建了一个中间地址，他帮你访问你想去的地址，这样就解决了跨域问题。我们只需要输入/api就可以当做请求目标地址使用，有多个跨域问题可以写多个请求代理配置

自定义axios实例：单独写个api文件夹内写个js文件，导入axios。然后定义axios实例。用axios.create。

baseURL：基础地址，可以在这配置一个基础路径，这样就会自动配置到每一个请求地址前面，我们只需要写后面的地址就行。可以webpack内地址更改后用/api放在基础地址上。
timeout：请求时间多少秒提示
headers：请求头，携带数据的。可以在里面统一加数据

请求拦截器：

请求前做什么事，比如修改我们请求的参数，让数据添加到请求内，config参数代表请求的数据的参数。

响应拦截器：

响应时对返回的数据做什么处理，可以用来统一修改返回的数据，比如统一添加if或只显示部分之类的。response参数代表请求返回的数据。
响应拦截第一个函数抛出错误和第二个函数抛出错误区别：第一个是代表数据传过去了，但是后端觉得不对返回一个错误信息，第二个代表直接就传不过去会直接提示错误。
两个拦截器错误的通过promise把他抛出去在catch处理。

------------------------------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------------------------

vuex：

创建文件夹store，文件index.js。导入vuex和vue。注册vuex插件
使用：创建实例new vuex.store
state中写内容，每个组件都可以用，
mutations内写方法并接收参数state和payload，用来修改state中变量，和传参。
actions内写异步操作并接收参数context和payload，context和store根实例一样用，但不要在这里修改数据，因为需要这在mutations内被记录。
actions内用：context.commit（“muatations内的方法”，payload参数）
getters类似于计算属性，一样使用，如果需要传参，那需要return函数就可以传

组件调用方法：

组件内import{mapstate，}from"vuex"
这个导入内map代表映射到这个组件的计算属性内，调用语法：…mapstate([“vuex中state的数据名”])，这个代表调用到里面的数据，然后就可以直接使用，比如赋值到组件空变量内，或者直接插值到结构中都可以。另一个写法：…mapstate({
名：state中的数据名，
名：state中的数据名
})，这种写法可以让这个数据名更改一个名字，然后用更改后的名字操作，相当于别名。
后面mutations和actions都同上操作，区别是映射到methods没操作。
当数据复杂后会用到模块。
模块：在modules中定义新的模块，对象形式，内部和根实例写法一样，有state，mutations，actions，getters等
可以单独在store文件夹中创建一个文件夹用来存放模块，每个模块这个js文件，导出模块然后导入总的index.js文件中，在modules中注册一下就行。

本地存储：记录在浏览器的数据，大小限制5mb

小括号内第一个是名字，第二个是值。只能用原始数据类型，如果要用对象，可以用JSON转类型
区别：
sessionStorage.setItem（）：存本地，关闭浏览器后会销毁数据。
loacalStorage.setItem（）：存本地，关闭浏览器后不会销毁数据。
后面加removeItem（名）代表删除数据。clear代表全部删除
document.cookie：存本地，会设置一个过期时间，过期销毁数据。这个会把数据携带发到服务器上，其他两个不会。大小只有4k

json.stringify:转字符串类型

json.parse:解析成对象

用法：创建新的项目后创建小组件，然后写结构样式，写好后export default导出组件，然后在路由里面通过懒加载箭头函数给这个组件加一个路由地址可以跳转。然后路由根实例内声明，export default导出路由。然后去最大的组件app中汇总，利用router-view把路由的视图插入这个位置显示，可以在上面写一写router-link的结构用来作为路由地址跳转不同页面，最后把最大组件app在main.js中vue 的根实例内用render这个渲染出来，用$mount挂载app。同时把路由也router注册在内，一个项目就可以运行了。html不用动

优点：数据和试图分离，dif算法可以让我们几乎不用dom操作，可以直接修改数据可以更改网页元素。可以组件化，每个人可以开发一部分。
new Vue（{}）是根目录，里面的el是挂载点，也就是css选择器
根目录中：
el：挂载点，操作哪一个元素
data：元素内容都写在这里。语法：变量名：值 然后在结构中{{ 变量名 }}就可以直接渲染出来值。后面通过改这个变量就可以直接更改结构内的值。
methods：方法属性，vue所有函数方法都定义在这里，在里面用vue实例中的数据需要前面加this
computed：计算属性，需要计算的可以写在这里，也是写在函数内，注意：一定要return，不然没有值回来，调用就直接标签内容{{函数名}}就可以调用值。
区别methods是性能更高，methods是调用就全部执行，而computed的是依赖的值改变后才计算，不改变就不计算了。
watch：监听属性，只要监听的值变了就执行某些事。也是用函数写，注意函数名不是乱写的，是data内的数据名。也可以监听计算属性内的函数变没变
区别computed：computed（依赖的值发生改变后从新算返回一个值）watch(是做事的，监听的值变了后执行什么事)

组件化：

首先需要注册组件：分全局注册和局部注册
创建Vue.component(“myhead”，{
template：html结构，
其他和根实例里面一样，比如data，methods等，区别是根组件的模板是写在页面结构中，而component的是写在组件内的结构里，
注意组件中的data必须是个函数。函数内要return{名：值}，然后正常插值就可以，和根组件一样使用，区别是只能用在自己小组件的内部结构
})，这种属于全局注册，是都可以调用的。
局部注册：和全局注册类似，区别是全局直接用Vue.component()来写，而局部是var 一个变量，比如变量名tem={template：结构，data等，还是一样}
然后在根组件中加一个关键字components(注册)：{myhead(组件结构名，写在页面内的)：tem(就是小组件的变量名)}。这样就相当于把小组件注册在了根组件内，是局部注册了。可以直接把结构名和组件名写一样， 这样就可以简写，比如直接写个tem就可以了。注意：小组件需要在哪里用就在哪个组件内注册components

父子组件传值：

父传子：想要把父组件内的data内容传入子组件使用，首先在子组件内声明一个props：[ ]或者{}。
注意：父传子的数据要使用需要传参或者加this
在template模板里直接用info，在vue实例里用this.info，和data中的数据用法一样，但是props里的属性如果是字符串是不能更改的
数组：数组内直接写一个参数名，比如info。在子组件的页面标签内：info=“父元素的数据名”。这一步相当于传参数，把父元素的数据传到info内，子组件内的props内info接收到数据，然后子组件内可以使用。
对象：形式同数组一样使用，区别是可以在info后面加string和number，boolean等筛选，就是别人返回的值限定必须是这个类型的，当明确知道别人要传回的值是某一种类型的时候可以规定一下避免出现低级错误，方便未来找错误。
required：true(必填项，不传就报错)
default：100(一般搭配number使用，如果传了数字就是传的值，如果不传就默认100)这个100可以变得不是固定。

子传父：把子组件内容传给父组件用，在子组件的根标签里创建 @自定义事件名=“父组件的函数名”。父组件内的函数：把自定义事件触发的返回一个参数赋值到父组件的内容变量内。子组件函数：this.$emit(“自定义事件名”，this.要传的数据（当做参数传回父组件函数内）)

动态组件：

通过在：is="组件名或者变量"来控制切换组件绑定
is后面跟方法名，计算属性内计算，返回组件名字加数字，多个组件可以命名成比如index1，index2等，只需要改动后面的数字就可以跳转组件，
注意：要组件都引入，都注册。不需要单独定路由

ref:控制单独dom元素

语法类似取名字。在元素上ref=“xxx”, 在方法内可以用this.$refs[xxx]来拿到元素。中括号内写ref的名字拿到对应的

插槽：在组件标签中的内容会渲染到插槽位置

使用：在要加入的位置加，可以添加名字区分开 然后在标签中加v-slot：info。v-slot：info可以缩写成 #info
注意：标签中v-slot能直接加在标签上，要在外面套一个template加在上面才行
vue指令集
v-html:添加标签，写在结构开始标签内，语法：v-html：“变量名”。这个变量名就是data内定义的标签。双引号内是JS环境，可以写表达式，不是字符串的意思，如果要写字符串在加一个单引号就行
v-text：添加文本，和{{变量名}}一样，一般用{{}}就可以了
v-bind：添加属性，语法：v-bind：id=“变量名”。只要想给属性的值加变量的都要加这个，相当于给值加了个JS环境，比如href，id，class，url等，不然直接id="xx"那就是固定的，用CSS里面的样式了。可以缩写v-bind：id直接缩写成：id。
class绑定方法：1，直接：class=“变量名”。2，可以绑定一个对象（对象内true(添加)和false(不添加)） 3，可以绑定一个数组(数组内名字就是class名字，写几个就几个)
style：绑定方法：1，对象绑定，对象内直接写样式用键值对形式(有-的用驼峰式写)。2，绑定一个数组，里面写多个样式对象，[{样式键值对}，{样式键值对}]
v-on：绑定事件，语法：v-on：事件名=“函数名”，也可以缩写成@事件名=“函数名”，这里的函数名可以后面加小括号传参 (参数)，参数也可以直接用vue中的变量。如果不传参，methods内函数写个e那就默认返回事件对象。
鼠标事件修饰符：事件后添加

键盘事件修饰符：在事件后加.enter代表回车后生效

v-model：返回表单的value。语法v-model=“info”。data内写个info：""。需要显示就在标签内容写个{{info}}。可以在v-model.trim (这个trim是修饰符，代表自动去除空格)
v-show：显示隐藏，用布尔值判断是否显示。区别if只是修改样式显示隐藏。适用于频繁转换的地方。
v-if：显示隐藏，同上操作，区别的是会删除添加标签。适用于点击次数少的地方，if还有一个v-else属性，放在另一个标签上，意思是如果true渲染if如果false渲染else。也可以多个选择，用v-else-if来继续判断。
v-for：循环渲染出一个数组或者对象，标签内写v-for=“item in 数组或者对象” 。标签内容写{{item}}渲染出来。如果是对象渲染出的是值，如果要名字也出现，就加个key属性（这个key是形参不是关键词，按位置来的，第二个位置是名字，第三个位置是index角标）。v-for="(item，key) in 数组或者对象" 然后内容{{key}}:{{item}}。
template：容器，包裹的标签，但是解析出来不会出现这个结构。可以用于for。

v-for不要和v-if一起用，因为性能低。可以把if在包裹一下，放在父级里先判断在渲染。因为for比if优先级高，所以会先for渲染出来后再判断要不要隐藏。比如不需要渲染的但是也渲染出来了，这样就浪费性能，解决办法：在for外面再套一个容器，然后写if这样可以先判断要不要隐藏在渲染
diff算法：会对比，如果有的就直接添加或者删除，而不是全部删掉从新写一遍，这样优化性能，速度更快。但有时不想要复用，区分开就要用：key=“xx”
key：用来做标记的，避免vue复用。每个for最好标签再加个key。key的值用变量，保证不能重复的，简单方法用for内的index当标记，但是正常工作中是找后端拿一个不会重复的变量做值，数据库内有一个键列就是这个变量
单独改数组或者对象：需要用vue包装过的方法，其他不行，或者直接。。。拆分写一个新的变
改对象：Vue.set(this.obj，“属性名”，“值”)
改数组：Vue.set(this.arr，角标，“值”)
双向绑定：v-model用于表单的。默认绑定到表单的value。
单选框：v-model绑定的是布尔值。
多选框：v-model绑定的是值的数组。