目录
v-text
将内容填充到标签体当中，并且是以覆盖的形式填充，而且填充的内容中即使存在HTML标签也只是会当做一个普通的字符串处理，不会解析。功能等同于原生JS中的innerText
v-html
将内容填充到标签体当中，并且是以覆盖的形式填充，而且将填充的内容当做HTML代码解析。功能等同于原生JS中的innerHTML。
v-html不要用到用户提交的内容上。可能会导致XSS攻击。
XSS攻击通常指的是通过利用网页开发时留下的漏洞 ，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript。
例如：
在 <li v-for="(item,index) of myList" v-html="item"> 中，item 是用户通过文本框输入并提交的内容。当用户输入一段包含 HTML/JavaScript 的字符串（例如 <imgsrc=x οnerrοr=alert('XSS')>）时，v-html 会将其直接渲染为 DOM 元素，其中 onerror 事件会被触发，执行 alert 等恶意代码。
v-cloak
v-cloak配合css样式来解决 {{}} 的闪现问题。
v-cloak指令使用在标签当中，当Vue实例接管之后会删除这个指令。
这是一段CSS样式：当前页面中所有带有v-cloak属性的标签都隐藏起来。
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue的其它指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{msg}}</h1>
</div>
<script>
//模拟：如果vue引入比较晚，在没有vue的时候，页面会出现胡子语法
// 晚3s引入vue.js
setTimeout(() => {
let scriptElt = document.createElement("script");
scriptElt.src = "./js/vue.js";
document.head.append(scriptElt);
}, 3000);
// 晚4s创建vm实例
setTimeout(() => {
const vm = new Vue({
el: "#app",
data() {
return {
msg: "v-cloak的实现原理",
};
},
});
}, 4000);
</script>
</body>
</html>v-once
只渲染一次。之后将被视为静态内容。
v-pre
使用该指令可以提高编译速度。带有该指令的标签将不会被编译。可以在没有Vue语法规则的标签中使用可以提高效率。不要将它用在带有指令语法以及插值语法的标签中。
自定义指令
局部自定义指令
函数的写法：
自定义指令，使用时，v-开始,设置自定义指令时，不需要加v-，注意多个单词用'-'连接
函数式的写法，初次绑定时bind调用，更新时update调用
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<!-- vm容器 -->
<div id="app">
<h1>{{msg}}</h1>
<!-- 需求1：自定义v-text-danger指令，将msg文字变红放入到div中 -->
<h2 v-text="username"></h2>
<div v-text-red="username"></div>
<a href="#" v-text-red="msg"></a><br />
<input type="text" v-model="username" />
<hr />
<!-- 需求2: 自定义一个指令，可以和v-bind指令完成相同的功能，同时将该元素的父级元素的背景色设置为蓝色。-->
<div style="border: 1px solid red">
<input type="text" v-bind-blue:value="username" />
</div>
</div>
<!-- vm容器 -->
<div id="root">
<h2 v-text-red="msg"></h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "自定义指令",
username: "jackson123",
};
},
// 配置自定义指定
directives: {
// 函数式:初始化执行一次,当数据变化式，重新执行
"text-red"(element, binding) {
// console.log('当前绑定指令的那个标签',element);
// console.log('是跟当前标签相关的数据对象',binding);
element.innerHTML = binding.value;
element.style.color = "red";
},
// 自定指令函数：初始化调用，数据更新时调用一次，差一个调用时机，当解析好的内容插入到页面时
// "bind-blue"(element, binding) {
// // console.log(binding);
// element.value = binding.value;
// // element.parentNode.style.backgroundColor='blue'
// console.log(element.parentNode);
// },
"bind-blue": {
// 元素与指令初次绑定的时候，自动调用bind
bind(element, binding) {
element.value = binding.value;
},
// 元素被插入到页面之后，这个函数自动被调用。
inserted(element, binding) {
element.parentNode.style.backgroundColor = "blue";
},
// 当模板重新解析的时候，这个函数会被自动调用。
update(element, binding) {
element.value = binding.value;
},
},
},
});
</script>
</body>
</html>对象的写法：
多一个执行时机，inserted元素插入到页面之后执行
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>自定义全局指令</h1>
<div v-text-red="msg"></div>
<div>
v-bind-blue：用户名：<input type="text" v-bind-blue:value="msg" />
</div>
</div>
<hr />
<div id="app2">
<div v-text-red="msg"></div>
<div>
v-bind-blue：用户名：<input type="text" v-bind-blue:value="msg" />
</div>
</div>
<script>
// 定义全局的指令
// 函数式 Vue.directive('指令名',回调函数)
Vue.directive("text-red", (element, binding) => {
element.innerHTML = binding.value;
element.style.color = "red";
});
// 对象式 Vue.directive('指令名',{bind(){},inserted(){},update(){}})
Vue.directive("bind-blue", {
bind(element, binding) {
element.value = binding.value;
},
inserted(element, binding) {
element.parentNode.style.backgroundColor='blue'
},
update(element, binding) {
element.value = binding.value;
},
});
const vm2 = new Vue({
el: "#app2",
data() {
return {
msg: "欢迎学习Vue框架！",
username: "lucy",
};
},
});
const vm = new Vue({
el: "#app",
data() {
return {
msg: "欢迎学习Vue框架！",
username: "jack",
};
},
});
</script>
</body>
</html>