vue快速上手-1

vue官方文档

1. 搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。

如何安装node?

安装好node默认已经安装好npm了，所以不用单独安装了。
vue-cli2:

npm install vue-cli -g

vue-cli3/cli4:

npm install -g vue@cli

vue引用各种资源在网速不太理想的情况下，可能比较慢，推荐安装淘宝镜像

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

2. 创建新项目

• vue-cli2:

vue init webpack 2.0project

2.0版本项目结构详细介绍

• vue-cli3/cli4:

vue create 3.0project

3.0版本项目结构详细介绍

3. 启动项目

• vue-cli2:

npm run dev / cnpm run dev

• vue-cli3/cli4:

npm run serve / cnpm run serve

在这里，推荐使用2.0版本：

cli2个性化强一些，可以更友好的配置webpack；cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装。
两者都可以符合开发需求，个人比较熟悉cli2版本。
两者区别

4. mvvm简单介绍

众所周知vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。

View是视图，就是DOM；对应视图也就是HTML部分--代表UI组件，它负责将数据模型转化成UI展现出来。 Model是模型，就是vue组件里的data，或者说是vuex里的数据；--代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ViewModel--监听模型数据也就是data的的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewMode进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法

5. vue的生命周期

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.el 也在文档内。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

activated

keep-alive 组件激活时调用。

deactivated

keep-alive 组件停用时调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

举例：login.vue

5. vue组件

组件概念：

​ html、css与js的集合，为该集合体命名，用该名字复用html、css与js组成的集合体构成复用性。

组件分类：

​ 根组件：new Vue()生成的组件

​ 局部组件：组件名={}，{}内部采用的是部Vue语法

​ 全局组件：Vue.component（‘组件名’，{}），{}内部采用的是Vue语法

组件的特点：

​ 1、组件都有管理组件HTML页面结果的template实例成员，template中有且只有一个根标签；

​ 2、根组件都是作为最顶级层的父组件，局部与全局组件作为子组件，也可以成为其他局部与全局父组件；

​ 3、子组件的数据需要隔离(数据组件化，每一个组件拥有自己的数据独立名称空间)；

​ 4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件

简单举例组件使用：

定义需要被引入的组件YesOrNoSelect.vue

注册组件
在main.js中全局注册

import YesOrNoSelect from '@/components/YesOrNoSelect'
Vue.component('yes-or-no-select', YesOrNoSelect)

或者在HelloWorld.vue中局部注册

使用自定义的组件 HelloWorld.vue

关于组件之间的通信