怎么把Vue.js融会贯通

      {{count}}     + 

这一次，我们见到了新的内容:

1. Vue的新属性template。它的值用来加载html模板代码。本案例中，就是放置本来在主HTML内的两个标签。需要注意的是，它们之外包括了一个div标签。因为Vue2.0版本要求作为模板的html必须是单根的。

2. Vue的新属性components，用来注册一个局部组件。正是在此处，组件counter被注册，从而在html标签内可以直接使用来引用组件counter的。

尽管这个案例太小了，还看不出太大的好处。但是这样的组件引入，让相关性强的html元素和对应的数据、代码内聚到了一起，这是符合软件工程原则的、因此是值得鼓励的行为。

新组件完全可以分离到另外一个script文件内，从而达到不仅仅是逻辑上的代码和主html分离，也做到了物理上的分离。

另外，使用template在代码内些html，还是比较烦人：

1. 你得小心的在外层使用单引号，在内部使用双引号

2. 混杂js和html观感不佳

此时，可以使用的替代方法：

1. render函数。实际上所有的template字符串本来在内部就被编译为render函数的

2. 单文件组件技术

3. 或者vue支持的JSX。

当然，后两种方法就需要转译器和打包工具的配合。比如Babel和webpack的。

关于怎么把Vue.js融会贯通就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。