Vue为什么没有templateUrl
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\
\
',
});
```
- 使用
<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的更多相关文章
- [译]为什么Vue不支持templateURL
原文链接 Vue的新用户最常问的一个问题,特别是以前使用Angular的用户,是"我可以使用" templateURL吗?这个问题我回答过很多次,现在写一个统一回复. 在Angul ...
- angular配置路由/子页面+vue配置路由/子页面
1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同. routes: [ { path: '/', ...
- angular与vue的应用对比
因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...
- Miniprofiler在swagger、vue、angular中的使用
本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...
- vuejs angularjs 框架的一些比较(vue项目重构四)
使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...
- Vue 资源
一. 资源教程 综合类 vuejs 英文资料 Vue中文资料总汇 Vue.js 的一些资源索引 vue资料 入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist 英文教程 ...
- vue,react,angular三大web前端流行框架简单对比
常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
随机推荐
- c++ Pthread创建线程后必须使用join或detach释放线程资源
http://www.cppblog.com/prayer/archive/2012/04/23/172427.html 这两天在看Pthread 资料的时候,无意中看到这样一句话(man pthre ...
- 2018房地产沉思录 z
在中国,房价问题几乎有一个铁律:越调控越暴涨. 刚刚进入5月,全国各地发布的调控政策数量就已经超过了115个.仅4月份,全国各种房地产调控政策合计多达33次,25个城市与部门发布调控政策,其中海南.北 ...
- 创建、修改、删除ORACLE表空间
//创建表空间 create tablespace MyFirstSpace datafile '/opt/oracle/app/oracle/product/9.2.0/dbs/MyFirstSpa ...
- Objective-C 入门笔记
简介 建立在C语言之上,可以混编C/C++代码,编写一个类需要二个文件: .h的头文件 .m的实现文件(如果是C/C++混编文件,文件后缀为.mm) 既然有头文件,所以很多人会拿它与C++进行类比,它 ...
- Java中CAS详解
在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题. (2 ...
- SeekBar的用法和自定义滑块的样式
SeekBar继承自ProgressBar,所以基本一样,我们自定义一般也就是顶一个滑块的图片而已. 布局文件 <RelativeLayout xmlns:android="http: ...
- [Web 前端 ] 五大WEB主流浏览器及四大内核
现在国内常见的浏览器有:IE.Firefox.Safari.Opera.Google Chome.QQ浏览器.搜狗浏览器.百度浏览器.猎豹浏览器.UC浏览器.360浏览器.遨游浏览器.世界之窗浏览器等 ...
- Chapter 6 -- Caches
CachesExplained Explanation for how to use Guava caches. explained Updated Jun 4, 2013 by lowas...@g ...
- IE9版本以下ajax 跨域问题解决
ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的. 让测试就发现问题了,IE8下请求不到数据,然后我查看一下自己写的js看有没有不兼容问题,可是都没有啊,为什么就请求不到呢. 我把ajax的e ...
- android中解决“Dex Loader] Unable to execute dex: Multiple dex files define LXXX”错误
原因 1. 出现这种问题的主要原因:那就是你的libs下面引用了两个相同功能的包,可能这两个包的版本不一样而已,去掉一个吧,选择一个合适的版本. 2.build path里面包重复引用.