一、Vue的实例
1.1、创建一个 Vue 的实例
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (viewmodel 的简称) 这个变量名表示 Vue 实例。
1、vue.js就是一个构造器，通过构造器Vue来实例化一个对象；例如：var vm = new Vue({});
2、实例化Vue时，需要传入一个参数（选项对象）；
3、参数：选项对象可以包含，数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等；
4、扩展构造器Vue，从而用预定义选项创建可复用的组件构造器，所有组件都是被扩展的Vue的实例，使用Vue.extend({})来扩展；
注意：尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。
当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：
我们会在稍后的组件系统章节具体展开。不过现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
1.2、数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重渲染。 值得注意的是只有当实例被创建时 data 中存在的属性是响应式的 。也就是说如果你添加一个新的属性，像：
那么对 b 的改动将不会触发任何视图的更新。
示例：
结果：
如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：
除了 data 属性，Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 ＄，以便与用户定义的属性区分开来。例如：
在未来，你可以在 API 参考查阅到完整的实例属性和方法的列表 。
1.3、实例属性
解释
1.4、实例方法
vm.＄options其实也就是我们new Vue(options)options这个选项对象可传入的属性
1.5.1、computed计算属性
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
结果：
注意：
1、computed中定义的方法只允许当着属性用，不能带参数，这限制它的复用性。
4、computed计算属性可以对属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值
1.5.2、watch计算属性
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 ＄watch()，遍历 watch 对象的每一个属性。
示例：
结果：
注意：不应该使用箭头函数来定义 watcher 函数、对象类型时并非深拷贝的，只是引用。
1.5.3、方法methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
示例：
结果：
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
1.5.4、小结
computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对
属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。
1、每个Vue的实例都会代理其data对象里的所有属性，被代理的属性是响应的；
2、如果实例创建之后添加新的属性到实例上，不会触发视图更新；
3、不要在实例属性或者回调函数中（如 vm.＄watch('a',newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。
4、Vue实例暴露了一些有用的实例属性和方法，带有前缀 ＄ 便于与代理的data区分
a、vm.＄el：类型（HTMLElement）挂载元素，Vue实例的DOM根元素；
b、vm.＄data：类型（Object），Vue实例观察的数据对象
c、vm.＄props：类型（Object），属性
d、vm.＄options：类型（Object），用于当前Vue实例的初始化选项，在选项中需要包含自定义属性的时候很有用。
e、vm.＄parent：类型（Vue实例），父实例。
f、vm.＄root：类型（Vue实例），当前组件树的根Vue实例，如果没有父实例，就是实例本身。
h、vm.＄children：类型（Array(Vue实例)），当前实例的直接子组件
需要注意 ＄children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 ＄children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
i、vm.＄slots：类型（{ [name: string]: ?Array
k、vm.＄refs：类型（Object），一个对象，其中包含了所有拥有 ref 注册的子组件；
l、vm.＄isServer：类型（boolean），当前Vue实例是否运行于服务器；
官网对应
1.5.5、箭头函数
箭头函数是ES6引入的一种语法糖，使得写函数更加简便，类似Lambda表达式，基本格式如下：
（）=>｛｝
示例：
结果：
二、生命周期 2.1、实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.＄watch('a',newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
2.2、生命周期图示
下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
中文版：
1. beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2. created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，＄el 属性目前不可见。 可以在组件的这个期间请求数据，如果是keep-alive组件会被缓存起来，生命周期不会再次触发，如果需要更新数据可以watch当前router变化，如果router是当前组件所在的router则请求数据。
3. beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted
vm.＄el已挂载在文档内，对已有dom节点的操作可以在这期间进行。
5. beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
6.updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
7.activated
keep-alive 组件激活时调用。
8.deactivated
keep-alive 组件停用时调用。
9.beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
10.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
2.3、生命周期示例一
示例1：
初始化结果1：
修改msg的值为vue2后的结果：
执行销毁：
2.4、生命周期示例二
示例2：
初始化结果：
更新message的值：
手动销毁实例：
2.5、手动挂载与调用事件 2.5.1、手动挂载
vm.＄mount( [elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.＄mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
示例：
结果：
2.5.2、销毁实例
vm.＄destroy() 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
2.5.3、强制更新
vm.＄forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
三、Vue脚手架（vue-cli）
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
提供一个官方命令行工具，可用于快速搭建大型单页应用（SPA）。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
注意：CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。
3.1、环境搭建 3.1.1、安装node.js
从n ode.js官网 下载并安装node，安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。
如果安装不成功，可以直接把安装包修改成压缩包，解压后配置环境变量也可以，就成了绿色版。
这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。
注意版本不能太低，如果您已经安装了低版本的node可以使用npm直接更新。
3.1.2、修改npm为淘宝镜像
因为npm的仓库有许多在国外，访问的速度较慢，建议修改成cnpm，换成taobao的镜像。
打开命令行工具，复制如下配置：
安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。
版本号：
3.1.3、安装webpack
安装webpack，打开命令行工具输入：
安装完成之后输入
如下图，如果出现相应的版本号，则说明安装成功。
3.1.4、安装vue-cli脚手架构建工具
打开命令行工具输入：
安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
3.2、构建项目
1)、在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：
①cd 目录路径
②如果以安装git的，在相关目录右键选择Git Bash Here
2)、安装vue脚手架输入：vue init webpack projectName，注意这里的“projectName” 是项目的名称可以说是随便的起名，但是“ 不能用中文 ”。
提示选择项：
3）、cd 命令进入创建的工程目录，首先cd projectName；
4）、安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧
5）、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。
@H_404_621@
目录：
3.3、运行项目
6）、启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：
编译成功后可以直接在浏览器中查看项目：
3.4、Vue-cli HelloWorld
了解了默认的模板内容，我们可以开始定义自己的vue程序了，这里写一个简单的HelloWorld，在src目录下创建一个Hi.vue文件，内容如下：
{{msg}}
修改main.js
/ eslint-disable no-new /
new Vue({
el: '#app',template: '
})
运行结果：
四、示例下载
五、视频
六、作业
1、请定义任意一个Vue实例，触发Vue实例中的8个事件，将结果输出到控制台，要求可以观察到数据初始化与挂载情况。
2、请使用vue2+bootstrap完成如下功能：
要求如下：
d)、实现隔行换色
e)、实现按年龄排序
参考 ：
总结
以上所述是小编给大家介绍的Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/34457.html