Vue第十天（自定义指令）

准备步骤如同第一天
代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app1">
    <p>实现自定义指令：input元素自动获取焦点：</p>
    <input v-focus>
</div>
<br>

<!--钩子函数-->
<div id="app2" v-runoob:hello.a.b="message">
    <br>

    <!--传入js对象-->
    <div id="app3">
        <div v-ceshi="{color:'green',text:'菜鸟教程！'}"></div>
    </div>
</div>
</body>
<script>
    <!--注册一个全局自定义指令 - v - focus-->
    /*    vue.directive('focus',{
        //    当绑定元素插入到DOM中
            inserted:function (el) {
            //    聚焦元素
                el.focus()
            }
        })
    //    创建根实例
        new Vue({
            el:'#app1'
        })*/


    <!--注册一个局部自定义指令-v-focus-->
    //    创建根实例
    /*  new Vue({
          el: '#app1',
          directives: {
              //    注册一个局部的自定义指令 v-focus
              focus: {
                  //    指令的定义
                  inserted: function (el) {
                      //    聚焦元素
                      el.focus()
                  }
              }
          }
      })*/

    /*钩子函数*/
    /*    Vue.directive('runoob', {
            bind: function (el, binding, vnode) {
                var s = JSON.stringify
                el.innerHTML =
                    '指令名：name: ' + s(binding.name) + '<br>' +
                    '指令的绑定值：value: ' + s(binding.value) + '<br>' +
                    '绑定值的表达式或变量名：expression: ' + s(binding.expression) + '<br>' +
                    '传给指令的参数：argument: ' + s(binding.arg) + '<br>' +
                    '包含修饰符的对象：modifiers: ' + s(binding.modifiers) + '<br>' +
                    'Vue 编译生成的虚拟节点：vnode keys: ' + Object.keys(vnode).join(', ')
            }
        })
        new Vue({
            el: '#app2',
            data: {
                message: '测试一下！'
            }
        })*/

    Vue.directive('ceshi', function (el, binding) {
        //    简写方式设置文，本及背景颜色
        el.innerHTML = binding.value.text
        el.style.backgroundColor = binding.value.color
    })
    new Vue({
        el: '#app3'
    })
</script>
</html>
Vue第十天（自定义指令）

猜你喜欢
