Vue.js学习笔记：关于组件挂载

最近学习到Vue.js的组件部分，在看完官方文档之后还是一头雾水，于是自己试验了一下，将试验结果记录下来，以便查阅。

首先附上官方文档地址 ： http://cn.vuejs.org/guide/components.html#u6CE8_u518C 

我在跟着文档做了一遍之后，渲染结果为：

  
A custom component!

到这里都没什么问题，于是我在Vue实例中加上了data:{a:"asd"}，而后将template的内容改为：template: '

{{a}} custom component!

'，得到的结果：

  
custom component!

也就是说使用这种组件注册的方式调用不到Vue实例中的data数据！

不能绑定数据实时变化这个问题就有点大了，于是我在api文档中找到了： http://cn.vuejs.org/api/#Vue-extend 另外一种引入组件的方式，代码如下：

// 创建可复用的构造器
var Profile = Vue.extend({
  template: '
{{firstName}} {{lastName}} aka {{alias}}
'
})
// 创建一个 Profile 实例
var profile = new Profile({
  data: {
    firstName: 'Walter',
    lastName: 'White',
    alias: 'Heisenberg'
  }  
})
// 挂载到元素上
profile.$mount('#point')

这下运行正常了，这种方式跟上一种的区别在于这一种是直接挂载到指定的元素内部， 且创建的实例比如

var profile = new Profile({})

必须跟构造器的变量名相同

var Profile = Vue.extend({})

否则找不到数据。

创建实例的时候也可以用el属性来挂载组件，比如：

var profile = new Profile({
		el:"#point",
		  data: {
		    firstName: 'Walter',
		    lastName: 'White',
		    alias: 'Heisenberg'
		  }  
		})

效果与

profile.$mount('#point')

挂载效果相同