常用内置指令与自定义指令

最新推荐文章于 2024-04-02 21:06:39 发布

qq_44571236

最新推荐文章于 2024-04-02 21:06:39 发布

阅读量246

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_44571236/article/details/104069168

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

内置标签 ref 的使用方法

在要指定的标签中加入 ref=" " 属性
在Vue实例中通过 this.$refs.name 找到对应属性

<div id="example">
   <p ref="content">whf</p>
    <button @click="hint">提示</button> 
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
        },
        methods:{
            hint(){
                alert(this.$refs.content.textContent)
            }
        }
    })
</script>

代码说明：点击提示按钮弹出p标签里的文本内容

自定义指令

1) 注册全局指令

Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})

2) 注册局部指令

directives : {
'my-directive' : function (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}

使用指令

v-my-directive='xxx'         //注意：v- 后面的都是指令的名称

自定义指令应用之大小写转换指令

需求：自定义2个指令
1.功能类似于v-text,但转换为全大写 v-upper-text
2.功能类型于v-text，但转换为全小写 v-lower-text

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置指令</title>
    <style>
        [v-cloak]{
            display:none
        }
    </style>
</head>
<body>
<div id="test1">
    <p v-lower-text="msg1"></p>
    <p v-text="msg1"></p>
</div>

<div id="test2">
    <p v-upper-text="msg2"></p>
    <p v-text="msg2"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //定义全局指令
    //el:指令属性所在的标签对象
    //binding：包含指令相关信息数据的对象
    
    Vue.directive('upper-text',function (el,binding) {
      console.log(el,binding)
        el.textContent=binding.value.toUpperCase()
    })
    new Vue({
        el:'#test1',
        data:{
            msg1:'NBA I Love This Game !'
        },
        directives:{//注册局部指令，当且仅在当前vm管理范围内有效
            'lower-text':function (el,binding) {
                el.textContent=binding.value.toLowerCase()
            }
        }
    })

    new Vue({
        el:'#test2',
        data:{
            msg2:'Just Do It !'
        }
    })

</script>
</body>
</html>