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. HDU 4888 Redraw Beautiful Drawings 网络流 建图

      题意: 给定n, m, k 以下n个整数 a[n] 以下m个整数 b[n] 用数字[0,k]构造一个n*m的矩阵 若有唯一解则输出这个矩阵.若有多解输出Not Unique,若无解输出Impossib ...

    2. blob转base64位 base64位转blob

      //**dataURL to blob** function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0]. ...

    3. 开源项目MultiChoiceAdapter详解(六)——GridView和MultiChoiceBaseAdapter配合使用

      这篇其实没啥重要的,主要就算是个总结吧. 一.布局文件 这里实现的是类似于上图的多图选择的效果.关键在于item布局文件的写法.这也就是这个框架奇葩的一点,莫名其妙的要在一个自定义控件里面再放一个自定 ...

    4. selector属性介绍

      本文来自:http://blog.csdn.net/brokge/article/details/9713041 简介: 根据不同的选定状态来定义不同的现实效果 分为四大属性: android:sta ...

    5. [Android Pro] AndroidStudio IDE界面插件开发(进阶篇之Action机制)

      转载请注明出处:[huachao1001的专栏:http://blog.csdn.net/huachao1001/article/details/53883500] 从上一篇<AndroidSt ...

    6. ASP.NET MVC 中使用JavaScriptResult asp.net mvc 返回 JavaScript asp.mvc 后台返回js

      return this.Content("<script>alert('暂无!');window.location.href='/Wap/Index';</script&g ...

    7. 深入JVM系列(二)之GC机制、收集器与GC调优

      一.回想JVM内存分配 须要了解很多其它内存模式与内存分配的,请看 深入JVM系列(一)之内存模型与内存分配 1.1.内存分配: 1.对象优先在EDEN分配 2.大对象直接进入老年代  3.长期存活的 ...

    8. Swift3.0:照片选择

      一.介绍 图片选择或者拍照功能: 1.选择相册中的图片或是拍照,都是通过UIImagePickerController控制器实例化一个对象,然后通过self.presentViewController ...

    9. Sutherland-Hodgeman多边形裁剪

      原文地址:http://course.cug.edu.cn/cugFirst/computer_graphics/class/course/3-3-1-a.htm

    10. sharding-jdbc之——分库分表实例

      转载请注明出处:http://blog.csdn.net/l1028386804/article/details/79368021 一.概述 之前,我们介绍了利用Mycat进行分库分表操作,Mycat ...