语法

描述

new Vue({

//绑定需要控制的元素

el:”选择器”,

data(){

return {

变量1名:变量1值,

变量2名:变量3值,

…

}

},

computed:{

计算属性名1(){

return data中相关数据的表达式

},

计算属性名2(){

return data中相关数据的表达式

}

},

methods:{

方法1名(){

//方法1体

},

方法2名(){

//方法2体

}

}

})

el后面为需要控制的元素选择器

data函数return后面为一个对象，对象里面存着我们插值表达式【{{变量名}}】需要插入的变量名。【data中的变量也叫普通属性】

computed计算属性,用法和data中的变量使用用法一致【{{计算属性名}}】，但计算属性的本质是函数，函数内部要使用data中的数据，还是需要使用this.变量名的方式，data中相关数据的表达式的返回值会给到我们的计算属性名上面，所以我们可以直接使用插值表达式来插入计算属性，用法和data中变量的用法一致。其他计算属性也可以相互使用这个返回值，用法也和data中的变量一致，this.计算属性名的方式在js代码中使用。{{计算属性名}}的方式在html结构内容中使用

methods配置后面为一个对象，对象中存放着我们需要使用的方法列表，方法体需要使用data中的变量，通过this.变量名的方式使用【操作数据后，视图会跟着数据变化，数据驱动视图，所以我们不用关注视图层。】

语法

描述

{{数据变量}}

数据变量是vue实例对象的data方法的返回值中的对象中的属性名，最终返回结果

{{表达式}}

表达式可以包含数据变量、操作数的任意排列组合。最终将表达式的结果渲染到页面上。

语法

描述

v-on:事件类型=”要执行的少量js代码”

只有一句赋值表达式时可以使用

v-on:事件类型=”methods中的函数名”

当有多行语句，可以使用函数封装起来，如果函数不需要传递参数使用该语法

v-on:事件类型=”methods中的函数名(实参)”

当有多行语句，可以使用函数封装起来，如果函数需要传递参数使用该语法

简化语法

描述

@事件类型=”要执行的少量js代码”

v-on：的简写为@，这里为简写

@事件类型=”methods中的函数名”

@事件类型=”methods中的函数名(实参)”

事件类型

描述

click

点击事件

keyup

键盘抬起事件

keydown

键盘按下事件

语法

描述

<标签名 @事件类型=”目标函数”>

目标函数中的形参在方法体内为事件对象

<标签名 @事件类型=”目标函数(参数列表,$event)”>

目标函数$event实参对应的方法形参在方法体内为事件对象

语法

描述

<标签名 @事件类型.事件修饰符= ”目标函数”>

目标函数中的形参在方法体内为事件对象

<标签名 @事件类型.事件修饰符= ”目标函数(参数列表)”>

目标函数$event实参对应的方法形参在方法体内为事件对象

修饰符

描述

.prevent

阻止默认行为【a标签的默认跳转,button默认提交跳转】

.stop

阻止冒泡【点击自己只会触发自己的事件，父元素事件不会触发】

.once

事件只会绑定一次【事件触发完后就解绑了】

.self

事件只能由自身触发，无法由冒泡触发【点击子元素的事件自己的事件不会被触发，但子元素的事件会被触发】

修饰符

描述

.enter

enter回车触发

.键盘的键名

键盘对应键触发

.space

空格触发

.esc

按esc触发

.键盘的键名1.键盘的键名2

只要是对应键名都可以触发

语法

描述

<标签名 v-bind:标签属性名=’数据’></标签名>

这里的数据为data配置方法中的变量名，会将该变量名对应的变量值赋值给该标签属性名的属性值中。

简写语法

描述

<标签名 :标签属性名=’数据’></标签名>

这里的数据为data配置方法中的变量名，会将该变量名对应的变量值赋值给该属性。

语法

描述

<表单元素 v-model=’数据’/>

数据为data方法配置中的变量，这样我们修改该表单元素的value值时，数据的修改会更新到data对应的变量值的修改。data中对应变量的修改也会更新表单元素value值

语法

描述

<标签名 v-if=’布尔值’>内容</标签名>

布尔值true创建该元素，布尔值为false销毁该元素

布尔值位置可以是表达式，也可以是字面量，还可以是变量，他们会将计算的结果进行布尔转换。

<标签名 v-if=’data中的变量名’>内容</标签名>

data配置函数中的变量名，变量的值为true或其他非false数据显示【创建】该标签；变量值为false，隐藏【销毁】该标签

语法

描述

<标签1 v-if=’条件1’>内容</标签1>

<标签2 v-else-if=’条件2’>内容</标签2>

<标签3 v-else -if=’条件3’>内容</标签3>

…

<标签4 v-else=’条件4’>内容</标签3>

默认条件中的字符为data中的变量，选择第一个满足条件的元素并创建该标签元素渲染到页面上。【其他的分支元素不会被创建】,都不满足条件则将最后一个标签元素创建并渲染到页面上。

语法

描述

<标签名 v-show=’布尔值’>

布尔值true显示该元素，布尔值为false隐藏该元素

<标签名 v-show=’data中的变量名’>

data配置函数中的变量名，变量的值为true或其他非false数据显示该标签；变量值为false，隐藏该标签

v-if

v-show

通过操作dom树的添加和移除来控制显示和隐藏【也就会不断的创建和销魂元素】

通过操作行内样式的display属性来控制标签的显示和隐藏

v-if是惰性的，或者说是懒加载。意思是如果默认为false,压根不会渲染它，只要当为true才会去渲染

v-show不管是true还是false,它默认都会在dom树上【也就是默认就会创建】

语法

描述

<标签名 v-text=’data中变量名’>内容</标签名>

将标签的内容替换为data中变量名保存的数据【内容写上也会无效，数据中的标签无法解析，会直接渲染所有内容包括标签到页面上。】

语法

描述

<标签名 v-html=’data中变量名’>内容</标签名>

将标签的内容替换为data中变量名保存的数据【数据中的标签可以被解析，只会将标签以外的内容渲染到页面上】

完整语法

描述

<标签名 v-for=’(数据项变量,索引变量) in 目标数组’>内容</标签名>

数据项变量【拿到数组的每一项】一般写item、value、v

索引变量一般写：index、idx、i

语法

描述

<标签名 v-for=’数据项变量 in 目标数组’>内容</标签名>

完整语法

描述

<标签名 v-for=’(属性值变量,属性名变量) in 目标对象’ :key=”唯一id变量”>内容</标签名>

目标对象有多少个属性就会动态创建多少个当前标签元素

属性值变量一般使用：value、val、v

属性名变量一般使用：key、k

内容可以包含插值表达式，插值表达式里面可以有属性值变量，也可以使用data中的变量

常见语法

描述

<标签名 v-for=’属性值变量 in 目标对象’ :key=”唯一id变量”>内容</标签名>

属性值变量一般使用value

目标标签元素内部的子元素的插值表达式中可以使用目标标签元素标签内定义的变量【比如v-for后面的属性值变量】，也可以使用data中定义的变量。

语法

描述

<标签名 v-for=’num in 目标数字’>内容</标签名>

num为变量名，变量名可以更改，且变量的初始值为数字1【内容中也可以使用插值表达式插入num变量相关表达式。】

动态创建目标数字个标签元素

语法

描述

<标签名 :style=”{小驼峰样式属性1:data中变量1名,小驼峰样式属性2:data中变量2名}”>内容</标签名>

动态style中小驼峰样式属性和css样式基本一致，只不过将多个单词用-连接符连接的样式属性改为了小驼峰样式属性。属性写法固定，属性值为data中的变量【当小驼峰样式属性名和data中变量名一样时，这里可以简写一个小驼峰样式属性名】【data中变量名保存的值需要为css样式属性匹配的值】

语法

描述

<标签名 :class=”{类名:布尔值}”>内容</标签名>

布尔值位置可以是返回值为布尔值的条件表达式，也可以是变量值为布尔值的变量名,还可以是其他字面量

语法

描述

<表单元素标签 v-model.v-model修饰符=’data中的变量’/>

修饰符根据业务需求设置。这里只能使用data中的变量【且该变量不能为除了字符串之外的其他基本数据类型。】

修饰符

描述

.trim

去掉表单元素输入框首尾的空格

.number

将输入的内容转为数值类型【能转多少转多少，一个都转不了就是输入的值】【默认情况下，输入的内容拿到的都是字符串，如果做相加会变成拼接，所以可以用这个修饰符转成数字】

.lazy

不会边输入边将数据更新【默认情况下，输入框一边输入我们值就会跟着变化】，会等我们将所有数据输入完了，表单失去焦点或者键盘按下回车键才会提交数据来更新数据和视图。

语法

描述

git clone ‘克隆地址’

第一次克隆项目的命令

git pull

后续进入克隆好的项目，在.git平级处打开git bash命令行输入git pull即可更新最新代码

步骤

过程

1

powershell命令行输入set-executionpolicy remotesigned

2

输入y

简写语法

描述

computed:{

计算属性名(){

return 表达式

}

}

computed计算属性需要和data、methods平级的位置使用。

在js代码中无法对简写的计算属性进行修改

表达式为其他计算属性或者普通属性计算的返回值【js中使用属性需要使用this.属性名，即return后面的表达式需要有this.属性名】

完整语法

描述

computed:{

计算属性名:{

get(){

return 表达式

},

set(形参){

//形参为计算属性，这里可以修//改计算属性的值。

}

}

}

computed计算属性需要和data、methods平级的位置使用。

语法

描述

复选框中的自定义选中属性(){

get(){

return this.依赖数据数组.every(v=>{

return v.依赖属性 == 状态依赖属性值

})

}

},

set(val){

this.依赖数据数组.forEach(v=>{

//将计算属性的属性值给对应的依赖项

v=>v.依赖属性=val

})

}

}

因为复选框的选中状态依赖于数组的每一项，所以可以通过计算属性来设置复选框的选中状态。【复选框需要有v-model属性，v-model属性对应的属性值就为该计算属性，这样就可以根据计算属性的取值设置好复选框的状态。】

语法

描述

目标数组名.every((item,index)=>return item相关条件表达式)

返回值为布尔值

item为目标数组的每次循环的数组项

如果所有每次循环返回值都为true则整体返回值为true，否则返回false

语法

描述

目标数组名.some((item,index)=>return item相关条件表达式)

