Vue前端框架-基础入门

• Vue基础入门
  • 1. Vue简介
    • 1.1 Vue.js 是什么
    • 1.2 Vue.js 特点
  • 2. 所需工具
  • 3. 框架体系
  • 4. 搭建项目
    • 4.1 简单安装过程：
      • 4.1.1 安装node.js
      • 4.1.2 安装vue及依赖包
      • 4.1.3 创建一个vue项目
  • 5. Vue常用指令
    • 5.1 条件判断：v-if、v-else-if、v-else
    • 5.2 列表遍历、渲染：v-for
    • 5.3 属性绑定: v-bind
    • 5.4 表单输入绑定：v-model
    • 5.5 事件处理：v-on (简写@)
  • 6.V-router路由系统
    • 6.1 路由配置&&路由嵌套
    • 6.2 路由跳转的几种方式
    • 6.3 动态路由的使用
  • 7. Vue生命周期
    • 7.1 什么是生命周期?
    • 7.2 代码解释
  • 8. Vue组件传值
    • 8.1 props/$emit
      • 8.1.1 父组件向子组件传值
      • 8.1.2 子组件向父组件传值（通过事件形式）
    • 8.2 on
    • 8.3 Vuex使用
      • 8.3.1 Vuex五个核心概念
      • 8.3.2 主要代码store.js
  • 9. vue综合项目——仿网易云音乐播放器
    • 9.1 项目需求
    • 9.2 相关接口
    • 9.3 代码实现

Vue基础入门

1. Vue简介

1.1 Vue.js 是什么

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 Vue.js 特点

• 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
• 数据驱动： 自动追踪依赖的模板表达式和计算属性。
• 组件化： 用解耦、可复用的组件来构造界面。
• 轻量： ~20kb min+gzip，无依赖。
• 快速： 精确有效的异步批量 DOM 更新。
• 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

2. 所需工具

• 包管理工具：npm，基于node.js
• 模块打包工具：webpack
• 调试 开发者工具: vscode

3. 框架体系

• MVVM框架：Vue.js
• 项目脚手架：vue-cli
• UI组件库：Element UI
• 路由配置：vue-router
• 前端请求接口：axios
• 状态管理工具：Vuex
• 脚本语言：ES6语法
• css预处理器：scss样式预处理器

4. 搭建项目

4.1 简单安装过程：

4.1.1 安装node.js

这个直接推荐一篇菜鸟安装教程，包含windows和linux下安装，传送门如何安装node.js

4.1.2 安装vue及依赖包

安装好node.js后，就已经安装了npm。但是直接使用npm下载组件会很慢，我们首先安装淘宝镜像。
一下命令都是通过打开cmd控制台里面运行，除了特别提醒需要cd到某些目录下运行的意外，其他的都直接在cmd根目录运行即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完淘宝镜像后就可以较快的安装如下模块了。
全局安装webpack(安装过程可能会出错，如果出错，可以关掉cmd,重新打开，并使用npm install webpack -g命令重新安装，即不使用淘宝镜像)

cnpm install webpack -g

全局安装vue-cli脚手架

npm install vue-cli -g

接下来测试下是否成功安装了vue，cmd控制台输入：

vue -V

可以查看到vue版本，如图：

image.png

4.1.3 创建一个vue项目

首先选择需要将创建的目录放到哪个位置，使用cd命令切换到目录下

image.png

该目录下输入命令创建项目

vue create vue-project

4.1.3.1 选择项目的配置，此处选Manually select features手动配置项目（上下键移动项，回车选择）

image.png

4.1.3.2 选择要使用的插件（上下键移动，空格选择，回车进入下一步），此处选babel，Router，Vuex，Css，Linter

image.png

4.1.3.3 选择启动项目的Vue.js版本

image.png

4.1.3.4 询问是够使用history模式，输入Y回车

image.png

4.1.3.5 选择less

image.png

4.1.3.6 选择eslint相关配置，此处我选第三项默认配置

image.png

4.1.3.7 选择何时进行lint校验，保存时校验还是fix时

image.png

4.1.3.8 询问单独配置还是一起在packpage中配置，选单独配置

image.png

4.1.3.9 最后是否存储以上配置以便下次新建项目时使用

image.png

4.1.3.10 至此新建成功，新项目默认没有vue.config.js，需要在根目录手动创建，然后进行自己需要的配置

4.1.3.11 启动项目

image.png

image.png

4.1.3.12 安装element-ui组件库

npm i element-ui -S

引入elment
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

5. Vue常用指令

5.1 条件判断：v-if、v-else-if、v-else

判断条件是否成立，按条件渲染页面元素；相近的指令v-show

v-if和v-show的区别：

v-show：使用该指令的元素会始终渲染在dom中，通过改变该元素的display值来实现是否显示在页面上，不需要操作js，开销相比较小
v-if：真正的条件渲染，当满足条件时才将元素添加到dom中并渲染到页面，反之销毁元素。因此性能开销大。

