Vue之指令

三种指令

系统指令
自定义全局指令
自定义局部指令
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p ref="pTag">Hello Vue</p>
    <button @click="hint">Click</button>
    <br>
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script>
    //自定义全局指令
    Vue.directive('upper-text',function(el,bingding) {
        el.innerHTML = bingding.value.toUpperCase()
    })
    new Vue({
        el:"#app",
        data:{
            msg:'I Love You ! Hello Vue '
        },
        // 局部自定义指令
        directives:{
            'lower-text':function(el,bingding){
                el.textContent = bingding.value.toLowerCase()
            }
        },
        methods: {
            hint(){
                // 内置指令
                alert(this.$refs.pTag.innerHTML)
            }
        }
    })
</script>
</body>
</html>
posted @ 2021-01-07 20:14  陌上的忧伤的个人博客  阅读(57)  评论(0)    收藏  举报