Vue知识点精简汇总

一、组件component

1. 什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）

2. 定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件

3. 组件的分类

分类：全局组件、局部组件

4. 引用模板

将组件内容放到模板<template>中并引用

5. 动态组件

<component :is="">组件
多个组件使用同一个挂载点，然后动态的在它们之间切换

<keep-alive>组件

二、组件间数据传递

1. 父子组件

在一个组件内部定义另一个组件，称为父子组件
子组件只能在父组件内部使用
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

2. 组件间数据传递（通信）

2.1 子组件访问父组件的数据

a)在调用子组件时，绑定想要获取的父组件中的数据
b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
总结：父组件通过props向下传递数据给子组件
注：组件中的数据共有三种形式：data、props、computed

2.2 父组件访问子组件的数据

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

3. 单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

4. 非父子组件间的通信

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

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

三、 slot内容分发

本意：位置、槽
作用：用来获取组件中的原内容，类似angular中的transclude指令

四、 vue-router路由

1. 简介

使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

参考

bower info vue-router
cnpm install vue-router -S

2. 基本用法

a.布局
b.配置路由

3. 路由嵌套和参数传递

传参的两种形式：
a.查询字符串：login?name=tom&pwd=123
{{$route.query}}

b.rest风格url：regist/alice/456
{{$route.params}}

4. 路由实例的方法

router.push() 添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录

5. 路由结合动画

五、单文件组件

1. .vue文件

.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

.vue文件由三部分组成：<template>、<style>、<script>

    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js
    </script>

2. vue-loader

浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的

3. webpack

webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

官网
webpack版本：v1.x v2.x
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下

4. 示例，步骤：

4.1 创建项目，目录结构如下：

webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件

4.2 编写App.vue

4.3 安装相关模板

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

4.4 编写main.js

4.5 编写webpack.config.js

4.6 编写.babelrc

4.7 编写package.json

4.8 运行测试

npm run dev

六、 vue-cli脚手架

1. 简介

vue-cli是一个vue脚手架，可以快速构造项目结构
vue-cli本身集成了多种项目模板：
simple 很少简单
webpack 包含ESLint代码规范检查和unit单元测试等
webpack-simple 没有代码规范检查和单元测试
browserify 使用的也比较多
browserify-simple

2. 示例，步骤：

2.1 安装vue-cli，配置vue命令环境

cnpm install vue-cli -g
vue --version
vue list

2.2 初始化项目，生成项目模板

语法：vue init 模板名项目名

2.3 进入生成的项目目录，安装模块包

cd vue-cli-demo
cnpm install

2.4 运行

npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格

官网

问题Bug：如果版本升级到node 8.0 和 npm 5.0，控制台会报错：
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING

解决方法：
a)降低Node版本到7.9或以下
b)修改build/dev-server.js文件，如下：

        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat:2000 //添加此行
        })

参考：https://github.com/vuejs-templates/webpack/issues/731

一、模块化开发

1. vue-router模块化

cnpm install vue-router -S

1.1 编辑main.js

1.2 编辑App.vue

1.3 编辑router.config.js

2. axios模块化

cnpm install axios -S

使用axios的两种方式：
方式1：在每个组件中引入axios
方式2：在main.js中全局引入axios并添加到Vue原型中

3. 为自定义组件添加事件

二、 Elment UI

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率
ElementUI PC端
MintUI 移动端

官网

2. 快速上手

2.1 安装elment ui

cnpm install element-ui -S

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);   // 这种方式引入了ElementUI中所有的组件

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader

默认并没有style-loader模块，所以需要单独安装
    cnpm install style-loader --save-dev

2.4 使用组件

2.5 使用less

安装loader，需要两个：less、less-loader
在webpack.config.js中添加loader

cnpm install less less-loader -D

3. 按需引入组

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D

3.2 配置.babelrc文件

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]

3.3 只引入需要的插件

三、自定义全局组件（插件）

全局组件（插件）：就是指可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就都可以使用了，如vue-router

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

普通组件（插件）：每次使用时都要引入，如axios

