学习内容

data必须是函数。通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。

实例

如下一个组件：

1
2
3
4
5
6

Vue.component('my-component', {
       template: '<span>{{ message }}</span>',
       data: {
           message: 'hello'
       }
   })

在浏览器运行会报错，提示The "data" option should be a function that returns a per-instance value in component definitions.即说明data必须是函数，所以改造一下变为：

1
2
3
4
5
6
7
8
9
10

var data={
       message: 'hello'
   };
   
   Vue.component('my-component', {
       template: '<span>{{ message }}</span>',
       data: function(){
           return data;
       }
   })

此时，就可以正常渲染了。但上面代码中还有一个问题，如果改变message，将影响所有组件，这不对，我们通过为每个组件返回全新的data对象来解决这个问题：

1
2
3
4
5

data: function(){
           return {
               message: 'hello'
           }
       }

学习内容

使组件成为原生 HTML 元素的形式，以is特性扩展

实例说明

DOM模板解析说明

当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。

上篇文章说明了组件的 全局注册 和局部注册 Vue学习之组件一

之前是写了一个文本框组件，就一行代码，其实完全可以写的更复杂点，也可以加样式，就跟平时写样式一样。比如我们可以写一个自定义的很炫酷的下拉菜单，然后在页面中需要的地方可以简单地用一个闭合标签引用，显然，这很方便，也使得代码更简洁。那我们现在思考一个问题，引用的组件是一模一样的，但我们在页面各处引用时，经常是需要有一点改变的，这就好比Windows上右键菜单，不同的图标右键菜单功能是不完全一样的。所以应该怎么做呢？

官网上给出Prop选项来传递数据。为了明白，举个栗子。

什么是组件？

引用官方话就是：

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

其实打个比方就是，组件就好比电脑中的硬盘，显卡，CPU等等，这些零件组成电脑，而组件就组成我们的页面。其中，需要明白的是组件是自定义标签。

  在建好博客后，我发现了一个尴尬的事，就是我的一些demo无法展示了，因为我的github page放了我的博客，无法放其他展示页面了，可是我又想放自己的展示网页，怎么办呢？

  我首先想到的是将文件放在博客文件下面，然后引用，但是hexo主题可能会对内容样式修改，资源多了会很乱的感觉，反反复复修改了不少东西，效果不尽人意。今天我特意上网查了一下关于github page的资料，发现原来还可以建多个page，只不过命名不是username.github.io的形式了。

  现在假设你拥有一个username.github.io的博客主页，然后你还想要添加页面去展示其他内容，你可以这么做：

  每一个用hexo搭建好博客的人都会在第一篇文章中来感慨一番，我也不例外。

  查看了很多文档，踩过不少坑，终于初步搭建好hexo博客。我是直接部署在github上的，省事。关于怎么搭建，我就不说了，毕竟网上教程实在太多了，看的我都头晕了，推荐去官网看文档。