vue.js为什么在component的vue.js template 引入的root标签中不能使用v-for

来源：蜘蛛抓取(WebSpider) 时间：2017-11-10 21:48 标签： vuejs component标签
Vue.js为什么不支持templateUrl模式 - 简书
Vue.js为什么不支持templateUrl模式
这篇文章是翻译的Vue.js的官方blog，最后加了些自己的理解。
原文地址：
很多Vue的新手，特别是使用过Angular的都会问“我能不能用 templateURL”,由于回答了太多次了，所以作者决定记下来。
Angular的世界里，templateURL 或者 ng-include 允许使用者在运行时动态的加载远程模板文件，这个看起来很方便，作为一个自带功能，但是让我们来重新审视下这个功能。
首先，它允许我们能够编写一个分离的html文件作为模板，这样子我们就能在编辑的时候看到正确的语法高亮，这也是很多开发者喜欢的原因（注：我觉得这是因为现在的人越来越懒，越来越依赖IDE的原因）。但是分离你的js和html代码真的是个好主意么？在Vue.js的组件中，js和html天然紧耦合，事实上，这些代码在一个文件更简单易懂。在2个文件中来回切换上下文逻辑实际上让开发者更不爽。在vue的概念里，组件才是vue.js的基本构建单位，并不是模板文件。每一个vue.js的模板都伴随着他的好基友js，分离他们太过于残忍了。
其次，因为templateURL是在运行时通过ajax的方式加载模板，不需要构建步骤为了你分离的文件。开发的时候，这很爽，但是上线部署的时候，你就麻烦了。在HTTP2.0没有大面积支持前，HTTP的请求数仍然是页面加载的最关键因素。想象一下，在你的网站中，每个组件都是用templateURL，那么页面出来前，你可能需要加载几十个HTTP请求。可能你并不知道，大多数的浏览器是限制同一域名的并发请求数量的。当你超过这个限额的时候，你页面的初始渲染时间就得等待每次请求的返回。当然，有工具可以帮助你提前注册你所有的模板，但是这就多了一个构建步骤，事实上，这就是大型网站的必然趋势。
那么，在没有templateURL的情况下，我们怎么处理开发环境问题呢？在js里面拼接字符串是很烂的做法，使用 &script type="x/template"&这种伪模板也不咋样。那么，现在是时候提升技能，使用像或者这种流行的模块构建器了。如果以前没有使用过，可能有点望而却步，但是相信我，这会有一个质的飞跃。对于大型网站和系统来说，适当的模块化很必要。更重要的是，你可以编写，再加上语法高亮，自定义的预处理器，热加载，ES6，内置css，自动前置。可以让开发者提高10倍效率。
最后，Vue还能懒加载你的组件，加上使用wabpack非常容易，尽管这是为了解决一个问---构建页面文件过于庞大，初始化比较慢，所以你最好还是分割开来比较好。
抛弃template，拥抱组件世界吧！！
以上是原文的翻译，并非完全直译，有很多自己的语言，大概意思相同，原谅我的文采不行。
个人觉得，Vue的组件思想跟React相似，把很多东西放在了js（这里是.vue文件）中，这种做法是把很多紧耦合的东西集中在一起管理，把原来分割开的css,html，js合成在一起，这个很像很多年的做法，所以很同意玉伯说的，看起来前端是在原地打转了一圈，开发模式回到了从前的样子，但是已经螺旋上升了哦，一切都在升级。
通过最近的使用来看，这种component的方式很方便，天然帮你做了解耦的分离，当然你需要转化自己的思维模式，不能在用jquery的操作DOM方式，同时和Angular也有很多区别，Vue并非一个框架，而是更像一个类库，这样很灵活，当然也会有人使用非常hack的方式来编写代码，可能会很蛋疼，这就需要自己注意了，对于团队而言，可以很好的积累各种组件，同时功能切分，合作起来更加容易，就看团队对Vue的理解程度了。
欢迎大家交流相关技术， 如果对Vue感兴趣，可以加QQ群：
阿里巴巴-- 前端
最近迷上了潜水和公路车
weibo：/gxiaogui?wvr=4&lf=regvue component组件使用方法详解
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了vue component组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
什么是组件
按照惯例，引用Vue官网的一句话：
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。&
组件component的注册
ponent('todo-item',{
props:['grocery'],
template:'&li&{{grocery.text}}&/li&'
var app7 = new Vue({
el:"#app7",
groceryList:[
{"id":0,"text":"蔬菜"},
{"id":1,"text":"奶酪"},
{"id":2,"text":"其他"}
&div id="app7"&
&todo-item
v-for="grocery in groceryList"
v-bind:grocery="grocery"
v-bind:key="grocery.id"&
&/todo-item&
局部注册：
var Child = {
template: '&div&A custom component!&/div&'
components: {
// &my-component& 将只在父模板可用
'my-component': Child
DOM模板解析说明
组件在某些HTML标签下会受到一些限制。
比如一下代码，在table标签下，组件是无效的。
&my-row&...&/my-row&
解决方法是，通过is属性使用组件
&tr is="my-row"&&/tr&
应当注意，如果您使用来自以下来源之一的字符串模板，将不会受限
&script type="text/x-template"&
JavaScript 内联模版字符串
data使用函数，避免多组件互相影响
&div id="example-2"&
&simple-counter&&/simple-counter&
&simple-counter&&/simple-counter&
&simple-counter&&/simple-counter&
var data = { counter: 0 }
ponent('simple-counter', {
template: '&button v-on:click="counter += 1"&{{ counter }}&/button&',
data: function () {
return data
el: '#example-2'
如上，div下有三个组件，每个组件共享一个counter。当任意一个组件被点击，所有组件的counter都会加一。
解决办法如下
ponent('simple-counter', {
template: '&button v-on:click="counter += 1"&{{ counter }}&/button&',
data: function () {
return {counter:0}
el: '#example-2'
这样每个组件生成后，都会有自己独享的counter。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 vuejs component标签 的文章

 

随机推荐