5.2 列表遍历、渲染：v-for

使用v-for指令可以很方便地遍历数组或对象并将其数据展示到页面上

5.3 属性绑定: v-bind

使用v-bind用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。

5.4 表单输入绑定：v-model

使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据

5.5 事件处理：v-on (简写@)

使用v-on可以很简便地监听dom事件，如focus、click、mousedown等，同时vue允许在v-on指令中添加js代码并执行

6.V-router路由系统

6.1 路由配置&&路由嵌套

v-router通过在router文件夹中的index.js配置路由表，可很方便的切换组件展示内容，使用路由嵌套则可很方便地实现页面菜单切换，层次分明易维护。
index.js

import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import('../views/Home.vue')
const pageA = () => import('../views/a.vue')
const pageB = () => import('../views/b.vue')
const pageC = () => import('../views/c.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/a',
        name: 'a',
        component: pageA
      },
      {
        path: '/b',
        name: 'b',
        component: pageB
      },
      {
        path: '/c',
        name: 'c',
        component: pageC
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Home.vue

  A
  B
  C
  

a.vue

b.vue

c.vue

6.2 路由跳转的几种方式

6.2.1 router-link

A

6.2.2 this.$router.push() (在函数里面调用)

this.$router.push({
  path: '/c',
  query: {
    id: 1,
    name: 'xc'
  }
})

6.2.3 this.$router.replace() (用法同push)

两者区别：

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

6.3 动态路由的使用

动态路由（可传递参数）

this.$router.push({
  path: '/c',
  query: {
    id: 1,
    name: 'xc'
  }
})

获取路由参数

获取到的id：{{$route.query.id}}

7. Vue生命周期

7.1 什么是生命周期?

简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
生命周期方法?
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
生命周期钩子 = 生命周期函数 = 生命周期事件

创建期间生命周期方法
beforeCreate:
created:
beforeMount
mounted
运行期间生命周期方法
beforeUpdate
updated
销毁期间的生命周期方法
beforeDestroy
destroyed

7.2 代码解释

8. Vue组件传值

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

image.png

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？本文总结了vue组件常用通信的几种方式，如props、on、vuex，以通俗易懂的实例讲述这其中的差别及使用场景。

8.1 props/$emit

8.1.1 父组件向子组件传值

// Home.vue父组件

总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

8.1.2 子组件向父组件传值（通过事件形式）

// 子组件

// 父组件

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

8.2 on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
8.2.1 具体实现方式：
Vue 3.0写法

var Event=new Mitt();
Event.emit(事件名,数据);
Event.on(事件名,data => {});

Vue 2.0写法

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

举个例子
假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据
初始化
首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。新创建一个 .js 文件，比如 eventBus.js ：

import Mitt from 'mitt'
export default new Mitt()

// A组件

// B组件

// C组件

on 监听了自定义事件 data-a和data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

8.3 Vuex使用

8.3.1 Vuex五个核心概念

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vue有五个核心概念，state, getters, mutations, actions, modules。

1、state：vuex的基本数据，用来存储变量(后四个属性都是用来操作state里面储存的变量的)。

2、getters：是对state里面的变量进行过滤的。

3、mutations：store中更改state数据状态的唯一方法。（mutations必须是同步函数）

4、actions：像一个装饰器，包含异步操作（请求API方法）、回调函数提交mutaions更改state数据状态，使之可以异步。

5、modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

8.3.2 主要代码store.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    update_count (state, data) {
      state.count = data
    }
  },
  actions: {
  },
  modules: {
  }
})

// home.vue

9. vue综合项目——仿网易云音乐播放器

9.1 项目需求

主界面

image.png

mv界面

image.png

从上到下，分别是搜索栏、主体部分、音频进度条，主体部分从左到右分别是音乐列表、磁盘动画、留言列表。

主要功能有：

1.歌曲搜索：搜索栏中输入关键字，按下回车或者鼠标点击输入框后面的放大镜图标，返回给左侧音乐列表所有相关的歌曲名称。

2.歌曲播放：点击音乐列表中每条音乐前面的红色播放图标实现播放功能，下方进度条显示当前播放进度。

3.查看热评：歌曲播放的同时，右侧评论列表展示所有热评。

4.歌曲播放时的动画：歌曲播放的同时，磁盘中央封面改成相对应的专辑封面，上面的磁头旋转到磁盘上，歌曲暂停后，磁头再旋转回去。

5.mv播放：点击音乐列表中右侧的小电视图标，展现出四周由遮罩层包含的mv界面。

6.mv暂停：点击四周遮罩层，mv暂停，回到主界面。

9.2 相关接口

1.歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
2.歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址

9.3 代码实现

html：

css：

js：