Vue学习笔记

1.1、nodeJs

在安装vue之前，我们首先要在电脑上安装nodeJs，在百度上搜索nodeJs就可以下载了，其次还需要安装Visual Studio Code，这个是前端开发的工具，安装成功后即可安装vue了。

1.2、Vue的安装

vue的官网：vuejs.org

另外推荐使用v3.cn.vuejs.org

ctrl+R调出运行窗，输入cmd打开控制器终端，输入vue下载安装指令。

cnpm install -g @vue/cli
1

等待安装完成，在控制终端输入

vue --version
1

检测vue是否安装成功。

1.2.1、创建项目

打开VSCode，在盘符中创建一个文件夹用于存放项目代码，选择打开文件夹，选中创建的文件夹，打开项目后右键该项目，选择“在集成终端中打开”，在终端中输入如下指令创建vue项目：

vue create vue-demo
1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjFTN8fJ-1662712197001)(D:\xmImg\image-20220908143558400.png)]

1.2.2、创建时可能遇到的问题

在创建项目时，可能会遇到创建失败并报错的情况，大致内容为“禁止运行脚本”问题，这种情况为没有权限，使用

get -ExecutionPolicy
1

指令查看该权限，若结果为无权限，则使用如下代码修改权限：

set -ExecutionPolicy RemoteSigned
1

VSC指令选择为上下键，勾选和取消为空格键，回车键确认。

在创建项目时，建议将Manually select features勾选，将Linter/Formatter取消勾选。

1.2.3、运行项目

cd vue-demo
npm run serve
1
2

1.2.4、安装vue高亮插件

在运行vue项目后，查看代码时全黑状态，可点击VSC编辑器左边栏如下的操作按钮，在输入框中输入volar，选择骷髅头样式的，下载安装即可。关闭终端为ctrl+J。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBZhiQqJ-1662712197003)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220908144342711.png)]

1.3、vue模板语言

vue的模板语言为双花括号：{{}}，项目访问路径默认为localhost：8080

assets文件用于存放静态文件，app.vue是根组件，components是组件

1.3.1、vue中变量的创建与使用

vue中通过data函数创建变量，并通过{{变量}}的方式取值，如：

1.3.2、v-html指令

v-html指令能直接传输html标签，如下：

1.3.3、v-bind指令

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值


		
		{imgURL}}" alt=""> -->
		
		百度一下
		百度一下
	

	

	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。

绑定class有两种方式：
对象语法
数组语法

对象语法动态绑定class

对象语法的含义是:class后面跟的是一个对象。

.active{
	color:red;
}


	{{message}}




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.4.2、列表渲染

维护状态：数组中加入一条数据，列表渲染这一条时，不会重新把所有的都渲染一遍，实现方法：

1.4.3、事件处理

v-on添加一个事件，可简写为@

事件的处理方法为methods，与data同级，用“，”隔开，在事件中，读取data中的属性，需要用this属性，方法中的event参数是原生Domevent。

内联处理器中的方法

通俗点说就是传参

1.4.4、表单输入绑定

在日常开发过程中，获取表单填入的数据是非常重要的。

修饰符lazy

v-model在input输入同时，可以加入一个lazy属性，只有在改变结束时同步获取数据，能减少不适感和内存占用。

trim可去除多余的空格

2.1、组件

2.1.1、单文件组件

*.vue是特殊的文件格式，内容分为三个部分，html标签位置、

在App.vue的script中，引入某个自定义的vue组件（自己写的页面）

import HelloWorld from './components/HelloWorld.vue'
1

挂载该组件

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
1
2
3
4
5
6

显示组件

若是在style组件中加入scoped属性，则是表示该样式只在当前组件中使用。

2.1.2、多文件组件

props组件交互

可以在组件上注册一些自定义的attribute

在属性前加“：”可以将属性编程动态的。

定义多组件交互，共分为以下几个步骤：

1、定义一个自己的组件，即*.vue文件，在script标签中标注自己的名字，如：

export default {
  name: 'MyApp'
 
}
1
2
3
4

2、在App.vue中挂载自己的组件，挂载方式见上面。

3、在app.vue中定义一个变量，变量赋值到标签上，如

4、在自己定义的组件中接收该值并显示

实现代码如下：

MyComponent.vue

app.vue

若是type为Array，数组和对象都必须要通过使用函数进行返回，如：

defaut:function(){
return []
}
1
2
3

2.1.3、自定义事件的组件交互

上一个是从父传到子，这一个则是从子到父

MyComponent.vue

app.vue

2.2.1、组件生命周期

创建时：beforeCreate、create

渲染时：beforeMount、mounted

更新时：beforeUpdate、update

卸载时：beforeUnmount、unmounted

3.1、第三方 swiper

swiper是第三方的滑动触摸插件，先需要下载安装