import axios from 'axios'

四、 Vuex

1. 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，用来集中管理数据，类似于React中的Redux，都是基于Flux的前端状态管理框架

2. 基本用法

2.1 安装vuex

cnpm install vuex -S

2.2 创建store.js文件，在main.js中导入并配置store.选项

2.3 编辑store.js文件

Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：

state 定义属性（状态、数据）
getters 用来获取属性
actions 定义方法（动作）
commit 提交变化，修改数据的唯一方式就是显式的提交mutations
mutations 定义变化
注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化

2.4 编辑App.vue

在子组件中访问store对象的两种方式：
方式1：通过this.$store访问
方式2：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法：

mapState 获取state
mapGetters 获取getters
mapActions 获取actions

3. 分模块组织Vuex

|-src
    |-store
        |-index.js
        |-getters.js
        |-actions.js
        |-mutations.js
        |-modules  //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
            |-user.js
            |-cart.js
            |-goods.js
            |....

一、组件component

1. 什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）

2. 定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件

3. 组件的分类

分类：全局组件、局部组件

4. 引用模板

将组件内容放到模板<template>中并引用

5. 动态组件

<component :is="">组件
多个组件使用同一个挂载点，然后动态的在它们之间切换

<keep-alive>组件

二、组件间数据传递

1. 父子组件

2. 组件间数据传递（通信）

2.1 子组件访问父组件的数据

2.2 父组件访问子组件的数据

3. 单向数据流

4. 非父子组件间的通信

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

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

三、 slot内容分发

本意：位置、槽
作用：用来获取组件中的原内容，类似angular中的transclude指令

四、 vue-router路由

1. 简介

使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

参考

bower info vue-router
cnpm install vue-router -S

2. 基本用法

a.布局
b.配置路由

3. 路由嵌套和参数传递

传参的两种形式：
a.查询字符串：login?name=tom&pwd=123
{{$route.query}}

b.rest风格url：regist/alice/456
{{$route.params}}

4. 路由实例的方法

router.push() 添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录

5. 路由结合动画

五、单文件组件

1. .vue文件

.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

.vue文件由三部分组成：<template>、<style>、<script>

    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js
    </script>

2. vue-loader

3. webpack

官网
webpack版本：v1.x v2.x
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下

4. 示例，步骤：

4.1 创建项目，目录结构如下：

webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件

4.2 编写App.vue

4.3 安装相关模板

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

4.4 编写main.js

4.5 编写webpack.config.js

4.6 编写.babelrc

4.7 编写package.json

4.8 运行测试

npm run dev

六、 vue-cli脚手架

1. 简介

2. 示例，步骤：

2.1 安装vue-cli，配置vue命令环境

cnpm install vue-cli -g
vue --version
vue list

2.2 初始化项目，生成项目模板

语法：vue init 模板名项目名

2.3 进入生成的项目目录，安装模块包

cd vue-cli-demo
cnpm install

2.4 运行

npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格

官网

问题Bug：如果版本升级到node 8.0 和 npm 5.0，控制台会报错：
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING

解决方法：
a)降低Node版本到7.9或以下
b)修改build/dev-server.js文件，如下：

        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat:2000 //添加此行
        })

参考：https://github.com/vuejs-templates/webpack/issues/731

一、模块化开发

1. vue-router模块化

cnpm install vue-router -S

1.1 编辑main.js

1.2 编辑App.vue

1.3 编辑router.config.js

2. axios模块化

cnpm install axios -S

使用axios的两种方式：
方式1：在每个组件中引入axios
方式2：在main.js中全局引入axios并添加到Vue原型中

3. 为自定义组件添加事件

二、 Elment UI

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率
ElementUI PC端
MintUI 移动端

官网

2. 快速上手

2.1 安装elment ui

cnpm install element-ui -S

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);   // 这种方式引入了ElementUI中所有的组件

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader

默认并没有style-loader模块，所以需要单独安装
    cnpm install style-loader --save-dev

2.4 使用组件

2.5 使用less