返回值为布尔值

item为目标数组的每次循环的数组项

如果所有每次循环返回值都为false则整体返回值为false，否则返回true

语法

描述

computed:{

计算属性名(){

return this.数组名.reduce((总计变量,数组每一项变量)=>总计变量+=数组每一项变量.需要计算的对象属性,0)

}

}

这种方式可以计算得到对象数组中单个属性的所有属性值之和，后续可以直接使用插值表达式插入该计算属性即可。

语法

描述

watch：{

//参数1为修改后的新值

//参数2为修改前的旧值

要侦听的数据(新数据,老数据){

//逻辑代码

}

}

watch配置需要和data、methods这些同级位置。

要侦听的数据为普通属性【data中的数据变量】或计算属性【computed计算属性中的方法名】。只要要侦听的数据发生改变【简单数据类型数据】，逻辑代码就会执行。

语法

描述

watch：{

“需要侦听的目标对象名.属性名”(){

//逻辑代码

}

}

目标对象名的该属性名对应的属性值发生改变时执行逻辑代码

第一个参数为改变后的侦听数据，第二个参数为改变前的侦听数据

语法

描述

watch：{

需要侦听的目标对象名:{

//开启深度侦听

deep:true,

//当对象里任意属性改变，都会触发handler这个函数

handler(){

//逻辑代码

},

//会立即执行一次

inmediate:true

}

watch配置需要和data、methods这些同级位置。

要侦听的数据为普通属性【data中的数据变量】或计算属性【computed计算属性中的方法名】。只要要侦听的数据发生改变【对象数据】，逻辑代码就会执行。

侦听数据是惰性的，当我们连续触发事件，修改侦听数据的变化，侦听器里面的逻辑是不会立即执行的，会等我们没有连续触发该事件时才会执行，加了immediate属性后，打开页面就会执行一次。

语法

描述

watch：{

数组名(新数组,老数组){

//逻辑代码

}

}

watch配置需要和data、methods这些同级位置。

要侦听的数据为普通属性【data中的数组数据变量】。只要要侦听的数据是通过push、pop、shift、unshift、splice、sort、reverse发生改变【数组数据】，逻辑代码就会执行。【能够改变数组自身的方法都是能被侦听到的】【因为vue对数组一些方法进行了重新包裹，所以我们能监听到】

不能触发界面跟新的情况

不能触发默认侦听器的情况

通过下标把数组元素【该数组元素是简单数据类型】修改了

修改对象里的属性

给对象添加新的属性

修改数组的数据项

语法

描述

<template>

  <根标签 class="类名">

其他html结构

  </根标签>

</template>

<script>

export default {

  name: "当前文件名",

  props: [父组件传递过来的变量列表],

  methods: {

    相关事件方法,

  },

};

</script>

<style scoped>

/* 默认样式是所有文件都可以用，加完scoped后，代表这些样式只能在本文件 */

//相关css样式代码

</style>

template标签内部写我们需要的组件结构【写html的地方】

<script>

//js代码和引入其他组件的地方

export default{

//相关配置项

}

</script>

<style scoped>

//css样式代码部分

</style>

作用

描述

Vscode默认是不认识.vue文件的

下载该插件后就不会有错误提示

提供少量而且又常用的代码段

该插件必备

步骤

过程

1

在项目文件夹打开cmd

2

命令行输入npm run 脚本服务名【npm run serve】

3

这样服务器会去找到我们的入口文件main.js【main.js实例化Vue后面调用的$mount的作用类似之前的el,代表找到某个容器交给Vue管理】

4

main.js文件是自动生成好的【里面的new Vue()实例化的过程会自动的去找到我们public/index.html文件,并将找到里面为id选择器为app的div容器，交给Vue管理；最后导入App.vue组件，并把这个组件替换渲染到找到的容器】

文件夹或文件完整路径

描述

node_modules

第三方包文件夹-里面有项目下载的包

public/favicon.ico

网站默认图标

public/index.html

网站的html文件，你看到的页面，本质上是这个html文件

src

源代码文件夹

src/main.js

入口文件->项目运行后运行的第一个文件

src/assets

静态资源文件夹，放图片、字体图标等文件夹

src/components

组件文件夹，放全局组件的位置【该文件夹下面放我们App.vue组件需要用到的组件】

src/app.vue

主组件->我们页面上看到的内容其实都在App.vue里写的

.gitignore

配置让git忽略的文件或者文件夹

babel.config.js

babel这个插件的配置文件【babel可以做语法降级等功能，解决浏览器兼容性】【真正转换的是babel.js这个插件】

jsconfig.json

Js核心语法的配置文件

package.json

项目配置文件，里面有项目名、版本号、作者等。以及快捷命令，下载的依赖包的包名和版本号

README.md

项目说明文件，可以对项目做介绍

vue.config.js

脚手架的配置文件

yarn.lock

表示是用yarn包管理工具管理的项目

package.lock.json

表示用npm包管理工具管理的项目

脚手架可以帮我们快速搭建好一个项目的骨架，可是我代码可能会在电脑中的任何位置，所以这种包最好装成全局包

我们以前写less文件，浏览器不认识，但是通过webpack里的less-loader，可以在打包时把less文件打包成css文件，所以浏览器可以运行了

浏览器不认识vue文件，所以也可以通过webpack里的vue-loader，在打包时把vue文件打包成浏览器认识的html、css、js文件

但是webpack搭建项目比较麻烦，自己还要下载多个插件和loader，然后做对应的一些配置，才能够正常运行和打包

所以在想有没有一个东西，能实现webpack解析vue文件的功能，而且还不用我们自己做过多的配置，有，他就是vue-cli，也俗称脚手架

脚手架最主要的功能就是实现了webpack的功能，但还不用我们做过多的配置。

语法

描述

npm i @vue/cli -g

全局安装脚手架，命令行输入该代码，以后可以直接使用vue create 项目名创建项目

语法

描述

vue -V

小黑窗输入该命令，返回版本号代表安装成功

语法

描述

npm update @vue/cli -g

小黑窗输入该命令，可以升级我们的脚手架

语法

描述

vue create 项目名

来到一个没有vue.js的文件夹上，打开下黑窗，输入该命令

语法

描述

npm run serve

进入创建好的项目文件夹并打开小黑窗输入该命令即可运行项目【用npm创建的项目使用该命令】

yarn serve

进入创建好的项目文件夹并打开小黑窗输入该命令即可运行项目【用yarn创建的项目使用该命令】

规则

名字不能时关键字，只能是字母、数字、下划线组成、并且数字不能开头

规范

起名要有意义【见名知意】

要遵守驼峰命名

规则

变量声明了必须使用【声明变量后但没有使用，本质上不会报错，但是如果你装了eslint就报错了->脚手架创建的项目默认装了eslint：报错原因是它觉得你写了不规范的代码】

v-for创建元素必须加key属性

语法

描述

<标签名 v-for=”变量名 in 对象名” :key=’唯一值’></标签名>

唯一值为一个变量，变量对应的变量值只能是字符串和数值类型数据。

步骤

过程

1

下载vue脚手架npm i @vue/cli -g

2

在存放项目的文件夹打开小黑窗

3

在小黑窗输入vue create 项目名

4

进入项目文件夹，找到package.json文件的scripts节点

5

在项目名文件夹另开一个小黑窗

6

输入npm run serve【可以将项目跑起来,用的yarn就用yarn serve跑】

7

4，5，6没问题可以开始改我们的代码

8

将项目名文件夹拖到我们的vscode里面【vscode只开一个项目】

9

在src->components文件夹下面创建我们的组件【组件都是.vue结尾的文件】

10

在<template>标签下面写一个根标签，根标签下面写我们需要的标签结构；<style>标签内部写组件的css代码【这个css代码默认是所有的组件共用的，很容易发生样式覆盖，如果需要让该css样式只在当前文件有效，需要给style标签添加scoped属性。】；script标签内部的先导入我们需要使用的组件import 目标组件名 from “另一个需要导入的组件路径/组件名.vue” 下方的export default {}对象内部写name属性，属性值为文件名【便于检索文件】，components配置对象属性用于导入我们需要的组件【对象中的变量列表就是我们的目标组件名】

11

当前组件使用目标组件时时只需要使用<目标组件名></目标组件名>【目标组件名可以使用原组件名，也可以使用小写字母，但多个单词用-分隔】【多个单词小写且用-连接是h5的规范】【建议拆分】

<template>

  <div id="app">

//1.3使用组件

  <my-header></my-header>

  </div>

</template>

<script>

//1.1导入组件

import MyHeader from './components/MyHeader.vue'

export default {

  name: 'App',

//1.2注册组件，这里是es6简写，属性名和变量名一致，简写属性名

  components: {

    MyHeader,

  }

}

</script>

<style scoped>

/* 默认样式是所有文件都可以用，加完scoped后，代表这些样式只能在本文件 */

</style>

语法

描述

//main.js中导入组件

import 组件名 from ‘组件路径/组件名.vue’

//将组件注册为全局组件

Vue.component(‘使用组件名’,组件名)

main.js中写入该代码后就注册为全局组件了

以后在其他组件中就可以直接使用<使用组件名/>的方式在不同组件中导入该组件了【不必反复注册组件】

语法

描述

export default {

name:’组件名’

}

在export default{}中配置name属性，属性值就为组件名，以后在开发调试工具中就可以快速找到想要的组件了【建议name属性值为组件名方便查找组件】

数组方式父传子语法

描述

<template>

 <div class="类名">

  <标签1名>内容{{ 自定义使用子组件属性1名}}</标签1名>

  <标签2名>内容{{自定义使用子组件属性2名}}</标签3名>

…

</div>

</template>

export default {

 name: "当前文件名",

 props:["自定义使用子组件属性1名","自定义使用子组件属性2名",…],

  methods: {

方法名() {

//可以获取父组件属性名对应的数据

      console.log(this.父组件属性名);

    },

  },

};

<style scoped>

/* 默认样式是所有文件都可以用，加完scoped后，代表这些样式只能在本文件 */

.目标类名 {

  //相关样式

}

</style>

将父组件中自定义使用子组件属性名对应的属性值作为普通属性传递过来给子组件【子组件html中使用父组件中的数据，需要通过自定义使用子组件那个桥梁。需要用{{自定义使用子组件属性名}}；子组件js中使用父组件数据：需要使用this.自定义使用本组件标签名中的属性名的方式将父组件内部的数据传递过来，或者传递一个写死的值也可】

props配置为子组件中的配置。属性值中写所有父组件传递过来的属性名变量【可以是数组列表,也可以是对象列表。推荐使用对象列表:因为对象可以写必传属性。而且可以控制传值类型，还可以设置默认值。】

写数组形式,父组件可以传可以不传，而且没有默认值。

对象方式父传子语法【推荐方式】

描述

<template>

 <div class="类名">

  <标签1名>内容{{自定义使用子组件属性1名}}</标签1名>

  <标签2名>内容{{自定义使用子组件属性2名}}</标签3名>

…

</div>

</template>

export default {

  name: "当前文件名",

  props: {

父组件中自定义使用子组件属性1名:{

//开启必传模式

required:true

},

父组件中自定义使用子组件属性2名:{

default:’默认值’

},

…

},

  methods: {

    cut() {

      console.log(this.title);

    },

  },

};

<style scoped>

/* 默认样式是所有文件都可以用，加完scoped后，代表这些样式只能在本文件 */

.目标类名 {

  //相关样式

}

</style>

将自定义使用本组件标签名内部的属性名对应的属性值作为普通属性传递过来给子组件【子组件html中使用父组件属性值数据需要用{{自定义使用子组件属性1名}}；子组件js中使用父组件属性值数据需要使用this. 自定义使用本组件标签名中的属性名】

props配置属性值中写所有父组件传递过来的属性名变量【可以是数组列表，也可以是对象列表。推荐使用对象列表：因为对象可以】

required:true开启必传模式

必传模式的意思就是父组件必须有该父组件目标属性名【父组件使用子组件的桥梁，桥梁必须拥有子元素required为true的属性名】

props使用对象的形式开启必传模式也可以叫做校验，也称之为props的校验

当默认值为数组或对象时，必须从一个工厂函数获取

代码

描述

<template>

  <div>

    <!-- 组件 -->

    <自定义使用子组件名 :属性1名=”数据” :属性2名=”数据” />

  </div>

</template>

<script>

// 导入组件

import 子组件名 from "子组件路径/子组件名.vue";

export default {

  // 注册组件

  components: {

    子组件名,

  },

  methods: {

};

</script>

<style></style>

子组件props内部定义了自定义使用子组件名在这里使用时必须要有的属性名，并且通过这个属性名将数据传递给子组件使用

自定义使用子组件名也支持v-for动态创建对应的使用子组件标签。【就相当于复用多少次子组件的内容。】

语法

描述

props:{

要接收的数据名:{

//必传

required:true

//限制为某种类型

type：类型

}

}

类型有

1.Array：限制为数组

2.Object：限制为对象

3.Function：限制为函数

4.Number：限制为数值

5.String：限制为字符串

6.Boolean：限制为布尔值

语法

描述

<目标标签名 @事件类型=”目标方法名”>内容<目标标签名/>

子组件的这个标签触发事件时，会在子组件中去找目标方法名

methods:{

目标方法名(){

//使用子组件的自定义目标自定义事件名一定会触发，所以会直接执行父组件中对应的方法。

this.$emit(“父组件中 目标自定义事件名”,传递给父组件方法的参数列表)

}

}

参数列表的数据如果为父组件传递过来的数据，此时需要使用this.自定义使用组件标签名的行内属性名，

这句代码会通知父组件中的桥梁，让他在桥梁中找到@目标自定义事件名的属性

如果桥梁【子组件标签】中@目标自定义事件名的属性值为方法名变量，就会在父组件内去执行该方法，在该方法中就可以修改父元素自己内部的数据了。

如果桥梁【子组件标签】中@目标自定义事件名的属性值为行内js，则在行内js中$event表示参数列表的第一个参数。

语法

描述

<目标标签名 @目标自定义事件名=”目标事件方法名” />

子组件只要通知了，桥梁就会去该目标自定义事件名，父组件就会在methods配置中去执行目标事件方法名对应的方法。

methods:{

目标事件方法名(子组件传递过来的参数列表){

//逻辑代码

}

}

子组件代码

<template>

  <div class="product">

    <h3>标题：{{ title }}</h3>

    <p>价格:{{ price }}</p>

    <p>描述: {{ desc }}</p>

    <button @click="cut">点击</button>

  </div>

</template>

<script>

export default {

  name: "MyHeader",

  props: {

    title: {

      required: true,

    },

    price: {

      required: true,

    },

    desc: {

      //设置没有描述的描述默认值

      default: "好好吃",

    },

  },

  methods: {

    cut() {

      console.log(this.title);

      this.$emit("changePrice", 2, this.title);

    },

  },

};

</script>

<style scoped>

/* 默认样式是所有文件都可以用，加完scoped后，代表这些样式只能在本文件 */

.product {

  width: 400px;

  border: 3px solid #000;

  border-radius: 5px;

  margin: 10px;

  padding: 0 20px;

}

</style>

父组件代码

<template>

  <div id="app">

    <my-header

      v-for="k in list"

      :key="k.id"

      :title="k.title"

      :desc="k.desc"

      :price="k.price"

      @changePrice="chang"

    ></my-header>

  </div>

</template>

<script>

import MyHeader from "./components/MyHeader.vue";

export default {

  name: "App",

  components: {

    MyHeader,

  },

  data() {

    return {

      a: null,

      list: [

        { id: 1, title: "隆江猪脚饭", price: 20, desc: "隆江" },

        { id: 2, title: "鱼生", price: 30, desc: "四川" },

        { id: 3, title: "椰子鸡", price: 25, desc: "重庆" },

        { id: 4, title: "火锅", price: 100, desc: "重庆" },

        { id: 5, title: "烤肉", price: 80, desc: "广东" },

        { id: 6, title: "果条牛肉汤", price: 35, desc: "湖南" },

      ],

    };

  },

  methods: {

    chang(a, b) {

      //a,b就是子组件$emit("changePrice",2,this.title)后面两个参数

      console.log(a, b);

    },

  },

};

</script>

<style></style>

类型

描述

输入框

v-model用在input输入框，生成的是:value=’数据变量’ 以及@input=’数据变量=$event.target.value’

v-model用在input输入框时，也是可以监听change事件的，只不过要加修饰符.lazy。相当于它的原理监听的就不是input事件了，而是change事件，因为对于change事件而言，就是要按回车或者失去焦点才代表输入完了

下拉框

v-model用在下拉框，生成的是:value=”数据” 以及@change=“数据=$event.target.value”

多选框

v-model用在多选框，生成的是:checked=“数据变量” 以及@change=”数据变量=$event.target.checked”

template标签结构

描述

<按钮标签名 @事件类型=’事件处理函数名’>内容</按钮标签名>

该按钮的事件触发时，执行该组件内methods配置内的事件处理函数名的方法

<目标标签 ref=’自定义目标元素名’ >内容</目标标签>

给标签添加ref属性，以后在方法中需要找到该元素时可以通过this.$refs.自定义目标元素名的方式找到该元素

methods:{

事件处理函数名(){

this.$refs.自定义目标元素名

}

}

this.$refs.自定义目标元素名这句代码可以找到当前组件内具有ref属性且属性值为自定义目标元素名的的元素，可以给该元素做其他逻辑操作。

语法

描述

this.$refs.自定义子组件对象名.子组件中的属性=修改后的值。

会找到ref标记的组件，并直接可以获取子组件中的属性和方法

语法1

描述

this.$nextTick(()=>{

//这里的代码一定是下次dom更新后调用的

this.$refs.refs对应的ref绑定的元素名相关逻辑

})

回调函数写法，也推荐，页面dom更新完后执行回调函数。且返回值为undefined。

语法2

描述

async function (){

await this.$nextTick()

this.$refs.refs对应的ref绑定的元素名相关逻辑

}

异步函数写法，推荐写法await this.$nextTick()表示等页面更新完毕再执行后面的代码。

语法3

描述

this.$nextTick()

.then(()=>{

this.$refs.refs对应的ref绑定的元素名相关逻辑

})

Promise写法，不推荐

语法

描述

directives: {

指令名:{

//当指令绑定的元素插入到dom时调用

//第一个参数el表示指令绑定的元素对象

//第二个参数表示指令绑定元素的渲染时相关信息

inserted(el,binding){

//逻辑代码

},

//第一个参数el表示指令绑定的元素

//第二个参数表示指令绑定元素更新后的相关信息

update(el,binding){

//逻辑代码

}

}

}

directives指令需要和data这些配置平级

最重要的就是第二个参数的value属性,获取的是绑定数据的值，在inserted方法中表示原来的数据，在update方法中表示更新后的数据。

简写语法

描述

directives: {

//第一个参数el表示指令绑定的元素

//第二个参数表示指令绑定元素更新后的相关信息

指令名(el,binding){

//逻辑代码

}

}

当inserted方法和update方法逻辑代码一致时，可以这样简写。

语法1

描述

Vue.directive(“指令名”,{

//当指令绑定的元素插入到dom时调用

//第一个参数el表示指令绑定的元素对象

//第二个参数表示指令绑定元素的渲染时相关信息

inserted(el,binding){

//逻辑代码

},

//第一个参数el表示指令绑定的元素

//第二个参数表示指令绑定元素更新后的相关信息

update(el,binding){

//逻辑代码

}

})

全局写在main.js中

语法2【简写】

描述

Vue.directive(“指令名”, (el,binding) =>{

//逻辑代码

}

)

第一个参数el表示指令绑定的元素

第二个参数binding表示指令绑定元素更新后的相关信息

语法

描述

<slot name=’目标插槽名’>默认内容</slot>

子组件中写插槽位置，这句代码写在组件标签内，用于插入需要扩充html结构的地方【创建一个名字为目标插槽名的插槽】

如果你传了html结构就显示你传的html结构，没传就显示默认内容。

<组件名>

<template v-slot:目标插槽名>

插入的html结构

</template>

</组件名>

父组件中注册组件后，使用该组件就可以将插入的html结构放到对应的插槽中【复用组件时可以插入不同的html结构使得页面更加丰富】【组件名标签内的template标签没有任何意义，只是用于包裹需要插入的html结构】

找到目标插槽名字变量的插槽，并将html结构放到插槽内。

v-solt:可以简写为#

或者将v-slot改为slot=”目标插槽名”【这种方式可以放在任何标签上，但v-slot:目标插槽名只能放在temple标签上。】

语法

描述

<slot>默认内容</slot>

子组件中写

<组件名>

没有被v-sort包裹的html结构

</组件名>

父组件中使用子组件的时候，里面嵌套的内容会放在插槽中，有v-sort绑定的html结构会放到对应的具名插槽中，没有v-sort绑定的html结构会放到默认插槽中。

语法

描述

<slot :自定义暴露变量名=’子组件data中数据’></slot>

slot标签为子组件的插槽，solt标签中的自定义暴露变量名在使用子组件时可以在内部填充【默认插槽】

<slot name=’自定义插槽名’ :自定义暴露变量名=’子组件data中数据’></slot>

子组件中的具名插槽

语法

描述

<template v-slot=”自定义对象名”>嵌套的html结构</template>

自定义对象名保存的是子组件插槽暴露出来的数据,属性名为子组件插槽自定义暴露变量名,属性值为自定义暴露变量名在插槽属性中对应的属性值数据。【默认插槽】

<template #插槽名=”自定义对象名”>嵌套的html结构</template>

同上【具名插槽】

语法

描述

npm i less less-loader

如果项目是npm管理的,就在项目文件夹打开小黑窗输入该命令

yarn add less less-loader

如果项目是yarn管理的,就在项目文件夹打开小黑窗输入该命令

语法

描述

<style lang=’less’ scoped>

/*

lang=”less”代表用less写样式

scoped代表当前样式只作用于当前页面

*/

</style>

使用lang=”less”后，里面的代码就可以使用less语法编写了。

组件语法

描述

<子组件 v-model=’数据变量’/>

等价于

<子组件 :value=’数据变量’ @input=”数据变量=$event” />

可以理解为

父组件暴露了value属性给子组件内部可以直接使用，子组件只要调用this.$emit(‘input’,参数)，就可以修改父组件暴露出去的变量值

表单元素语法

描述

<input v-model=’数据变量’/>

等价于

<input :value=’数据变量’ @input=’数据变量=$event.target.value’

复用

描述

v-if v-else if条件分支创建的元素

只会创建一次，条件改变，显示对应的元素，但不会销毁以前分支的元素，而是在以前元素的基础上，改掉类名和内容而已

标签类型相同，就不会销毁，而是直接复用，把类名和文字变成需要的即可

标签类型不同，就会销毁，重新创建新标签。

语法

描述

beforeCreate(){

}

写在和data和methods同级，初始化前调用，还无法访问到数据和方法，一般不用，除非以后做SSR【服务端渲染】的项目

created(){

}

数据注入后调用,页面就可以根据数据来创建dom元素了。初始化后【创建后】，最早能访问到数据和方法的地方【用得多，因为可以在这个钩子里做数据得初始化，准备页面初始数据】

语法

描述

beforeMount(){

}

挂载前【渲染前】准备渲染【还无法访问到真实DOM里面的数据】

mounted(){

}

挂载后【渲染后】，最早能访问到真实dom的钩子

语法

描述

beforeUpdate(){

}

跟新前的钩子，仅仅只是数据改变就立即调用的钩子，dom未跟新【数据没有在页面上跟新】

update(){

}

更新后的钩子，当数据发生改变，而且dom得到更新【数据已经在页面上跟新】调用的钩子

语法

描述

beforeDestroy(){

}

destroy(){

}

钩子名

钩子特点

beforeCreate

最早的钩子，但是一般不用

created

最早能访问数据的钩子，用来做数据初始化准备，一般发送请求写在这里，包括开定时器【动态根据数据创建dom元素的初始化请求数据写在这】

beforeMount

渲染前，没什么用，还无法访问真实dom，一般不用

mounted

最早能访问到真实dom的钩子，可以用来做需要依赖dom的一些初始化，例如echarts

beforeUpdate

跟新前，数据发生改变，但是还没更新，一般不用

updated

更新后，数据发生改变，而且dom跟新了，一般不用

beforeDestroy

销毁前，还能访问子组件，可以在这里做一些回收工作【回收vue之外的东西】，例如停止定时器

destroyed

销毁后，不能访问子组件，可以在这里做一些回收工作【回收vue之外的东西】，例如停止定时器

以前的写法

描述

<组件1名 v-if=” 数据变量==’组件1名’ ”/>

<组件2名 v-else-if=” 数据变量==’组件2名’ ”/>

<组件3名 v-else=” 数据变量==’组件3名’ ”/>

v-if确定 数据变量确定显示哪个组件

动态组件语法

描述

<component :is=”组件名变量” />

当组件名变量为哪个组件名，就切换哪个组件

语法

描述

<keep-alive>

//要缓存的组件

<子组件名 />

</ keep-alive>

加了缓存它会多两个另外的钩子

activated:当子组件显示时调用

deactivated：当子组件隐藏时调用【隐藏说明以前的数据还在】

加了缓存，该组件的create钩子执行一次后就会失效【创建组件后缓存起来，没有被销毁】，beforeDestroy和destroyed钩子会失效

语法

描述

vue create 项目名

在项目文件夹里进入小黑窗并输入该代码会创建一个vue项目

语法

描述

vue add router

进入项目文件夹并打开小黑窗输入该命令，他会帮我们自动下载vue-router这个插件，帮我们把路由的基本代码写好，并在项目的src源文件下面里创建了一个views的文件夹并在创建好的views文件夹下面创建一个index.js文件，并导入基本代码。【会自动根据我们的vue版本下载对应的路由】

语法

描述

import Vue from 'vue'

import VueRouter from 'vue-router'

导入Vue和路由

语法

描述

Vue.use(VueRouter)

安装路由

语法

描述

import 路由组件名 from '路由组件路径'

用于路由规则中的跳转使用

语法

描述

const routers = [

{

name:’自定义名’,

path:’/资源路径’,

component:路由组件名

}

]

网址的 资源路径处输入path后面的资源路径就会在路由出口处显示路由组件名对应的路由组件

一级路由就是一个完整的页面所在处

二级路由对应的组件会显示在一级路由对应的组件的页面上【页面某个区域的元素更新可以使用路由嵌套】

语法

描述

const routers = [

{

name:’自定义名’,

path:’/资源路径’,

components:{

自定义1视图名:路由1组件名,

自定义2视图名:路由2组件名,

…

}

},

…

]

在显示当前路由组件的地方使用

<router-view name=”自定义1视图名”>

<router-view name=”自定义2视图名”>

这种方式可以将多个组件在同一个页面显示

语法

描述

const router= new VueRouter({routes})

routers就是13.6 的路由规则

router是我们实例化的路由对象

语法

描述

export default router

将路由实例化对象暴露出去

语法

描述

import Vue from 'vue'

import App from './App.vue'

import router from './router'

将路由index.js文件导入进来

导入暴露的路由对象router

语法

描述

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

将路由实例化对象挂载到Vue实例对象上【只有挂载了，每个组件才具有路由的功能】

语法

描述

<router-view />

需要显示路由组件的页面添加

步骤

描述

1

在src下准备一个router文件夹，里面放index.js

2

导入vue

3

导入路由

4

安装路由

5

导入组件

6

创建路由规则

7

创建路由对象并使用规则

8

暴露路由对象

9

来到main.js导入上面暴露的路由对象

10

在new Vue挂载路由对象

11

来到App.vue设置路由出口 <router-view />

语法

描述

const router = new VueRouter({

routes,

mode:’hash’

})

router为根据路由规则实例化出来的路由对象

routes:路由规则

mode:设置路由模式，默认值为hash,可以不写

语法

描述

const router = new VueRouter({

routes,

mode:’history’

})

router为根据路由规则实例化出来的路由对象；routes:路由规则

mode:设置路由模式，不写默认值为hash,需要将该值设置为history。

语法

描述

<a href=’#/路径’>内容<a/>

hash模式的跳转

<a href=’/路径’>内容<a/>

history模式的跳转

语法

描述

//路径一样的导航才会有那两个类

<router-link to=’网址中的资源路径’>内容</router-link>

他会根据模式的不同自动给路径添加和删除#号

如果跳转的路径和规则中的目标路径一样,就添加router-link-exact-active和router-link-active两个类名给转换后的a标签

语法

描述

const routes=[

{

//一般用组件名作为name属性

name:”组件1名”,

//写在url的资源路径位置

path:”/自定义路径1”,

//资源路径输入path对应的自定义路径就跳转到这个组件名对应的组件

component:组件名

//设置子路由

children: [

//写法跟外面父路由也是一毛一样

//子路由路径一般不加/【不加/ 路径默认会拼接到资源路径中父路由路径后面 加了/资源路径就是本身】

{

path: '自定义路径2',

name: 'MyLike',

component:MyLike

}

]

},

{

name:”组件2名”,

path:”/自定义路径”,

component:组件名

},

…

]

当资源路径与path后面使用的自定义路径相同的时候，页面跟新到component后面使用的组件名对应的组件

当path后面的属性值为*时，需要写在该级别路由的最后一个位置，代表除了其上面路由规则中的所有路径外，其他所有路径都跳转到某个组件中。【因为404页面无需我们点击跳转，所以无需声明式导航。】

语法

描述

const routes = [

{path:’/路径1’,redirect:’/路径2’}

]

当地址栏的资源路径中输入路径1后按回车，资源路径会自动变为路径2

路由重定向写在路由规则的前面

如果路由重定向里面还有子路由，子路由如果是拼接父路由路径，是拼接的父路由的path路径后面，而不是重定向的路径后面。

步骤

描述

1

创建一个项目文件夹

2

进入项目文件夹并打开小黑窗cmd

3

小黑窗输入vue create 项目名

4

选择Default([Vue 2] babel,eslint)

5

小黑窗输入 cd 项目名 进入项目文件夹

6

小黑窗给项目添加路由 vue add router

7

把不需要的文件删掉

步骤

过程

1

创建一个项目文件夹

2

进入项目文件夹并打开小黑窗cmd

3

小黑窗输入vue create 项目名

4

按键盘上下键 选择 Manually select features

5

按键盘上下键 空格选中【选项前面的括号内有星号*表示被选中状态】 [Babel【es6->es5 按需导入】,Router【路由】,CSS Pre-processors【CSS预处理】,Linter/Formater【eslint-语法检查】]当数组中的所有插件都被选中后，按回车【空格可以选中和取消】

6

上下键选择2.x【表示使用vue2.x版本】，按回车

7

Use history mode for router?后面输入n【表示不使用历史模式，就会使用hash模式】，按回车

8

选择Less【css预处理插件】， 按回车

9

上下键选择 ESLint +Standard config【表示使用ESLint语法检查的标准模式，这样可以规范我们的代码】

10

选中Lint on save【在保存时校验语法是否规范，选这个】

11

选择In dedicated config files【你在哪放babel、eslint这些插件的配置，用独立的文件做它们的皮质，所以建议选第一个即这个。】

12

Save this as a preset for future projects?我们输入n【表示不保存，不需要用于下一次创建直接使用】【如果输入了y,后续不想要有这个直接使用项，需要在C:\Users\自己用户名\.vuerc去修改】

语法

描述

$router.back()

返回上一步【返回上一页】，相当于原生的history.back（）

$router.push(‘/指定路由路径’)

跳转到指定路由路径的路由。

语法

描述

//路径一样的导航才会有那两个类

<router-link to=’网址中的资源路径’>内容</router-link>

他会根据模式的不同自动给路径添加和删除#号

如果跳转的路径和规则中的目标路径一样,就添加router-link-exact-active和router-link-active两个类名给转换后的a标签

语法

描述

$router.push(‘要跳转的路径’)

Vue的行内js代码

this.$router.push(‘要跳转的路径’)

Vue的methods里面的方法js代码【该路径需要和路由规则path后面的路径一致。】

query方式传参path跳转语法

描述

this.$router.push({

//要跳转的路径

path:’/路由对应的路径’,

//传递query参数

query：{

属性1名：属性1值,

属性2名：属性2值，

…

}

})

路由规则中的path属性对应路由路径，component属性对应跳转的路由组件名，

跳转到的这个组件里面就可以使用$route.query.属性名的方式获取请求参数的属性【在vue的插值表达式或行内js中】。

左边的语法只是query方式传参【query方式传参会将传的参数使用query字符串的方式拼接到url路径后面且使用？分隔】还有一种params方式的传参方式【传的参数不会拼接到url路径后面】。

query方式传参name跳转语法

描述

this.$router.push({

//要跳转的路径名对应的组件

name:’路由名’,

//传递query参数

query：{

属性1名：属性1值,

属性2名：属性2值，

…

}

})

路由规则中的name属性对应路由名，component属性对应跳转的路由组件名，

跳转到的这个组件里面就可以使用$route.query.属性名的方式获取请求参数的属性【在vue的插值表达式或行内js中】。

语法

描述

$router.push({

name:’路由名字’,

query:{

属性1：数据1，

属性2：数据2，

…

}

})

取值：跳转的组件内部使用$route.query.属性名【组件内部的行内js和插值表达式中】获取参数

this.$route.query.属性名【组件内部的methods中的方法中】获取参数

语法

描述

$router.push({

name:’路由名字’,

params:{

属性1：数据1,

属性2：数据2,

…

}

})

某个按钮触发的事件里面有该代码，当按钮事件触发后，会将参数name属性对应的路由名字到路由规则中去匹配对应的路由【会将这里的参数params中的属性放到路由规则中path路径后面的冒号中】并跳转到对应的组件中。

跳转到的组件内就可以使用$route.params.属性名的方式获取参数值。

query方式

params方式

query传的网址上会能看到参数

params传的网址上看不到参数

query传的参数在网址上，所以一刷新还在

params的参数是在内存中，所以一刷新就没了

query刷新不管之前是什么数据都会变为字符串

params是直接不能刷新，刷新数据就没了【页面插值表达式获取的数据自然也会消失】。

query传的参数可以通过$router.query.属性名的方式获取参数

params传的参数可以通过$router.params.属性名的方式获取参数

语法

描述

{name:’路由名’,path:’路由路径/:动态参数名’,component: 组件名}

跳转到的组件中取动态参数值：$route.params.动态参数名【通常需要该参数发请求获取渲染数据，写到当前组件的created钩子中，进入页面就获取到数据。】

{name:’路由名’,path:’路由路径/:id’,component: 组件名}

这里的:id不是说路径叫:id,而是这这里要传递一个id参数过来路由路径后面的id必传

跳转到的组件中取值：$route.params.id

语法

描述

router.beforeEach((to,from,next)=>{

if(to.path===’路由路径’){

next(‘跳转的指定路由’)

}else{

//还可以有其他条件判断后放行

next()

}

}))

router是router的实例化对象

to:去哪个路由的路由组件信息

from:从哪个路由组件来的

next:是一个放行函数，调用next()就代表放行，不调用代表不放行【不放行就跳转的组件就是个空页面，参数可以是路由路径】

next(‘路由对应的路径’)：跳转到指定路由。【放行到指定路由】

它在组件创建之前就调用了【beforeCreate钩子前面调用】

语法

描述

const组件名= () => import('@/views/组件名.vue ')

路由规则所在的index.js文件中将导入组件的代码改为这种形式

规范

JS字符串要用单引号，不要用双引号

建议每句话结尾不要加分号

=号两边要有且只有1个空格

函数小括号两边有且只有1个空格

不要有过多的无意义空格和换行【比如每句话末尾多空格或换行】

v-for创建动态元素的时候，动态元素必须加key属性【key值只接受字符串和数值类型】

字面量值【null和undefined除外】用===全等比较

null,undefined使用==双等比较

组件里不能有数字

组件名字遵循大驼峰命名法【最少两个单词】，组件暴露的默认name属性可以为大驼峰命名法，也可以为多个单词使用连字符号-连接起来的单词组合。【不写name属性，默认情况下name属性值为组件名。】

插件名

描述

ESLint

Vscode默认是不检查你语法规范的，也就是说你多敲了几个空格或者单引号变双引号都不符合规范，但是vscode不会报错，要看小黑窗才知道报没报错

装了这个插件后，vscode就会有报错提示了。

vscode-icons

让vscode有图标

Prettier-Code formatter

保存自动格式化代码，防止eslint报错。【eslint格式化失效，可以用脚手架自带功能。npm包管理工具使用npm run lint或yarn包管理工具使用yarn lint】

步骤

过程

1

根目录打开命令行，如果是npm包管理工具 要先npm i把依赖包下载下来【如果用的yarn包管理工具就使用yarn把依赖包下载下来】，然后才能运行项目

2

命令行输入npm run serve【根据package.json文件来】

语法

描述

// 导入所有组件

import 组件名 from '组件路径'

export default {

  // install被调用时会有一个参数，加vue

  install (Vue) {

    Vue.component('组件名', 组件名)

  }

}

以后要使用该组件

需要导入该文件的路径并默认用一个变量来接收

Vue.use(变量名)即可

语法

描述

npm i vant@latest-v2 -d

下载vant到依赖包

npm i vant@latest-v2 -f

如果-s方式下载不了，使用这种方式下载vant

步骤

过程

1

下载插件 npm i babel-plugin-import -D -f

2

来到babel.config.js做如下配置：

module.exports =

{

plugins:[

['import', {

libraryName:'vant', libraryDirectory: 'es',

style: true }, 'vant']

]

};

3

在main.js中引入需要的组件，并安装上，比如button按钮

import { Button } from 'vant';

Vue.use(Button);

4

在哪个组件需要使用就在哪里导入标签结构

<van-button type="primary">主要按钮</van-button>

语法

描述

npm install postcss-px-to-viewport --save-dev

下载将px单位转为vw或vh单位的插件

npm install postcss-px-to-viewport --save-dev -f

上面命令报错【node版本太高】，使用该命令下载

步骤

过程

1

在项目根目录【package.json同级】新建postcss.config.js配置文件

2

在postcss.config.js配置文件中写如下代码

module.exports = {

  plugins: {

    'postcss-px-to-viewport': {

 // 设置视口宽度,单位默认是px【设置的px单位宽度会自动转为vw单位】【viewportHeight:高度；设置后会根据高度来将px单位转为vw单位】

      viewportWidth: 375

    }

  }

}

3

我们可以自己写一个盒子，就用px单位，运行后看看有没有自动变为vw单位，变了代表适配完成【以后打包或者在浏览器中都可以看到转换好后的vw单位了】

语法

描述

npm i axios

下载axios

直接设置基地址

描述

axios.defaults.baseURL=’基地址’

直接给axios基地址，不利于扩展,这样设置项目只会有一个基地址，但以后项目可能有多个基地址

创建实例设置基地址

描述

const request=axios.create({

baseURL:’基地址’,

timeout:毫秒数

})

克隆一个新的axios实例【克隆了一个和axios一样的对象，并且设置了新对象的基地址】

当需要新的基地址axios实例，可以通过axios继续克隆。

timeout设置发一个请求在指定毫秒数还没反应就直接连接超时。

代码

// 常量设置token值，常量改变即可跟新所有token有关方法的值

const TOKEN = 'hmmj-mobile-token'

// 保存设置token

export const setToken = token => {

  localStorage.setItem(TOKEN, token)

}

// 获取token

export const getToken = () => {

  return localStorage.getItem(TOKEN)

}

// 删除token

export const removeToken = () => {

  localStorage.removeItem(TOKEN)

}

代码

import Vue from 'vue'

import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)

