vue.js渲染时间磋该怎么处理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js渲染时间磋该怎么处理相关的知识，希望对你有一定的参考价值。
参考技术A vue.js渲染时间磋该怎么处理使用Jquery结合AngulraJs使用的时候，在render完table后，执行一段js脚本，把JqTable应用到该table上，能够捕获到AngularJs渲染完成页面的事件。
要达到这个目的，需要为当前的app自定义directive:
app.directive('onFinishRenderFilters', function ($timeout)
return
restrict: 'A',
link: function(scope, element, attr)
if (scope.$last === true)
$timeout(function()
scope.$emit('ngRepeatFinished');
);
;
);
然后，在需要监控的地方，加上该directive:
<tr ng-repeat="user in users" on-finish-render-filters>
<td>user.Id</td>
<td>user.Name</td>
<td>user.Salary</td>
</tr>
最后，补充上需要render完成之后的Js脚本:
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent)
//下面是在table render完成后执行的js
var table = $("#leaderBoard").dataTable(
bJQueryUI: true,
"sScrollX": '100%',
);
);本回答被提问者采纳 参考技术B
代码如下即可：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
当前时间：nowDate | dataFmt('yyyy-MM-dd HH:mm:ss')
</div>
<script src="./bower_components/vue/dist/vue.min.js"></script>
<script>
// vue2.0后，删除了所有内置的过滤器，都需要自己定义
Vue.filter('dataFmt',function(data,type)
that = new Date(data)
var o =
"M+": that.getMonth() + 1, //月份
"d+": that.getDate(), //日
"h+": that.getHours() % 12 == 0 ? 12 : that.getHours() % 12, //小时
"H+": that.getHours(), //小时
"m+": that.getMinutes(), //分
"s+": that.getSeconds(), //秒
"q+": Math.floor((that.getMonth() + 3) / 3), //季度
"S": that.getMilliseconds() //毫秒
;
var week = "0": "\\u65e5", "1": "\\u4e00", "2": "\\u4e8c", "3": "\\u4e09", "4": "\\u56db", "5": "\\u4e94", "6": "\\u516d" ;
if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (that.getFullYear() + "").substr(4 - RegExp.$1.length));
if (/(E+)/.test(type)) type = type.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\\u661f\\u671f" : "\\u5468") : "") + '周' + week[that.getDay() + ""]);
for (var k in o)
if (new RegExp("(" + k + ")").test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return type;
)
//一个vue的实例
new Vue(
el: '#app',
data:
nowDate:new Date()
,
//动态显示时间，要不然时间是死的，刷新页面才会更新
mounted: function ()
var that=this;
setInterval(function ()
that.nowDate=new Date();
,1000)
)
</script>
</body>
</html>
效果如图所示：
(git图跳动有点快，真实是1s改一次)
其他：
vue渲染时间，如果是时间戳，需要格式化，格式化有很多办法，最简单的是过滤器，除了自己（如上）写过滤器外。vue有一个很出名的过滤器插件moment.js。你也可以尝试一下。
比自己写省事
VUE.JS 渲染函数
【中文标题】VUE.JS 渲染函数【英文标题】：VUE.JS render function 【发布时间】：2019-01-16 19:06:37 【问题描述】：我正在学习 Vue.js，但在使用波纹管渲染功能时卡住了：
这是我从组件中调用的 javascript 文件。
import Button from './Button'
export default
functional: true,
render(h)
return(
<div id='toolbar'>
<Button type='markup' tag='strong'> B </Button>
<Button type='markup' tag='em'> I </Button>
<Button type='section' tag='h1'> H1 </Button>
<Button type='section' tag='h2'> H2 </Button>
<Button type='section' tag='ul'> UL </Button>
<Button type='section' tag='ol'> OL </Button>
<slot />
</div>
)
我需要导出上述函数，但出现错误。
5 | render(h)
6 | return(
> 7 | <div id='mobiledoc-toolbar'>
| ^
8 | <Button type='markup' tag='strong'> B </Button>
调用此函数时出现错误，不确定这是否仅适用于使用 backqouts/backticks
【问题讨论】：
首先我不太明白这个问题。但是要指出正确的方向，请使用 ES6 模板字符串来返回标记。看看这个：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… @bern 看来您应该提供一个您使用的Markup 库。
@henk.io & GONG - 我创建了一个叫做editor的组件，这个组件导入带有上面渲染功能的javascript文件，JS文件导入按钮标记的东西都应该在组件编辑器中渲染。
【参考方案1】：
在 redux 中，您确实可以将 HTML 标记与 JavaScript 混合使用。但是在 Vue.js 中没有这样的东西。唯一的方法是将您的 HTML 包装在模板字符串中：
return(`
<div id='mobiledoc-toolbar'>
...
</div>
`
或者为 vue 使用 <template> 模板格式（如果您使用的是 webpack）。此类组件如下所示：
<template>
<div id="toolbar">
</div>
</template>
<script>
export default new Vue(
);
</script>
<style lang="scss">
// Your styles here
</style>
然后就不需要render() 方法了。
PS：是的，正如@Bert 建议的那样，你也可以使用 Babel JSX Transform plugin 并使用 JSX 语法。
【讨论】：
所以我的问题是基于我对 vue 的工作原理缺乏了解，因为我认为也许我可以在 vue 中将 HTML 标记与 JavaScript 混合使用。贴出来的信息帮助我了解vueJS的基础知识，感谢提示以上是关于vue.js渲染时间磋该怎么处理的主要内容，如果未能解决你的问题，请参考以下文章