零、环境准备

node.js 版本 16.13.1 下载地址：nodejs.org/en/

npm 版本 8.1.2（node.js 安装包自带，无需另外安装）

安装完成后，执行命令

npm config set registry http://registry.npm.taobao.org

查看设置是否成功

npm get registry

设置 npm 镜像为淘宝源，npm 源由于服务器再国外，速度很慢

一、安装启动

通过 vue-cli 一键安装安装：

npm install -g @vue/cli

创建项目：

vue create my-project
# OR
vue ui

启动项目：

npm run serve

优点：方便快捷，一步到位

通过 npm 安装

# 最新稳定版 
npm install vue

优点：方便自定义所需组件

其他方式：参考cn.vuejs.org/v2/guide/in…

二、介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

渐进式：我们可以只通过 script 标签引入 vue, 仅用来渲染视图，也可以配合其他类库，例如 webpack vue-router路由组件，vuex状态管理组件等，来构建大型单页应用

Vue 的核心思想：

双向绑定
数据驱动视图

Vue的生命周期：

created: 可以获取到 data 中的数据，可以调用 methods 中的方法

mounted: TML渲染到HTML页面中，此时一般可以做一些ajax操作

Vue 选项对象

new Vue({
    el: '#app', //需要挂载的元素
    data: {}, // 数据对象
    ...lifeCycle,// 生命周期 created mounted 等
    computed: { // 计算属性
    
    },
    watch: { // 侦听器
    
    },
    methods: { // 函数
    
    },
    components: { // 组件（作为父组件时使用）
    
    },
    props: []|{} // 接受的属性（作为子组件时使用）
})

更多选项可以查阅 API 文档

三、基本语法

vue 模板

需要展示在 html 中的数据用 {{foo}} 来引入， foo 可以是 data 中的字符串变量或者是 JS 表达式
属性绑定使用 v-bind
事件监听使用 v-on demo：js.jirengu.com/penibeseqi/…

文档链接：cn.vuejs.org/v2/guide/sy…

Class 与 Style 绑定

// class 绑定
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
// style 绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

条件渲染与列表渲染

条件渲染

<div v-if="visible">visible: true</div>
<div v-else>visible: false</div>
<div v-show=visible>visible: true</div>

v-show vs v-if: v-show 是控制元素的 display，v-if 是用来真正的控制是否渲染

列表渲染

<div v-for='(item, index) in list' :key='item.id'>{{item.id}}</li>

key 在列表中作为节点的标识，用于追踪节点的身份，以便重用或者排序，所以这个key必须为唯一标识

demo: js.jirengu.com/zimocupaku/…

表单双向绑定 Vue, Angular 是双向绑定 React 是单向绑定

Vue 双向绑定的原理 Vue 通过 v-model 进行双向绑定 demo: js.jirengu.com/mejorokujo/…

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

例如 click、input、keyup 事件，也可以支持组件的自定义事件

可以支持一些修饰符，例如：

事件修饰符：v-on:click.stop

按键修饰符：v-on:keyup.enter

鼠标按键修饰符：v-on:click.left|right|middle

demo: js.jirengu.com/liyeyodeco/…

tips: 所有的监听事件在组件销毁时会自动被删除，开发者无需担心如何清理他们

计算属性和侦听器 watch 监听器：用来监听 data 中属性的变化 computed 计算属性：看示例

demo: js.jirengu.com/lutivopiqu/…

三、组件

组件声明

<template>
  <div id="name">
    我叫{{value}}
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      value: 'zhangsan',
    };
  },
};
</script>

<style scoped>
    #name{
        color: red
    }
</style>

注意：

在组件中，data 必须是函数
其余选项和 Vue 选项对象一致
必须仅能有一个根元素

组件复用
属性传递

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

组件通信

利用对象引用类型修改父组件属性(场景较少)
使用 $emit v-on进行事件订阅发布（通常用于父子组件）
使用 eventBus（跨组件传递信息）
使用 Vuex 状态管理（较复杂，通常用于数据量比较大，比较复杂的场景）

这里可以看我之前写的博客juejin.cn/post/684490…

组件插槽将外部 dom 插入至组件内部中，增加灵活性，见示例

四、路由

安装：方法一：npm 安装：

npm install vue-router

安装完成后再入口文件中使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

方法二：vue-cli 安装

vue add router

文档：router.vuejs.org/zh/guide/

路由的两种模式（面试经常问到的问题）：

hash 模式：www.example.com/#/users/1, 利用 hashChange 事件进行页面切换，不会重新加载页面，不好看，但很方便
history 模式：www.example.com/users/1, 利用hashChange 事件进行页面切换，不会重新加载页面

五、应用打包

npm run build

六、周边生态

样式组件库- Element、antd
HTTP 请求库 axios
路由管理库 vue-router
状态管理库 vuex
vue-tool 插件 Vue Devtools

六、相关demo

todoList
记账笔记效果源码

vue 入门