Vue.use(TabbarItem)

代码

<van-tabbar v-model="active">

  <van-tabbar-item icon="fire-o">面经</van-tabbar-item>

  <van-tabbar-item icon="search">收藏</van-tabbar-item>

  <van-tabbar-item icon="friends-o">点赞</van-tabbar-item>

  <van-tabbar-item icon="setting-o">我的</van-tabbar-item>

</van-tabbar>

代码

<router-view></router-view>

   <van-tabbar route>

   <van-tabbar-item icon="fire-o" to="/article">面经</van-tabbar-item>

   <van-tabbar-item icon="search" to="/collect">收藏</van-tabbar-item>

   <van-tabbar-item icon="friends-o" to="/like">点赞</van-tabbar-item>

   <van-tabbar-item icon="setting-o" to="/user">我的</van-tabbar-item>

</van-tabbar>

模块B默认导出语法

模块A默认导入语法

export default {

变量名,

方法名

}

//自定义对象名中保存了模块B中所有默认导出//即暴露的数据【变量和方法】,import紧邻后//面的自定义对象名 位置处不能写解构语法

import 自定义对象名 from ‘模块B路径’

模块B按需导出语法1

模块A按需导入语法1

export const 目标变量名=值

import {目标变量名} from ‘模块B路径’

模块B按需导出语法2