官网：swiperjs.com.cn

swiper.com.cn

cnpm install --save swiper@8.1.6
1

使用swiper制作轮播图

加入指示器

4.1、网络请求

4.1.1、Axior

Axior是基于promise的网络请求库

安装：

cnpm install --save axios
1

格式转换：

请求数据需要做格式转换，安装一个queryString

cnpm install --save querystrig
1

使用（局部引入）：

get请求：

post请求

简写版

get请求：

axios.get(url).then(res=>{})
1

post请求

axios.post(url,querystring.stringify().then(res=>{}))
1

4.1.2、全局引入

上面的方法是局部引入axios，每到一个页面就需要引入一次，增加了代码量，于是便有了全局引入的解决方案。

在main.js中引入：

import { createApp } from 'vue'
import App from './App.vue'
//引入axios
import axios from 'axios'
//挂载到全局
const app = createApp(App)
app.config.globalProperties.$axios=axios
app.mount('#app')
//createApp(App).mount('#app')改写成上方形式
1
2
3
4
5
6
7
8
9

使用：上面定义成了 $符号，这边使用就用$ 符号

HelloComponent.vue

this.$axios.post(url,querystring.stringify().then(res=>{}))
this.$axios.get(url).then(res=>{})
1
2

4.1.3、Axios网络请求封装

在日常的开发中，一个项目的网络请求往往很多，此时一般采取将网络请求封装起来的方法。

在src目录下新建一个utils文件夹，创建一个request.js文件

import axios from 'axios'
import { config } from 'process'
import querystring from 'querystring'
const instance=axios.create({
    timeout:5000
})

const errorHandle=(status,info)=>{
    switch(status){
        case 400:
            console.log("400：语意有误！");
            break;
            case 401:
                console.log("401：服务器认证失败！");
                break;
                case 403:
                    console.log("403：服务器拒绝访问！");
                    break;
                    case 404:
                        console.log("404：路径错误！");
                        break;
                        case 500:
                            console.log("500：服务器错误！");
                            break;
                            case 502:
                                console.log("502：服务器无响应！");
                                break;
                               default:
                                console.log(info);
                                break;
    }
}
//发送数据之前
instance.interceptors.request.use(
    config=>{
        if(config.method==="post"){
            config.data=querystring.stringify(config.data)
        }
        return config;
    },
    error=>{
        return Promise.reject(error)
    }
)
//获取数据之前
instance.interceptors.response.use(
    response=>{
        return response.status===200?Promise.resolve(response):Promise.reject(response)
    },
    error=>{
        const{response}=error;
        //错误处理最关键
        errorHandle(response.status,response.info)
    }
)

export default instance;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

网络请求集中放在src目录下的api文件夹中的名为path.js的文件中

const base ={
    //公工路径，如www.baidu.com，至于后面的/XXX不写
    baseUrl:"http://www.XXX.com",
    shengyubufen:"/XXXX"
}
1
2
3
4
5

再建一个名为index.js的文件

import axios from "../utils/request";
import path from "./path"
const api={
    getXXX(){
        return axios.get(path.baseUrl+path.shengyubufen)
    }
}
export default api;
1
2
3
4
5
6
7
8

测试HelloWorld.vue

4.1.4、网络请求跨域问题

js采取的是同源策略

同源策略是浏览器的一项安全策略，浏览器只允许js代码请求喝当前所在服务器域名、端口、协议相同的数据接口上的数据，这就是同源策略。

也就是说，当协议、域名、端口任意一个不相同时，就会产生跨域问题

Access to XMLHttpRequest at ‘XXXXXXXX’

目前主流的跨域解决方案有两种：

①、后台解决：cors

②、前台解决：proxy

