Vue第14话 常用内置指令和自定义指令

逆流者 2020年01月05日 45次浏览

1.常用内置指令

  • 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 对象通过$els 属性访问这个元素对象
  • v-cloak : 防止闪现, 与 css 配合: [v-cloak]

2.自定义指令

2.1 注册全局指令

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

2.2 注册局部指令

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

2.3 使用指令

v-my-directive='xxx'

3.编码

3.1 内置指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-内置指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app-13-1">
    <p v-text="url"></p>
    <p v-html="url"></p>
    <img :id="myId" :src="imageSrc">
    <p>
        <span ref="message">I Love Vue</span>
        <button @click="showMsg">显示左侧文本</button>
    </p>
    <p v-cloak>{{url}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    alert("模拟浏览器加载缓慢,测试 v-cloak 指令")
    new Vue({
        el: '#app-13-1',
        data: {
            url: '<a href="http://www.baidu.com">百度一下</a>',
            myId: '12345',
            imageSrc: 'https://cn.vuejs.org/images/logo.png'
        },
        methods: {
            showMsg: function () {
                alert(this.$refs.message.textContent)
            }
        }
    })
</script>
</body>
</html>

3.2 自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-自定义指令</title>
</head>
<body>
<div id="demo1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>
<div id="demo2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p><!--局部指令,此处不能使用-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.directive('upper-text', function (el, binding) {
        el.innerHTML = binding.value.toUpperCase()
    })
    new Vue({
        el: '#demo1',
        data: {
            msg1: 'I Love Vue!'
        },
        //注册局部指令
        directives: {
            'lower-text': {
                bind (el, binding) {
                    el.innerHTML = binding.value.toLowerCase()
                }
            }
        }
    })
    new Vue({
        el: '#demo2',
        data: {
            msg2: 'I Love Java!'
        }
    })
</script>
</body>
</html>