模块A按需导入语法2

目标变量列表初始化代码

export {目标变量列表}

import {目标变量列表} ‘模块B路径’

路径符号

描述

./

当前文件所在文件夹中查找【当前】

../

跳出当前文件夹，在上一级文件夹内查找【上一级】

/

当前环境下的根目录

步骤

描述

1

在babel.config.js文件中配置按需引入样式源文件

module.exports = {

  plugins: [

    [

      'import',

      {

        libraryName: 'vant',

        libraryDirectory: 'es',

        // 指定样式路径

        style: name => `${name}/style/less`

      },

      'vant'

    ]

  ]

}

2

在脚手架创建的项目的vue.config.js文件中修改样式变量,配置如下

module.exports = defineConfig({

  transpileDependencies: true,

  css: {

    loaderOptions: {

      less: {

        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。

        lessOptions: {

          modifyVars: {

            // 修改主题的地方

            // 直接覆盖变量【这里的属性名是变量】

            'text-color': '#111',

            'border-color': '#eee'

// 修改主题颜色，颜色值需要使用引号包裹【这种方式改动适用于改动比较少的情况如果改动较多，建议使用独立的less文件覆盖。】

主题变量:’颜色值’

          }

        }

      }

    }

  }

})

//修改主题颜色那里的代码如果变量较多【或者可以通过 less 文件覆盖（文件路径为绝对路径）】【注意less主题颜色文件中的主题变量需要用@开头，颜色值不能用引号包裹】，可以修改为如下代码【后面的会覆盖前面已经设置好的样式。】

 hack: 'true; @import "less主题颜色文件路径";'

