本篇博客基于Vue2.x
官方文档：https://cn.vuejs.org/v2/guide/instance.html

最近和同学合作一个设备信息管理的小项目，而同学找的模板不是前后端分离的
因此只能学习一下在 html文件中如何使用Vue，并学习一些之前没有理清的概念。

1. Vue实例

在Vue的官方教程中，也是从在html中使用Vue起步的，下面是一个简单的Hello World 例子。

<!DOCTYPE html>
<html>
<head><title>My first Vue app</title><script src="https://unpkg.com/vue"></script>
</head>
<body><div id="app"><!-- 用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 -->{{ message }}</div><script>// 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script>
</body>
</html>

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。
当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。
只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

var data = { a: 1 }
var vm = new Vue({el: '#example', // 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。data: data
})vm.$data === data // => true
vm.$el === document.getElementById('example') // => true// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用
})

 console.log(app.$data);
===========================out: {message: "Hello Vue!"}

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
如mounted钩子
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted被调用时 vm.$el 也在文档内。
mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在mounted内部使用vm.$nextTick：

mounted: function () {this.$nextTick(function () {   // 生命周期钩子的 this 上下文指向调用它的 Vue 实例。// Code that will run only after the// entire view has been rendered})
}

生命周期图示：

2. 注册组件

组件是可复用的 Vue 实例
每个组件必须只有一个根元素
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {return {count: 0}
}

有两种组件的注册类型：全局注册和局部注册。

2.1 通过 Vue.component 全局注册：

组件名就是 Vue.component 的第一个参数。
自定义组件名的规范为kebab-case (短横线分隔命名)，字母全小写且必须包含一个连字符

Vue.component('my-component-name', {// ... options ...
})

使用 PascalCase(首字母大写命名) 定义一个组件时，用两种命名法都可以引用组件

Vue.component('MyComponentName', { /* ... */ })

但是直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

2.2 局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({el: '#app',components: {'component-a': ComponentA,'component-b': ComponentB}
})

局部注册的组件在其子组件中不可用

2.3 在模块系统中局部注册单文件组件

如果使用了诸如 Babel 和 webpack 的模块系统。
创建一个 components 目录，并将每个组件放置在其各自的文件中。
在局部注册之前导入每个你想使用的组件。
例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'export default {components: {ComponentA,ComponentC},// ...
}

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称

包含了这个组件选项的变量名

2.4 在html中注册单文件组件

如果是一个页面中的组件复用，使用基本的局部注册就可以满足需求。
但是在这个项目中，需要在多个html文件中复用诸如侧边栏，顶边栏之类的组件。
因此还是考虑用单文件组件的方式进行注册。

为了在html文件中注册单文件组件，需要使用一个npm包http-vue-loader
github地址：https://github.com/FranckFreiburger/http-vue-loader

Load .vue files directly from your html/js. No node.js environment, no build step.

例如有个单文件组件my-component.vue

<template><div class="hello">Hello {{who}}</div>
</template><script>
module.exports = {data: function() {return {who: 'world'}}
}
</script>

在html文件中进行组件注册

<!doctype html>
<html lang="en"><head><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/http-vue-loader"></script></head><body><div id="my-app"><my-component></my-component></div><script type="text/javascript">new Vue({el: '#my-app',components: {'my-component': httpVueLoader('my-component.vue')}});</script></body>
</html>

其它使用示例参见github。

2.5 个人学习总结

可以发现http-vue-loader的示例中，单文件子组件中写的是module.exports = {}，而不是export default {}

以上一篇博客Vue学习笔记(1) 根据MDN教程，创建一个To-Do List为例
在APP.vue中是这样写的

export default {name: 'app',components: {ToDoItem,ToDoForm},// ...
}

之前没有系统学习JavaScript，没有思考过export default的作用，加上平时都是直接用Vue脚手架，导致忽略了一些问题，在写组件的时候直接copy export default {}不起效，浪费了很多时间。
回忆一下使用vue/cli前进行了什么操作

安装npm(Node Package Manager)，它是基于Node.js的包管理器
安装vue/cli

事实上，用Vue脚手架前安装Node的主要目的是使用npm这个前端开发的软件包管理器和使用WebPack进行模块化管理。
不使用npm，在页面引入 vue.min.js 也能使用Vue进行前端开发。

下面来解释下module.exports = {}和export default {}的区别：
学习参考：
https://segmentfault.com/a/1190000010426778

首先要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

nodeJS采用commonJs规范，
CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

为了让对象暴露于模块之外，只需把它们设置为 exports 对象的附加属性即可

在一个既定的模块内，可以把 exports 想象成 module.exports 的快捷方式。
exports 本质上就是在模块初始化前为 module.exports 的值进行初始化的一个变量。
这个值是对一个对象（这里是空对象）的引用。
这意味着 exports 与 module.exports 引用了同一个对象，也意味着如果为 exports 赋其它值不会影响到 module.exports。
Node 模块是通过 module.exports 导出的，如果直接将exports变量指向一个值，就切断了exports与module.exports的联系

不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。
ES6中的模块功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能。
export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
导出的不是一个具体的数值，而是一个对象

export default命令，为模块指定默认输出。

命名的导出	默认的导出
export class User {…}	export default class User {…}
import {User} from …	import User from …

学完Js语法，还是很疑惑为什么在脚手架创建的工程中，单文件组件的导出使用export default
template和style部分好像没有导出。

这时候查到了一个叫Vue Loader的东西，消除了我的疑惑。
文档：https://vue-loader.vuejs.org/zh/

Vue Loader

允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
为每个组件模拟出 scoped CSS；
在开发过程中使用热重载来保持状态。
vue 文件的script 会被解析成es6 的模块。export default 定义封装vue的属性，export 以外的部分也是整个模块的一部分。

这个问题还是没有完全搞明白，前端开发的知识还是太欠缺了。

Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件相关推荐

vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
oracle修改asm参数文件,学习笔记:Oracle RAC参数文件管理修改创建asm中的spfile文件...
天萃荷净 Oracle rac创建修改asm中的spfile文件内容 create spfile to asm --查看sid SQL> show parameter instance_name ...
10-1Python学习笔记 10-2C语言学习笔记：在文本编辑器中新建一个文件，写几句话来总结一下你至此学到的Python知识
10-1 Python学习笔记 : 在文本编辑器中新建一个文件, 写几句话来总结一下你至此学到的Python知识, 其中每一行都以"In Python you can"打头. 将这 ...
Vue学习笔记（1）（认识Vue、基础语法）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili 第一部分:认识Vue.Vue基本语法. 邂逅Vue.js 简单认识V ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...

Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件