_008_Vue_ref、v-cload以及自定义指令

81 阅读 0 评论 54 点赞

我是靠谱客的博主清脆树叶，最近开发中收集的这篇文章主要介绍_008_Vue_ref、v-cload以及自定义指令，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="example">
    <p>
        <img :id="myid" :src="imageSrc">
    </p>
    <p>
        <button @click="hint">click</button>
        <span ref="message">Hello,world</span>
    </p>
    <p v-cloak>{{msg}}</p>
</div>
</body>
<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script>
    alert("hello");
    new Vue({
        el:"#example",
        data:{
            msg:'Hello,vue',
            myid: 'hello123',
            imageSrc: 'https://cn.vuejs.org/images/logo.png'
        },
        methods:{
            hint:function () {
                alert(this.$refs.message.textContent);
            }
        }
    });
</script>
</html>

注册全局指令

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

注册局部指令

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

使用指令

v-my-directive='xxx'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>
</body>
<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script>
    /*自定义全局指令*/
    /*el: 指令属性所在的标签对象*/
    /*binding: 包含指令相关信息数据的对象*/
    Vue.directive('upper-text',function(el,binding){
        el.innerHTML = binding.value.toUpperCase();
    });
    new Vue({
        el:'#div',
        data:{
            msg:"hello,WORLD"
        },
        /*自定义局部指令*/
        directives:{
            'lower-text':{
                bind(el,binding){
                    el.innerHTML=binding.value.toLowerCase();
                }
            }
        }
    });
</script>
</html>