案例代码

描述

@blue: pink;

将以前是blue设置主题颜色的标签改为粉红色

代码

import Vue from 'vue';

import { NavBar } from 'vant';

Vue.use(NavBar);

标签结构

<van-nav-bar

      title="自定义标题"

      left-text="返回"

      right-text="按钮"

      left-arrow

      @click-left="onClickLeft"

      @click-right="onClickRight"

    />

</div>

步骤

过程

1

鼠标右键->检查【或者F12来到控制台】

2

点击“netWork”

3

选择“Fetch/XHR”小黄人

4

刷新页面

5

找到请求的.json接口请求文件

6

点击该文件

7

鼠标右键

8

点击”copy”

9

点击“copy link address”

10

在网址上粘贴复制过来的网址就可以直接下载了。

代码

import Vue from 'vue';

import { Toast } from 'vant';

Vue.use(Toast);

语法

描述

this.$toast.sucess(‘成功提示信息’)

弹出成功提示信息

this.$toast.fail(‘失败提示信息’)

弹出失败提示信息

代码

import { Toast } from 'vant';

语法

描述

Toast.sucess(‘成功提示信息’)

弹出成功提示信息

Toast.fail(‘失败提示信息’)

弹出失败提示信息

语法

import Vue from 'vue';

import { Cell, CellGroup } from 'vant';

