vue学习笔记（二）

（一）中主要介绍了vue.js的v-xxx指令，这次最主要学习vue中的核心组件构成

组件必须是挂载在某个元素下才能被渲染的。

整个组件使用的过程大概是这样：

使用Vue.extend()组件构造器来构造组件->使用Vue.component(param1,param2)来注册组件->实例化new Vue（）挂载组件。

有时候我们直接在Vue.component中创建组件构造器。【这是一种语法糖】

代码如下

如果完全照着流程走（创建组件构造器-注册组件-挂载组件）则代码如下

我们刚才提到，也是一个重点，就是【组件必须被挂载才会渲染】，如下面代码中只有#app1和#app2可以被渲染。

调用Vue.component注册的组件是全局注册，可以挂载在任意元素下。

局部注册则不同，比如要在某个组件中再注册子组件就要使用局部注册

如上代码，则my-component只能在#app1中使用，我们在app2中使用my-component，浏览器会显示一个err

假设说在一个父组件中再注册子组件是这样的：

尤其需要关注的是必须用

包裹起来，这样我们只能在parent-component中使用child-component。

更准确地说：【child-component只能在parent-component的 template中使用！！！】

语法糖

刚才有提及语法糖，其实就是一种简化的写法（虽然我觉得其实不简化写起来会比较有条理）

无论是全局注册的语法糖还是局部注册的语法糖，本质上都是省略Vue.extend()的使用

改写一下刚才的代码。用语法糖来写的话如下

简化了很多，但是需要注意细节

使用template标签或者script标签将HTML模板分离

在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。

庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用script标签的话，代码如下所示

用