Why Vue.js doesn't support templateURL

Vue.js为什么不支持templateUrl模式

### 原因
1. templateUrl使用ajax的方式在运行时加载template,大型应用中数量庞大的组件,以及浏览器对请求数量的限制,将导致严重的app加载性能问题。
1. 以组件为APP的基础单元来开发,而不是template


### 推荐单文件的组件开发
vue中综合了react(单文件html字符串拼到死),和angularjs(大量ajax获取template),提出`my_component.vue`的单文件组件开发,将template,style和js集中在一个文件中,利用webpack来构建。目前sublime text已有vue文件的语法高亮插件,同时vue-cli也很给力,分分钟搭建好基础结构。这都不是什么事儿了。


### 打死不用构建工具/webpack
我们也还是有选择的,虽然官方不推荐,但是也总不能把你打死啊
1. 默默拼串
```js
Vue.component('todo-item',{
props: ['title'],
template: '\

  • \
    {{ title }}\
    X\
  • \
    ',
    });
    ```

    1. 使用<script type="x/template">
    <script type="text/template" id="tpl">
    <div>
    <p>hello vue</p>
    </div>
    </script>
    var MyComponent = Vue.extend({
    template: '#tpl'
    });

    ### 最佳实践
    使用`.vue`单文件开发组件,使用webpack构建

    Vue为什么没有templateUrl的更多相关文章

    1. [译]为什么Vue不支持templateURL

      原文链接 Vue的新用户最常问的一个问题,特别是以前使用Angular的用户,是"我可以使用" templateURL吗?这个问题我回答过很多次,现在写一个统一回复. 在Angul ...

    2. angular配置路由/子页面+vue配置路由/子页面

      1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

    3. angular与vue的应用对比

      因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...

    4. Miniprofiler在swagger、vue、angular中的使用

       本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...

    5. vuejs angularjs 框架的一些比较(vue项目重构四)

      使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...

    6. Vue 资源

      一. 资源教程 综合类 vuejs 英文资料 Vue中文资料总汇 Vue.js 的一些资源索引 vue资料 入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist 英文教程 ...

    7. vue,react,angular三大web前端流行框架简单对比

      常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

    8. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

      DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

    9. Vue.js 和 MVVM 小细节

      MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

    随机推荐

    1. 架构:The Onion Architecture : part 2(洋葱架构:第二篇)(转载)

      原位地址:http://jeffreypalermo.com/blog/the-onion-architecture-part-2/. In part 1, I introduced an archi ...

    2. 梅尔罗斯百度云在线观看迅雷下载Patrick Melrose磁力BT下载

      原名:Patrick Melrose 地区:英国 语言:英语 首播:2018-05-12(美国) 电视台:Showtime 类型:剧情 别名:浮生若梦 编剧:大卫·尼克尔森 导演:爱德华·贝尔格 主演 ...

    3. jQuery中attr和prop方法的区别说明

      jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

    4. vim去除行显示;vim全部复制命令

      行显示和隐藏: set nu set nu! 直接上命令: ggVG*y 解释一下上面的命令: ggVG   ——全选 *y  —— 复制到剪贴板 gg 是光标定位到文件首行 V  是进入可视模式 G ...

    5. SpringBoot整合Quartz定时任务 系统job Spring Boot教程 调度任务

      原文地址:https://www.cnblogs.com/allalongx/p/8477368.html 构建工程 创建一个Springboot工程,在它的程序入口加上@EnableScheduli ...

    6. 洛谷 P1347 排序

      题目描述 一个不同的值的升序排序数列指的是一个从左到右元素依次增大的序列,例如,一个有序的数列A,B,C,D 表示A<B,B<C,C<D.在这道题中,我们将给你一系列形如A<B ...

    7. 从头认识Spring-2.1 自己主动装配(2)-byType(2)

      为了解决配置文件中面出现多个同类型的Bean而byType无法匹配的问题.引入了primary和autowire-candidate属性. 1.primary 因为全部bean默认的primary都是 ...

    8. windows核心编程-互斥器(Mutexes)

      线程同步的方式主要有:临界区.互斥区.事件.信号量四种方式. 前边讲过了临界区线程同步-----windows核心编程-关键段(临界区)线程同步,这章我来介绍一下互斥器(Mutexes)在线程同步中的 ...

    9. Hadoop vs Spark性能对比

      http://www.cnblogs.com/jerrylead/archive/2012/08/13/2636149.html Hadoop vs Spark性能对比 基于Spark-0.4和Had ...

    10. Building LinkedIn’s Real-time Activity Data Pipeline

      转自:http://blog.163.com/guaiguai_family/blog/static/20078414520138911393767/ http://sites.computer.or ...