Vue.use(Cell);

Vue.use(CellGroup);

代码

<van-cell-group>

<van-cell to="点击跳转的路由路径" title="单元格" value="内容" />

<van-cell title="单元格" value="内容" label="描述信息" />

</van-cell-group>

语法

import Vue from 'vue';

import { List } from 'vant';

Vue.use(List);

代码

<van-list

      v-model="loading"

      :finished="finished"

      finished-text="没有更多了"

      @load="onLoad"

    >

      <标签名

        v-for="item in list"

        :key="item.id"

      ></标签名 >

</van-list>

代码

async onl oad () {

      // 基于axios请求获取请求数据【页面不会刷新】

      const res = await articleListAPI({

        current: 1,

        pageSize: 5

      })

// 将请求数据放到渲染数据里【页面不会刷新，但数据在增多】

      this.list.push(...res.data.rows)

// 调用onLoad方法就会将loading值改为true,所以请求数据后需要它的值改为false，为下次调用onLoad方法做准备。【这句代码需要放在请求后面，因为这样如果还没有请求到数据就可以看到加载中的图标】

      this.loading = false

      // 数据全部加载完成

      if (this.list.length > 20) {

// 数据全部加载完成，执行完本次代码后就退出onLoad方法

        this.finished = true

      }

    }

语法

import Vue from 'vue';

import { Grid, GridItem } from 'vant';

Vue.use(Grid);

Vue.use(GridItem);

代码

<van-grid :column-num=’列数’>

    <van-grid-item icon="photo-o" text="文字" to="指定跳转的路由路径" />

   <van-grid-item icon="photo-o" text="文字" />

   <van-grid-item icon="photo-o" text="文字" />

   <van-grid-item icon="photo-o" text="文字" />

</van-grid>

语法

描述

npm run build

通过该命令打包项目，package.json的scripts节点内部vue-cli-service build属性值对应的属性是什么，就用npm run 什么

语法

描述

publishPath:’’

不写，默认值为publishPath:’/’，代表打包后的文件为绝对路径以/开头。写publishPath:’./’和publishPath:’’都是代表相对路径打包。

步骤

过程

1

https://gitee.com/登陆gitee

2

点击右上角加号图标“+”

3

弹出的弹框中点击“新建仓库”

4

输入相关项目描述信息，点击“创建”【会跳转到另一个页面】

5

进入到打包好后的项目文件夹“dist”,将它放到没有.git文件的文件夹中

6

小黑窗进入dist文件夹

7

输入git init【初始化项目】

8

输入git add .【将文件上传到暂存区】

9

输入git commit -m’项目信息记录’【本地存储已经好了，下面与gitee仓库建立链接】

10

将第4步跳转的新页面最后下面的已有仓库下面的最后两行代码 依次输入命令行中，如下代码：

$ git remote add origin https://gitee.com/Hello_Vue/my_show.git【与本地仓库建立联系】

$ git push -u origin "master"【将本地项目推送到仓库】

11

刷新页面，即可上传成功

12

点击“服务”

13

点击“Gitee Pages”

14

点击“启动”

语法

描述

const组件名= () => import('@/views/组件名.vue ')

路由规则所在的index.js文件中将导入组件的代码改为这种形式

语法

描述

<template>

…

<img src=”图片路径”>

</template>

在模板的html结构中引入

语法1

描述

import 自定义使用图片名from '@/assets/my.png'

export default {

  data () {

return {

…,

      自定义图片属性: 自定义使用图片名

    }

  }

}

Es6导入

语法2

描述

export default {

  data () {

    return {

   …,

      ig: require('@/assets/my.png')

    }

  }

}

common.js导入

语法

描述

选择器{

…,

background:url(“~@/assets/home.png”);

}

Css中背景图片的引入

语法

描述

npm i animate.css@3.7.2

下载组件过渡的css文件

语法

描述

import AnimateCss from “animate.css”

Vue.use(AnimateCss)

下载组件过渡的css文件

并安装它。

语法

描述

<transition

      enter-active-class="animated slideInRight"

      leave-active-class="animated slideOutLeft"

    >

      <过渡元素>

</transition>

enter-active-class控制进入时，过渡元素的进入方式【创建的进入方式】

leave-active-class控制离开时，过渡元素的离开方式【销毁的离开方式】

过渡元素必须是动态创建的【创建和销毁】

npm i echarts

命令行下载echarts插件

// 导入echarts

import * as echarts from 'echarts'

import 'echarts-gl'

// 将echarts挂载到原型上

Vue.prototype.echarts = echarts

  mounted () {

    // 初始化echarts

    const myChart = this.echarts.init(this.$refs.pie)

    myChart.setOption(optionPie)

}

语法

npm install postcss-px-to-viewport --save-dev --force

代码

module.exports = {

  plugins: {

    'postcss-px-to-viewport': {

      viewportWidth: 375

    }

  }

}

语法

描述

/* 封装axios用于发送请求 */

import axios from 'axios'

// 以后开发基本上都不会直接给axios设置基地址，因为这样不利于扩展

// 万一以后项目要有多个接口服务器，就意味着有多个基地址，写给axios不好， axios只能给1个基地址

// 克隆一个新的axios对象

// 并且设置了新对象的基地址

const request = axios.create({

  baseURL: '基地址',

//设置超时时间

//意思是如果发一个请求超过目标毫秒数还没反应就直接报错404

  timeout: 目标毫秒数

})

// 添加请求拦截器

request.interceptors.request.use(function (config) {

  // 在发送请求之前做些什么

// config.headers.请求头属性 = 携带数据

config.headers.Authorization = `Bearer ${getToken()}`

  return config

}, function (error) {

  // 对请求错误做些什么

  return Promise.reject(error)

})

// 添加响应拦截器

request.interceptors.response.use(function (response) {

  // 对响应数据做点什么,取值时少写一个data

  return response.data

}, function (error) {

  // 对响应错误做点什么

  return Promise.reject(error)

})

// 暴露出去

export default request

语法

描述

// 常量的规范是名字大写

const TOKEN_KEY = 'hmmj-mobile-token'

// 保存

export const setToken = (token) => {

  localStorage.setItem(TOKEN_KEY, token)

}

// 获取

export const getToken = () => {

  return localStorage.getItem(TOKEN_KEY)

}

// 删除

export const removeToken = () => {

  localStorage.removeItem(TOKEN_KEY)

}

封装一个本地存储设置值和获取值以及删除值的方法

路径符号

描述

./

当前

../

上一级

/

当前环境下的根目录【如果是服务器打开的就是项目根目录】

默认导出语法

默认导入语法

export default 目标数据变量

import 自定义变量 from ‘路径’

//自定义变量和目标数据一模一样

按需导出语法

按需导入语法

export {变量列表}

import 变量 from ‘路径’

语法

描述

router.beforeEach((to,from,next)=>{

if(to.path===’路由路径’){

next(‘跳转的指定路由’)

}else{

//还可以有其他条件判断后放行

next()

}

}))

router是router的实例化对象

to:去哪个路由的路由组件信息

from:从哪个路由组件来的

next:是一个放行函数，调用next()就代表放行，不调用代表不放行【不放行就跳转的组件就是个空页面，参数可以是路由路径】

