Vue与指令，用自定义指令模拟实现一个v-html

用自定义指令模拟实现v-html

//Home.vue
<template>
	<div class="home">
		<div v-mini-html="msg"></div>
	</div>
</template>

<script>
export default {
	name: "Home",
	data() {
		return {
			msg: "模拟实现v-html指令"
		};
	},
	directives: {
		// 使用函数实现
		"mini-html": (el, binding) => {
			el.innerHTML = binding.value;
		}
	}
};
</script>

关于innerHTML和textContent的区别：

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
• https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

参考Vue自定义指令:https://cn.vuejs.org/v2/guide/custom-directive.html

参考https://cn.vuejs.org/v2/api/#v-html