render函数的理解和简单使用

本文介绍了Vue中render函数的使用,强调了在需要JavaScript完全编程能力时使用render函数的优势。文章通过对比template写法,详细阐述了render函数中的createElement()方法,包括其参数的含义和使用方式,并提供了render函数的详细写法。
摘要由CSDN通过智能技术生成

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

详细可参考vue官方文档

1.template写法

此处省略html结构,参考下一步

<script type="text/javascript">
	vue.component('ele',{
   
		template: '<div id="element" :class="{show:show}" @click="handleClick">标签内的文本内容</div>',
		data() {
   
			return {
   
				show:true
			}
		},
		methods: {
   
			handleClick() {
   
				console.log('clicked !');
			}
		}
	})
	var vm = new Vue({
   
		// 管理边界->选取目标 
		el:'#app',
	    
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值