next(‘路由对应的路径’)：跳转到指定路由。【放行到指定路由】

它在组件创建之前就调用了【beforeCreate钩子前面调用】

语法

描述

npm cache clean -f

清除npm缓存

封装接口

描述

user.js

这个文件专门发跟用户模块的请求

article.js

这个文件专门发跟文章有关的请求

语法

描述

const组件名= () => import('@/views/组件名.vue ')

路由规则所在的index.js文件中将导入组件的代码改为这种形式

语法

描述

vue add vuex

项目中打开命令行输入该命令，输入y,下载完成，项目中会多一个@/store/index.js文件,并且有初始化代码

语法

描述

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

属性名：’属性值’

  },

  getters: {

  },

  mutations: {

方法名(state,形参){

/*

参数1：一般写state表示state中的数据，当然也可以自定义。

参数2：调用该方法时传递过来的参数

*/

}

  },

  actions: {

  },

  modules: {

  }

})

state是vuex里放数据的地方

外界组件内的html中通过$store.state.属性名访问vuex中的数据

外界组件内的methods下面的方法中通过this.$store.state.属性名访问vuex的数据

state不允许外界直接被修改【如果直接修改：1.调试工具检测不到改变，不利于调试；2.如果开启严格模式，就会报错】【如何开启严格模式:就是在vuex里跟state平级的地方加strict:true】

只能在mutations里面的方法中可以修改state里面的数据，且这里面的所有方法的第一个参数就是上面的state对象，第二个参数为其他组件使用方法中使用$store.commit(‘通知vuex调用mutations中的方法名’,传递到方法中的参数)传递过来的参数

其他组件使用$store.commit(‘通知vuex调用mutations中的方法名’,传递到方法中的参数)即可在vuex中的mutations中去调用对应的方法

语法

描述

$store.state.属性名

某个组件 在html结构的插值表达式中使用vuex中的数据

this.$store.state.属性名

某个组件 在methods内的方法中使用vuex中的数据

语法

描述

computed: {

    自定义访问vuex中数据的计算属性 () {

      return this.$store.state.vuex中的属性

    }

}

通过该方式可以轻松获取vuex中的数据【但是每访问一个vuex中的数据，就需要写一个计算属性】

语法

描述

//先导入辅助函数

import {mapState} from ‘vuex’

//计算属性中调用

computed:{

…mapState([vuex中state内的属性列表])

}

在需要访问vuex中数据的组件中先导入vuex的mapState函数，然后在计算属性中调用该方法。将需要使用计算属性访问vuex中的属性全部写在辅助函数mapState的数组属性列表中。

语法

描述

<标签名 @事件类型=’目标方法名’></标签名>

当按钮事件触发时，会去methods中找到对应的方法

methods:{

目标方法名(){

this.$store.commit(‘vuex中mutations中的目标方法’,传递过去的参数)

}

}

this.$store.commit会在vuex的mutations中去找对应的方法，并将该参数传递过去【注意，只能有一个参数传过去有效】

语法

描述