在vue.config.js文件中写如下代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      '/api':{
		//只需要把域名放入就行了
        target:'',
        changeOrigin:true
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

温馨提示：解决完跨域问题后，记得重启服务器！

5.1、vue-router管理路由

在vue中，我们可以通过vue-router路由管理页面之间的关系

vue-router是vue.js的官方路由，它与vue.js核心深度集成，让用vue.js构建单页应用变得轻而易举

5.1.1、安装

npm install -save vue-router
1

5.1.2、配置独立的路由文件

index.js

import { createRouter,createWebHashHistory} from "vue-router"
import HomeView from'../view/HomeView.vue'

//配置信息中需要页面的相关配置

const routes = [
    {
        path:"/",
        name:"home",
        //名为HomeView的vue页面
        component:HomeView
    },{
        path:"/about",
        name:"about",
        //异步加载  名为AboutView.vue的vue页面
        component:()=>import("../view/AboutView.vue")
    }
]
const router = createRouter({
    history:createWebHashHistory(),
    routes
})
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

测试时需建立两个以上vue页面，此处分别为名为HomeView.vue的文件和AboutView.vue的文件

主入口引入router（main.js）中

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app')

1
2
3
4
5
6

在Hello World中配置路由的显示入口

此时访问页面，该页面会加载在HelloWorld中，且路径变成了http://localhost:8081/#/，在后面加上about即可访问关于页面。

上方为加上跳转按钮的实现代码。

5.1.3、createWebHashHistiry与createWebHistiry的区别

createWebHashHistiry：路径上会有”/#“

createWebHistiry：此种方式需要后台配合做重定向，否则会404

原理：

createWebHashHistiry：a标签锚点连接

createWebHistiry：H5 push state（）

5.1.4、路由传参

页面跳转过程中，往往会有传参的情况，因此便有了如下解决方案

搭建项目时，可勾选router，这样就不用自己再创建了

创建完成后，可建立一个vue页面，这里以news为例

先创建vue文件，再去index.js中配置该文件的路径

NewsView.vue

NewsDetails.vue

HelloWorld.vue

index.js

 {
        path:"/news",
        name:"news",
        component:()=>import("../view/NewsView.vue")
    },
    {
        path:"/details/:name",
        name:"details",
        component:()=>import("../view/NewsDetails.vue")
    }
1
2
3
4
5
6
7
8
9
10

其中 path:“/details/:name”,中”/:name“为参数

路由传递参数共分为三步：

第一步：咋路由配置中指定参数的key，即上面写到的”/:name”

第二步：在跳转过程中携带参数，即to=“details/百度”

第三步：在详情页面读取路由携带的参数，即{{ $route.params.name }}

5.1.5、嵌套路由配置

例如：左边导航时的父子导航

现在view文件夹下创建一个名为AboutSub的文件夹，在此文件夹下创建两个vue文件，分别为AboutInfo.vue、AboutUs.vue

AboutInfo.vue

AboutUs.vue

然后在index.js中配置该页面的路径

{
        path:"/about",
        name:"about",
        //异步加载  名为AboutView.vue的vue页面
        component:()=>import("../view/AboutView.vue"),
        children:[{
            //二级导航的路径不要加
            path:"us",
            component:()=>import("../view/AboutSub/AboutUs.vue")
        },
        {
            //二级导航的路径不要加
            path:"info",
            component:()=>import("../view/AboutSub/AboutInfo.vue")
        }]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

再去到aboutView.vue中配置路径

重定向：redirect:“/about/us”

5.2、vuex状态管理

Vuex是一个专为Vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一-个集中式的管理方案,任何组件都可以按照指定的方式进行读取和改变数据。

5.2.1、安装

npm install --save vuex
1

5.2.2、配置

在src目录下创建一个store文件夹，文件夹中创建一个名为index.js的文件

import { createStore } from "vuex"
//vuex的核心作用就是帮我们管理组件之间的状态的
export default createStore({
    //所有的状态都放在这里（数据）
state:{
    counter:0
}
})
1
2
3
4
5
6
7
8

将这个文件引入到main.js中

import store from './store'
createApp(App).use(store).mount('#app')
1
2

在组件中读取状态(测试)

//HelloWorld中
{{ $store.state.counter }}
//App.vue中
{{ $store.state.counter }}
1
2
3
4

如果在一个组件中读取很多次，则用下面的方法

5.3、vuex状态管理核心

最常用的核心概念包含：State、Getter、Mutation、Action

5.3.1、Getter

对vuex中的数据进行过滤（store文件夹下index.js）

import { createStore } from "vuex"
//vuex的核心作用就是帮我们管理组件之间的状态的
export default createStore({
    //所有的状态都放在这里（数据）
state:{
    counter:0
},
getters:{
    getCounter(state){
        return state.counter>0?state.counter:"异常"
    }
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13

测试（HelloWorld）

另一种方案

5.3.2、Mutation

更改Vuex的store中的状态的唯一方法是提交mutationVuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。

index.js

import { createStore } from "vuex"
//vuex的核心作用就是帮我们管理组件之间的状态的
export default createStore({
    //所有的状态都放在这里（数据）
state:{
    counter:10
},
getters:{
    getCounter(state){
        return state.counter>0?state.counter:"异常"
    }
},
mutations:{
    addCounter(state,num){
        state.counter+=num
    }
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

helloworld.vue

第二种方式

5.3.3、Action

Action类似于mutation,不同在于:
●Action 提交的是mutation,而不是直接变更状态
●Action 可以包含任意异步操作

idex.js

import axios from "axios"
//为异步操作准备的
actions:{
    ansyncAddCounter({commit}){
        axios.get("XXXXXXX").then(res=>{
            commit("addCounter",res.data[0])
        })
    }
}
1
2
3
4
5
6
7
8
9

helloworld.vue

Vue学习笔记