Vue.js 开发速查手册

约 1475 字大约 5 分钟

2020-05-08

一份涵盖 Vue 2 核心语法、路由、状态管理和常用库的速查指南，适合有一定 Vue 基础的开发者快速查阅。

参考资源

Vue.js 官方文档

环境准备

安装脚手架

npm install -g vue-cli
npm install -g @vue/cli

卸载脚手架

npm uninstall -g vue-cli

查看版本

npm view vue-cli versions --json
vue -V

创建项目

vue create demo1
vue init webpack demo1
vue init webpack-simple demo1

启动项目

npm install
npm run dev

核心语法

属性绑定

数据定义：在 data() { return {} } 中声明
文本渲染：v-text='msg' 或 {{ data }}
属性绑定：v-bind:title="title" 或简写 :src="url"
HTML 渲染：v-html="html1"
class 绑定：:class="{'red': flag}" 或 :class="{'red': flag==0}"
style 绑定：:style="{'width': widthdata + 'px'}"
双向绑定：v-model='msg'
DOM 引用：this.$refs
显示/隐藏：v-show

方法定义

定义位置：methods: {}
写法示例：method1: function() {} 或 method1() {}
获取属性：this.msg 或 this.$set(this, 'msg', '测试')
获取事件对象：e.srcElement、e.keyCode

数组操作

添加元素：

this.arr.push('aa')

修改元素：

this.arr.splice(key, 1, '测试')

设置数组对象属性：

this.$set(this.iptDatas[index], 'showAlert', true)

批量设置属性：

this.arr.forEach(item => {
    this.$set(item, 'showEditBtn', true)
})

本地存储

// 设置数据
localStorage.setItem(key, value)

// 获取数据
localStorage.getItem(key)

// 删除数据
localStorage.removeItem(key)

条件与循环

条件渲染：

<div v-if="condition">显示内容</div>

列表渲染：

<div v-for="(item, key) in list" :key="key">
  {{ item }}
</div>

生命周期钩子

钩子	说明
`beforeCreate()`	实例初始化之前
`created()`	实例创建完成
`beforeMount()`	DOM 挂载之前
`mounted()`	DOM 挂载完成
`beforeDestroy()`	实例销毁之前
`destroyed()`	实例销毁完成

事件处理

点击事件：

<button v-on:click="method()">点击</button>
<button @click="method('111')">传参调用</button>
<button @click="method($event)">获取事件对象</button>

键盘事件：

<input @keydown="method()" />

模块化开发

定义模块

// storage.js
var storage = {
    // 模块内容
}
export default storage

引入模块

import storage from './model/storage.js'

组件系统

定义组件

创建 Home.vue 文件。

注册组件

import Home from './components/Home.vue'

export default {
    components: {
        'v-home': Home
    }
}

使用组件

<v-home></v-home>

样式作用域

使用 scoped 属性限制样式作用域：

<style scoped>
/* 样式仅作用于当前组件 */
</style>

数据请求

使用 vue-resource

安装：

npm install vue-resource --save

引入并注册：

import VueResource from 'vue-resource'
Vue.use(VueResource)

发起请求：

this.$http.get('http://jsonplaceholder.typicode.com/users').then(
    response => {
        this.someData = response.body
    },
    response => {
        console.log('err')
    }
)

使用 Axios

安装：

npm install axios --save

引入：

import Axios from 'axios'

发起请求：

Axios.get(api).then((response) => {
    this.list = response.body
}).catch((error) => {
    console.log(error)
})

组件通信

父组件向子组件传值

父组件声明：

<v-head :title="title" :run="run"></v-head>

子组件接收：

export default {
    props: ['title', 'run']
}

子组件主动获取：

this.$parent.msg

子组件向父组件传值

方式一：通过 ref 调用方法

父组件声明：

<v-head ref="head"></v-head>

父组件调用：

this.$refs.head.run()

方式二：通过 $emit 触发事件

子组件传值：

this.$emit('handleStop', {
    localId: localId
})

父组件接收：

<record-voice @handleStop="saveRecordVoice" v-show="showRecordVoice" />

methods: {
    saveRecordVoice(param) {
        this.showRecordVoice = false
        this.localId = param.localId
    }
}

非父子组件通信（事件总线）

定义事件总线：

// VueEvent.js
import Vue from 'vue'
var VueEvent = new Vue()
export default VueEvent

组件 A 发送事件：

VueEvent.$emit('to-news', this.msg)

组件 B 接收事件：

VueEvent.$on('to-news', function(data) {
    this.msg = data
})

Vue Router

安装与配置

安装：

npm install vue-router --save

引入并注册：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

定义路由：

import Home from './components/Home'
import News from './components/News'

const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News }
]

创建路由实例：

const router = new VueRouter({
    routes
})

挂载到 Vue 实例：

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

路由使用

声明路由链接：

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr>
<router-view></router-view>

编程式导航

// 路径跳转
this.$router.push({ path: 'news' })

// 命名路由跳转
this.$router.push({ name: 'content', params: { aid: 123 } })

动态路由传值

路由配置：

{ path: '/content/:aid', component: Content }

传递参数：

<router-link :to="'/content/' + key">{{ key }}{{ item }}</router-link>

获取参数：

this.$route.params

Query 传值

传递参数：

<router-link :to="'/product?aid=' + key">{{ key }}{{ item }}</router-link>

路由配置：

{ path: '/product', component: Product }

获取参数：

this.$route.query

History 模式

const router = new VueRouter({
    mode: 'history',
    routes
})

嵌套路由

路由配置：

{
    path: '/user',
    component: User,
    children: [
        { path: 'useradd', component: UserAdd },
        { path: 'userlist', component: UserList }
    ]
}

模板使用：

<div class="left">
    <ul>
        <li><router-link to="/user/useradd">用户增加</router-link></li>
        <li><router-link to="/user/userlist">用户列表</router-link></li>
    </ul>
</div>
<div class="right">
    <router-view></router-view>
</div>

路由模块化

将路由配置提取到独立文件 router.js：

export default router

在入口文件引入：

import router from './router/router'

Vuex 状态管理

安装与配置

安装：

npm install vuex --save

引入并注册：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

定义 Store

定义状态：

var state = {
    count: 1
}

定义修改方法：

var mutations = {
    incCount() {
        ++state.count
    }
}

创建 Store 实例：

const store = new Vuex.Store({
    state,
    mutations
})

export default store

单文件组件模板

<template>
    <div class="wrapper">
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            // 请求数据逻辑
        }
    }
}
</script>

<style scoped>
.wrapper {
}
</style>

常用 UI 框架与工具

UI 框架

框架	说明	链接
Vuetify	Material You 主题 UI	vuetifyjs.com
Mint UI	移动端 UI	mint-ui.github.io
Element Plus	通用 UI 组件库	element-plus.org
iView	通用 UI 组件库	iviewui.com
NativeScript Vue	原生 APP 开发	nativescript-vue.org

常用工具库

Axios：HTTP 请求库
Echarts：数据可视化图表
localforage：离线存储方案
vue-print-nb：打印功能
motion：动画库

总结

这份速查手册涵盖了 Vue 2 开发的核心知识点：

环境搭建与项目初始化
核心语法：属性绑定、方法、生命周期
组件系统与通信方式
路由配置与参数传递
Vuex 状态管理
常用 UI 框架与工具库

建议结合 Vue.js 官方文档深入学习各模块的详细用法。