mutations: {

    // 第一个参数只能是上面的state，可以使用vuex中的数据，第二个参数是其他组件$store.commit('方法名',参数)传递过来的参数

    目标方法 (state, p1) {

      // state.属性名相关的赋值表达式

      /*   this.state.age = state.age + p1 */

      state.age = state.age + p1

}

mutations中的方法，所有第一个参数是state也就是存放的数据，第二个参数为其他组件使用this.$store.commit(‘vuex中mutations中的目标方法’,传递过去的参数)中的第二个参数，且目标方法中只能接收一个数据，想接收多个数据可以使用对象传过来

语法

描述

<标签名 @事件类型=’目标方法名’></标签名>

当按钮事件触发时，会去methods中找到对应的方法

methods:{

目标方法名(传递过去的参数){

this.$store.commit(‘vuex中mutations中的目标方法名’,传递过去的参数)

}

}

this.$store.commit会在vuex的mutations中去找对应的方法，并将该参数传递过去【注意，只能有一个参数传过去有效】【当目标方法名和vuex中mutations中的目标方法名一样的时候，调用组件内部的方法就等同于调用vuex中的方法。】

没用辅助函数语法

描述

<标签名 @事件类型=’目标方法名’></标签名>

当按钮事件触发时，会去methods中找到对应的方法

methods:{

目标方法名(传递过去的参数){

this.$store.commit(‘vuex中mutations中的目标方法名’,传递过去的参数)

}

}

this.$store.commit会在vuex的mutations中去找对应的方法，并将该参数传递过去【注意，只能有一个参数传过去有效】【当目标方法名和vuex中mutations中的目标方法名一样的时候，调用组件内部的方法就等同于调用vuex中的方法。】

用辅助函数简写语法

描述

//先导入vuex并暴露mapMutations这个函数

import {mapMutations} from ‘vuex’

methods:{

…mapMutations([vuex中mutations中的方法名列表])

}

使用辅助函数首先需要导入并暴露辅助函数import {mapMutations} from ‘vuex’

…mapMutations([vuex中mutations中的方法名列表])

就等价于

vuex中mutations中的目标方法名(传递过去的参数){

this.$store.commit(‘vuex中mutations中的目标方法名’,传递过去的参数)

}

语法

描述

actions:{

方法名(ctx){

ctx.commit(‘mutation中的方法名’)

}

}

actions里面的方法第一个参数都是context表示当前store实例，我们简写为ctx【固定写法】异步代码就写在这里面

ctx代表当前store对象【里面有state、commit、dispatch方法】

其他组件的methods方法中使用this.$store.dispatch(‘vuex中actions中的目标方法’,传过去的参数)即可调用vuex中actions里面的目标方法【actions方法里面又可以通过ctx.commit的方式调用mutation里面的方法，从而实现对数据的修改】

语法

描述

//先导入vuex并暴露mapActions这个函数

import {mapMutations} from ‘vuex’

methods:{

…mapActions([vuex中actions中的方法名列表])

}

…mapActions([vuex中actions中的方法名列表])

就等价于

vuex中actions中的方法目标名(传递参数形参){

this.$store.dispatch(vuex中actions中的目标方法名, 传递参数形参)

}

在该组件实例中调用vuex中actions中的方法就可以直接在methods的方法中使用this.vuex中actions中对应的方法名

在其他模块【js文件中】调用vuex中actions中的方法：开启命名空间和分开设置子模块后，可以使用this.$store.dispatch(‘子模块路径/子模块名’,传递的参数)

语法

描述

getters:{

计算属性名(state){

return state中属性相关表达式

}

}

当需要使用某个模块中的计算属性时

在组件的html结构的插值表达式内写

$store.getters.vuex中getters中的计算属性名

$store.getters[‘模块名/计算属性名’]

语法

描述

import {mapgetters} from ‘vuex’

computed:{

…mapGetters([计算属性名列表])

}

左边代码等价于

getters:{

计算属性名(state){

return $store.getters[‘模块名/计算属性名’]

}

}

结论

描述

1

Vuex中的state是放数据的地方

2

Vuex中mutations内部的方法中，第一个参数为vuex中保存数据的state对象，第二个参数为传递过来的参数值，且最多只能传递一个参数【mutations放同步方法的地方,也是唯一能够修改state的地方】

3

Vuex中actions内部的方法中，第一个参数为vuex中store对象【里面有commit,dispatch等方法】，第二个参数为传递过来的参数值，且最多只能传递一个参数

4

Vuex中gitters内部的方法中，第一个参数为vuex中保存数据的state对象，第二个参数为传递过来的参数值，且最多只能传递一个参数

5

辅助函数mapState,mapGetters和属性数据有关，写在组件的computed计算属性内部调用【简化组件中访问vuex内部数据的方法】

6

辅助函数mapMutations,mapActions和方法有关，写在组件的methods方法内部调用【…mapMutations([‘方法名’])】

步骤

文件描述

过程

1

新建modules文件

在@/store文件夹下面新建一个modules文件夹【用于存放不同模块的vuex数据】【@/store/modules】

2

新建vuex模块

在modules文件夹下面新建一个A模块【A.js文件】，用于放该A模块中在vuex内的数据

3

将该模块的vuex数据暴露给@/store/index.js文件使用

在A模块中写暴露数据的语法【state需要写函数返回值的形式】

export default {

  state () {

    return {

      cartList: [

        { id: 1, name: '皮鞋', price: 9.9 },

        { id: 2, name: '玩具', price: 10 },

        { id: 3, name: '外套', price: 20 }

      ]

    }

  },

  mutations: {

    setCartList (state, list) {

      state.cartList = list

    }

  },

  actions: {},

  getters: {}

}

4

@/store/index.js文件暴露的对象中添加modules属性

来到@/store/index.js文件导入A模块，并在state平级添加modules属性，modules属性对应的属性值为对象，对象中保存了所有导入的vuex模块。

5

@/store/index.js文件中的代码

// 导入vuex模块【访问子模块之前需要先导入之模块，然后在modules对象属性内部注册之模块】

import 模块名 from '@/store/modules/模块名.js'

export default new Vuex.Store({

  modules: {

    // 把vuex模块注册为一个模块

    模块名

  }

})

6

访问vuex中的数据和方法

使用模块中的数据$store.state.模块名.属性名

使用方法$store.commit(‘方法名’,传递的参数)【在没有开启命名空间前，所有store文件夹中的模块内相同方法名都会被调用。】

7

开启命名空间并注册模块后访问vux对应模块的数据和方法

$store.state.属性名【访问根模块中vuex数据】

$store.commit(‘方法名’,传递的参数)【访问根模块vuex中mutation内的方法】

$store.dispatch(‘方法名’)【访问根模块vuex中actions内的方法】

$store.getters.计算属性名【访问根模块vuex中getters内的计算属性】

使用目标模块中的state中的数据

$store.state.模块名.属性名

使用目标模块中的mutations中的方法$store.commit(‘目标模块名/方法名’,传递的参数)【调用@/store/modules/目标模块名文件内部的mutations内部的方法名】

使用目标模块中的actions中的方法$store.dispatch(‘目标模块名/方法名’,传递的参数)【调用@/store/modules/目标模块名文件内部的mutations内部的方法名】

使用目标模块中的getters中的计算属性$store.getters[‘目标模块名/方法名’]【访问@/store/modules/目标模块名文件内部的getters内部的计算属性】

8

开启命名空间后,组件内部简化访问vuex对应模块的数据和方法

…mapState([‘vuex中state中的属性’])这种方式只能简化根vuex中的数据访问，不能简化模块中的数据访问。【导入辅助函数并映射vuex模块中的数据后，可以使用this.vuex根模块中state中的属性简化根模块vuex中state数据的访问】

…mapState(‘目标模块名’,[‘vuex中模块中的state中的属性’])这种方式简化模块中的数据访问。【组件内部导入辅助函数并映射vuex模块中的数据后，可以在组件内部使用this.vuex目标模块中state中的属性简化目标模块vuex中state数据的访问】

…mapMutations([‘vuex中模块中的mutations中的方法’]) 这种方式只能访问根模块中的方法【导入辅助函数并映射vuex模块中的方法后，可以使用this.vuex根模块中mutations中的方法简化根模块vuex中mutations方法的访问】

…mapMutations(‘目标模块名’,[‘vuex中模块中的mutations中的方法’]) 这种方式简化模块中的方法访问【组件内部导入辅助函数并映射vuex模块中的方法后，可以在组件内部使用组件中使用this.vuex模块mutations中的方法即可访问使用目标模块中vuex中mutations方法的访问】

$sotre.state.模块名.vuex对应模块中state中的属性

$store.dispatch(‘模块名/方法名’)

语法

描述

mapState([‘属性名’])

映射根模块中的state中的属性名

mapMutations([‘方法名’])

映射根模块中的mutations中的方法名

mapActions([‘方法名’])

映射根模块中的actions中的方法名

mapGetters([‘计算属性名’])

映射根模块中的getters中的计算属性名

语法

描述

mapState(‘模块名’,[‘属性名’])

在该组件内部就可以使用列表属性名的方式直接访问vux对应模块中的属性。

mapMutations(‘模块名’, [‘方法名’])

在该组件内部就可以使用列表方法名的方式直接访问vux对应模块中的方法。

mapActions(‘模块名’, [‘方法名’])

在该组件内部就可以使用列表方法名的方式直接访问vux对应模块中的方法。

mapGetters(‘模块名’, [‘名字’])

在该组件内部就可以使用列表属性名的方式直接访问vux对应模块中的属性了。

组件中语法

描述

…mapState(‘模块名’,[‘vuex中该模块中的属性’])

等价于在computed选项下面写如下代码

属性名(){

return this.$store.state.模块名.属性名

}

…mapGetters(‘目标模块名’,[‘vuex中模块中的getters中的计算属性’])

等价于在computed选项下面写如下代码

计算属性名(){

return $store.getters[‘模块名/计算属性名’]

}

…mapMutations(‘目标模块名’,[‘vuex中模块中的mutations中的方法’])

等价于在methods选项下面写如下代码

方法名(传递的参数){

this.$store.commit(‘目标模块名/方法名’,传递的参数)

}

…mapActions(‘目标模块名’,[‘vuex中模块中的mutations中的方法’])

等价于在methods选项下面写如下代码

方法名(传递的参数){

this.$store.dispatch(‘目标模块名/方法名’,传递的参数)

}

语法

描述

import { loginAPI } from '@/api/user'

// 1.1 导入操作本地存储的函数

import { getToken, setToken } from '@/utils/storage'

export default {

  namespaced: true,

  state () {

    return {

      token: getToken()

    }

  },

  mutations: {

    setToken (state, token) {

      state.token = token

      // 1.2设置token到本地存储

      setToken(token)

    }

  },

  actions: {

    async login (ctx, obj) {

      const res = await loginAPI(obj)

      ctx.commit('setToken', res.data.token)

    }

  }

}

因为vuex的数据跟data中的数据一样的特点：一刷新页面就恢复默认值。所以如果要让vux中的初始值为token,要么直接赋值【本地存储中的token给到我们vuex中的token中】，要么就需要在进入页面前就调用mutations中的setToken方法【在登陆页面的使用mapMutations映射user模块的setToken方法，然后在登陆页面的created钩子函数中调用user模块的setToken方法，并传入表单数据】

语法

描述

namespaced:true

每个暴露的子模块的vuex中使用该行代码创建命名空间

开启命名空间，以后就可以通过命名空间指定路径的方式来执行vuex中的模块中的方法

开启命名空间后，所有组件中访问state里的数据还是使用$store.state.模块名.数据名

开了命名空间后调用方法$store.commit(‘模块名/方法名’)

语法

描述

import 模块名 from ‘模块路径’

modules:{

模块名

}

在store/index.js中导入对应的模块，然后注册子模块，让子模块和vuex联系起来

modules中为注册的子模块

语法

描述

$store.state.模块名.数据名

访问固定模块的数据。

语法

描述

$store.commit(‘模块名/方法名’,传递的额外参数)

开启了命名空间才可以指定调用子模块里的方法名【否则只能使用$store.commit(‘方法名’,传递的参数)，但这样会将所有子模块中mutations内的该方法都会执行】

语法

描述

$store.getters[‘模块名/计算属性名’]

没有mapGitters方法时，写法怪异

语法

描述

…mapState(‘模块名’,[‘vuex中该模块中的属性’])

等价于

属性名(){

return this.$store.state.模块名.属性名

}

…mapGetters(‘目标模块名’,[‘vuex中模块中的getters中的计算属性’])

等价于

计算属性名(){

return $store.getters[‘模块名/计算属性名’]

}

…mapMutations(‘目标模块名’,[‘vuex中模块中的mutations中的方法’])

等价于

方法名(传递的参数){

this.$store.commit(‘目标模块名/方法名’,传递的参数)

}

…mapActions(‘目标模块名’,[‘vuex中模块中的mutations中的方法’])

等价于

方法名(传递的参数){

this.$store.dispatch(‘目标模块名/方法名’,传递的参数)

}

Vuex四大

描述

state

放数据的地方

mutations

放同步方法的地方，也是唯一能够修改state的地方

actions

放异步方法的地方，可以写异步代码

以后的流程一般是actions里发请求获取数据，然后调用mutations里的方法进行对state的数据修改

gitters

Vuex里的计算属性

语法

描述

computed:{

…mapState([state中属性1名,state中属性2名])

}

在组件内的html结构中就可以直接在插值表达式{{}}中使用state中的属性名的方式来获取数据了。

Scoped：让样式只能作用于当前页面，只能作用到当前组件里写过的标签

不包括组件内部的标签【就是页面上自动生成的不是我们自己写的标签】，这些需要生效需要在自动生成的标签选择器的前面加一个深度作用选择器。

语法

描述

$变量名=变量值

目标文件路径/目标文件名.scss

@import url(‘目标文件路径/目标文件名.scss’)

在需要的组件中导入该代码

语法

描述

$变量名=变量值

目标文件路径/目标文件名.scss

@import ‘目标文件路径/目标文件名.scss’

在需要的组件中导入该代码

语法

描述

::v-deep 组件内部生成的选择器{

//相关样式

}

在scss中使用，::v-deep空格然后再跟上组件内部生成的选择器

/deep/

在less中使用

>>>

在less中使用

做法

优点

不怕麻烦，就是自己搭建一个图片服务器提供好服务

图片始终保持在自己服务器上，操作权限更大，图片没有泄露风险

使用别人提供好的图片服务器

方便快捷

步骤

过程

1

安装json-server-g工具:项目文件夹打开小黑窗输入 npm i json-server -g

2

准备一个.json后缀的文件【用于接口数据】。

3

项目根目录放一个db数据库文件，json文件放在里面【方便查找接口数据】

4

存放.json文件这个文件夹打开小黑窗，输入json-server 文件名.json【得到在线接口地址】

5

测试接口就可以使用生成的网址来测试【在后端的接口没写好的情况下。】

接口方法

语法

修改

axios({

url:`在线网址/${数据唯一标识}`,

method:’patch’,

data:{

修改属性:修改后的属性值

}

})

新增

axios({

url:`在线网址`,

method:’post’,

data:{

新增属性:新增属性值

}

})

查询

axios({

url: `在线网址/${数据唯一标识}`,

})

语法

描述

const item = arr.find(v=>v.属性===属性值)

item得到的是一个查询到的目标元素，对元素进行修改操作会改变原数组对应那个元素的值【因为是复杂数据类型】【所以我们需要改变数组中元素单个数据时可以使用该方法】

步骤

过程

1

创建一个项目文件夹

2

进入项目文件夹并打开小黑窗cmd

3

小黑窗输入vue create 项目名

4

按键盘上下键 选择 Manually select features

5

按键盘上下键 空格选中【选项前面的括号内有星号*表示被选中状态】 [Babel【es6->es5 按需导入】,Router【路由】,CSS Pre-processors【CSS预处理】,Linter/Formater【eslint-语法检查】]当数组中的所有插件都被选中后，按回车【空格可以选中和取消】

6

上下键选择2.x【表示使用vue2.x版本】，按回车

7

Use history mode for router?后面输入n【表示不使用历史模式，就会使用hash模式】，按回车

8

选择Less【css预处理插件】， 按回车

9

上下键选择 ESLint +Standard config【表示使用ESLint语法检查的标准模式，这样可以规范我们的代码】

10

选中Lint on save【在保存时校验语法是否规范，选这个】

11

选择In dedicated config files【你在哪放babel、eslint这些插件的配置，用独立的文件做它们的配置，所以建议选第一个，方便后面修改配置文件。】

12

Save this as a preset for future projects?我们输入n【表示不保存，不需要用于下一次创建直接使用】【如果输入了y,后续不想要有这个直接使用项，需要在C:\Users\自己用户名\.vuerc去修改，将presets里面的对应名字配置删掉即可】

语法

描述

npm i vant@latest-v2 -S

在需要使用vant的移动端项目使用该命令下载，也可以使用npm i vant@latest-v2 -S -f下载哪种下载报错版本太高的问题

语法

描述

npm i babel-plugin-import -D

如果报错可以使用npm i babel-plugin-import -D -f来下载这个插件

语法

描述

module.exports = {

  presets: ['@vue/cli-plugin-babel/preset'],

  plugins: [

    [

      'import',

      {

        libraryName: 'vant',

        libraryDirectory: 'es',

        style: true

      },

      'vant'

    ]

  ]

}

这是配置babel-plugin-import这个插件，以后保存就会自动转为按需引入的语法了