vue 新学习 07 vue指令，自定义指令

01.Vue.js 指令是用于在 HTML 元素上添加特定行为的特殊属性。通过指令，我们可以在 DOM 元素上绑定数据、监听事件、渲染列表、条件渲染等等。

以下是一些常见的 Vue.js 指令：

v-text
v-html（不建议使用）
v-show
v-if / v-else-if / v-else
v-for
v-bind
v-on
v-model
v-slot
v-pre（使用频率很低）
v-once（使用频率很低）
v-cloak（使用频率极低，不细介绍）

1、v-text
v-text 指令，会把该元素下面的所有内容替换掉。

<div v-text="hello vue">hello world</div>

现实结果是：hello vue
2、v-html
v-html 指令，会用一个HTML标签字符串，替换该元素下面的所有内容。

但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

<div v-html="
'<span style=&quot;color:red&quot;>hello vue</span>' "> 
  hello world
</div>

现实结果是：字体颜色为红色的 hello vue

3、v-pre（使用频率很低）
v-pre 指令，跳过这个元素和它的子元素的编译过程。

	<!-- v-pre -->
    <span v-pre>{{ this will not be compiled }}</span>
    <!-- 页面直接显示以下内容 -->
    {{ this will not be compiled }}

运行上述页面，渲染结果为： {{ this will not be compiled }}
4、v-once（使用频率很低）
v-once 指令，只渲染元素和组件一次。作用是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。

<template>
	<div>
		<div v-once>{{msg}}</div>
		<button @click="editTitle">编辑标题</button>
	</div>
</template
<script>
export default {
	data(){
		return {
			msg: "第一次渲染"
		}
	},
	methods: {
		editTitle(){
			this.msg = "第二次渲染"
		}
	}
}
</script>

如上即使触发 button 的 click事件，也不会改变 msg的渲染状态