<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用自定义指令 -->
<h1 v-greeting:text.lowercase="msg"></h1>
<h1 v-greeting:html="msg"></h1>
<child-component></child-component>
</div>
<script src="./vue.js"></script>
<script>
// Vue.directive('greeting', {
// bind(el, binding, newNode, oldNode) {
// if (binding.modifiers.lowercase) {
// // 如果提供修饰符 lowercase，则将字符串全部小写
// el.innerText = binding.value.toLowerCase();
// } else if (binding.modifiers.uppercase) {
// // 如果提供修饰符 uppercase，则将字符串全部大写
// el.innerText = binding.value.toUpperCase();
// } else {
// // 如果没有提供任何修饰符，则将字符串原样输出
// el.innerText = binding.value;
// }
// },
// update(el, binding, newNode, oldNode) {
// if (binding.modifiers.lowercase) {
// // 如果提供修饰符 lowercase，则将字符串全部小写
// el.innerText = binding.value.toLowerCase();
// } else if (binding.modifiers.uppercase) {
// // 如果提供修饰符 uppercase，则将字符串全部大写
// el.innerText = binding.value.toUpperCase();
// } else {
// // 如果没有提供任何修饰符，则将字符串原样输出
// el.innerText = binding.value;
// }
// }
// })
// 指令名称：
// v-greeting
//
// 参数列表：
// text 作为文本输出
// html 作为标签输出
// 修饰符：
// lowercase 全小写
// uppercase 全大写
Vue.directive('greeting', (el, binding, newNode, oldNode) => {
if (binding.arg === 'text') {
if (binding.modifiers.lowercase) {
// 如果提供修饰符 lowercase，则将字符串全部小写
el.innerText = binding.value.toLowerCase();
} else if (binding.modifiers.uppercase) {
// 如果提供修饰符 uppercase，则将字符串全部大写
el.innerText = binding.value.toUpperCase();
} else {
// 如果没有提供任何修饰符，则将字符串原样输出
el.innerText = binding.value;
}
} else if (binding.arg === 'html') {
el.innerHTML = binding.value;
}
})
new Vue({
el: '#app',
data: {
msg: '<a href="">Hello World</a>'
},
components: {
'child-component': {
data () {
return {
childMsg: '<a href="">你好，世界</a>'
}
},
// 在子组件的模板中使用全局指令 v-greeting
template: `<div><h2 v-greeting:html="childMsg"></h2></div>`
}
}
})
</script>
</body>
</html>
