runtime template in vuejs
在使用vuejs开发的过程中,有时候我们需要动态模板的场景,也就是说模板并不是静态定义好的,而是动态变化的。
比如在做一个所见所得编辑器时,编辑人员可能时刻需要调整他设计的页面内容,而如果页面内容包含vue组件的话,这时如果需要实时预览效果的话,就必须要解决动态模板如何实时编译运行的问题。
我们知道v-html有点接近我们的需求,可是v-html仅仅能够展示标准的html元素,不能包含vue组件的元素。
搜索了很多文章结合自己的探索,有两个方式:
1. 直接使用vuejs的render函数
export default {
props: [ 'tpl'],
components: { VueCompA, VueCompB },
created(){
try{
var res = Vue.compile(this.tpl,{}, this)
this.$options.render = res.render
this.$options.staticRenderFns = res.staticRenderFns
}
catch (err){
console.log(err)
}
}
};
这样通过以下的调用即可:
<templatepreview :tpl="flyingTemplate"></templatepreview>
2.使用现成的模块
参考v-https://github.com/alexjoverm/v-runtime-template-template
需要注意的是以上方案能够工作的前提是Vue必须自带compiler编译器
runtime template in vuejs的更多相关文章
- vuejs心法和技法
原文地址:http://www.cnblogs.com/kidsitcn/p/5409994.html 所有的vuejs组件都是被扩展的vue实例: var MyComponent = Vue.ext ...
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js?
在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS.在这篇文章中,我将 ...
- Razor - 模板引擎 / 代码生成 - RazorEngine
目录 Brief Authors Official Website RazorEngine 的原理 - 官方解释 安装记录 Supported Syntax (默认实现支持的语法) 测试记录 - ca ...
- TModJS:README
ylbtech-TModJS:README 1.返回顶部 1. TmodJS 项目已经停止维护,请使用更好的代替方案:art-template-loader TmodJS(原名 atc)是一个简单易用 ...
- TModJS:使用tmodjs
ylbtech-TModJS:使用tmodjs 1.返回顶部 1. 1.安装 npm install -g tmodjs 2.配置 我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀 ...
- 使用tmodjs
1.安装 npm install -g tmodjs 2.配置 我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀名都是.html,而build用于存放编译后输出的模板js. 如果不 ...
- Windows平台CUDA开发之前的准备工作
CUDA是NVIDIA的GPU开发工具,眼下在大规模并行计算领域有着广泛应用. windows平台上面的CUDA开发之前.最好去NVIDIA官网查看说明,然后下载对应的driver. ToolKits ...
- .Net Core Vue Qucik Start
.Net Core Vue Qucik Start This is a ASP.NET Core 3.0 project seamlessly integrationed with Vue.js te ...
- Vue Component Registration All In One
Vue Component Registration All In One Vue 注册自定义组件 <template> <div class="back-to-top-c ...
随机推荐
- 简单文件传输协议TFTP分析还原
- 协议介绍 TFTP有如下特征: 1.UDP承载,请求端口固定为69: 2.没有列出目录内容功能: 3.无验证和加密机制: 4.仅有读取或写入文件功能: 5.支持三种不同的传输模式:"ne ...
- [转]JVM系列四:生产环境参数实例及分析【生产环境实例增加中】
原文地址:http://www.cnblogs.com/redcreen/archive/2011/05/05/2038331.html java application项目(非web项目) 改进前: ...
- MySQL第三课
首先创建一个数据库: CREATE DATABASE ku; Query OK, 1 row affected 查看一下是否有此数据库: SHOW DATABASES; +-------------- ...
- apicloud含有微信支付。支付宝支付和苹果内购的代码
apicloud含有微信支付.支付宝支付和苹果内购的代码 <!DOCTYPE html> <html> <head> <meta charset=" ...
- fiddler---Fiddler弱网测试
无论是做web端还是app端的测试,我们都需要对弱网进行测试,对于弱网方法有很多种,如:Fiddler模拟弱网,控制电脑的网速等,今天介绍下Fiddler如何进行测试弱网 什么是弱网 弱网看字面意思就 ...
- 有用的link
资料 了解oi 刘汝佳代码仓库(紫书 c++参考手册 2018年洛谷日报索引 2019年洛谷日报索引 (其他oj: luogu 虚拟判官(名校oj都有 离线bzoj题库 (有时候进不去请点:rxz大爷 ...
- 巡风视图函数源码学习--view.py
记录一下巡风扫描器view.py这个脚本里的视图函数的学习,直接在代码里面做的注释,里面有一些print 代码是为了把数据打印出来小白我自己加的,勿怪勿怪.可能存在一些理解错误和不到位的地方,希望大佬 ...
- android appium微信等自动化的那些坑儿
1.下载appium自动化安装环境: appium客户端 python语言支持 android studio(包含android sdk和adb) java开发环境 2.微信x5内核调试(网上有详细配 ...
- talk 64
dGhpcyBpcyBhIGV4YW1wbGUKYmIxMjMxMjNACgoxNjMKCmFhMzA2MzA2
- 近似计算一个对象在js占用内存
内存 在很久之前,我就想查看一个对象在JS里占用多少内存了,直到最近由于线上使用了需要计算从服务端传输数据的大小,让这个需求尤为强烈. 预备知识 我们现在使用的js是高级语言,它在内存细节之上建立一个 ...