Vue之Render函数进阶篇

最新推荐文章于 2025-04-14 15:15:47 发布

原创最新推荐文章于 2025-04-14 15:15:47 发布 · 5.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #render

Vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了Vue.js中v-if/v-else、v-for、v-model等指令的使用方法，以及如何利用JavaScript实现模板功能。同时，探讨了Vue的修饰符、自定义指令、作用域插槽等内容，为开发者提供了深入理解Vue渲染机制的指南。

上一篇文章介绍了Render函数基本的用法以及渲染场景，本篇文章主要介绍利用JavaScript代替模板功能。

一、v-if / v-else
利用if else代替：
在这里插入图片描述

二、v-for
必须用map：
在这里插入图片描述

三、v-model
父子组件相互传值：
在这里插入图片描述

在这里插入图片描述

四、修饰符
(1)：Vue自带修饰符：

修饰符	前缀	作用
.once	~	事件只执行一次
.capture	!	给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。
.passive	&	启动被动监听器，触发默认行为
.capture.once	~!	使用多种修饰符
.once.capture	~!	使用多种修饰符

在这里插入图片描述

(2)：其他修饰符：

修饰符	use
.stop	event.stopPropagation()
.prevent	event.preventDefault()
key .enter or .13	event.keyCode == 13 or event.keyCode == enter
ctrl、shift or alt	event.shiftKey、event.altKey or event.ctrlKey

在这里插入图片描述

五、关于Vue其他：
官方目前给出：

render: h =>{
	h('p',{
	  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
	  // 赋值，因为 Vue 已经自动为你进行了同步。
	  directives: [
	    {
	      name: 'my-custom-directive',
	      value: '2',
	      expression: '1 + 1',
	      arg: 'foo',
	      modifiers: {
	        bar: true
	      }
	    }
	  ],
	  // 作用域插槽格式
	  // { name: props => VNode | Array<VNode> }
	  scopedSlots: {
	    default: props => createElement('span', props.text)
	  },
	  // 如果组件是其他组件的子组件，需为插槽指定名称
	  slot: 'name-of-slot',
	  // 其他特殊顶层属性
	  key: 'myKey',
	  ref: 'myRef',
	  // 如果你在渲染函数中向多个元素都应用了相同的 ref 名，
	  // 那么 `$refs.myRef` 会变成一个数组。
	  refInFor: true
  },'其他')
}