安装loader，需要两个：less、less-loader
在webpack.config.js中添加loader

cnpm install less less-loader -D

3. 按需引入组

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D

3.2 配置.babelrc文件

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]

3.3 只引入需要的插件

三、自定义全局组件（插件）

全局组件（插件）：就是指可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就都可以使用了，如vue-router

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

普通组件（插件）：每次使用时都要引入，如axios

import axios from 'axios'

四、 Vuex

1. 简介

2. 基本用法

2.1 安装vuex

cnpm install vuex -S

2.2 创建store.js文件，在main.js中导入并配置store.选项

2.3 编辑store.js文件

Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：

state 定义属性（状态、数据）
getters 用来获取属性
actions 定义方法（动作）
commit 提交变化，修改数据的唯一方式就是显式的提交mutations
mutations 定义变化
注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化

2.4 编辑App.vue

在子组件中访问store对象的两种方式：
方式1：通过this.$store访问
方式2：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法：

mapState 获取state
mapGetters 获取getters
mapActions 获取actions

3. 分模块组织Vuex

|-src
    |-store
        |-index.js
        |-getters.js
        |-actions.js
        |-mutations.js
        |-modules  //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
            |-user.js
            |-cart.js
            |-goods.js
            |....

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,736评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,167评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,442评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,902评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,302评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,573评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,847评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,562评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,260评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,531评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,021评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,367评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,016评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,068评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,827评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,610评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,514评论 2赞 269

Vue知识点精简汇总

一、 组件component

1. 什么是组件？

2. 定义组件的方式

3. 组件的分类

4. 引用模板

5. 动态组件

二、 组件间数据传递

1. 父子组件

2. 组件间数据传递 （通信）

2.1 子组件访问父组件的数据

2.2 父组件访问子组件的数据

3. 单向数据流

4. 非父子组件间的通信

三、 slot内容分发

四、 vue-router路由

1. 简介

2. 基本用法

3. 路由嵌套和参数传递

4. 路由实例的方法

5. 路由结合动画

五、 单文件组件

1. .vue文件

2. vue-loader

3. webpack

4. 示例，步骤：

4.1 创建项目，目录结构 如下：

4.2 编写App.vue

4.3 安装相关模板

4.4 编写main.js

4.5 编写webpack.config.js

4.6 编写.babelrc

4.7 编写package.json

4.8 运行测试

六、 vue-cli脚手架

1. 简介

2. 示例，步骤：

2.1 安装vue-cli，配置vue命令环境

2.2 初始化项目，生成项目模板

2.3 进入生成的项目目录，安装模块包

2.4 运行

3. 使用webpack模板

一、模块化开发

1. vue-router模块化

1.1 编辑main.js

1.2 编辑App.vue

1.3 编辑router.config.js

2. axios模块化

3. 为自定义组件添加事件

二、 Elment UI

1. 简介

2. 快速上手

2.1 安装elment ui

2.2 在main.js中引入并使用组件

2.3 在webpack.config.js中添加loader

2.4 使用组件

2.5 使用less

3. 按需引入组

3.1 安装babel-plugin-component

3.2 配置.babelrc文件

3.3 只引入需要的插件

三、 自定义全局组件（插件）

四、 Vuex

1. 简介

2. 基本用法

2.1 安装vuex

2.2 创建store.js文件，在main.js中导入并配置store.选项

2.3 编辑store.js文件

2.4 编辑App.vue

3. 分模块组织Vuex

一、 组件component

1. 什么是组件？

2. 定义组件的方式

3. 组件的分类

4. 引用模板

5. 动态组件

二、 组件间数据传递

1. 父子组件

2. 组件间数据传递 （通信）

2.1 子组件访问父组件的数据

一、组件component

二、组件间数据传递

2. 组件间数据传递（通信）

五、单文件组件

4.1 创建项目，目录结构如下：

三、自定义全局组件（插件）

一、组件component

二、组件间数据传递

2. 组件间数据传递（通信）

五、单文件组件

4.1 创建项目，目录结构如下：

三、自定义全局组件（插件）