<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js测试父子之间通信</title>
  <script type="text/javascript" src="lib/boot.js"></script>
  <style>
    .box{
      width:100%;
      max-width:640px;
      margin:40px auto;
      border:1px solid #ccc;
      padding:20px;
    }
    .box li{
       height:20px;
       background:#abcdef;
       margin-bottom:1px;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak >
      <div v-my-directive="[1,2,3,4,5,6,7]"></div>
      <div v-red-text = "'color:#abcdef;'">welecome</div>

      <div v-example :a="'hellow word'" :b="{name:'zhangsan',age:2342}"></div>
  </div>
  <script>

    var tx = function(){

      //定义一个指令 可以操作原生事件
      Vue.directive('my-directive', function (value) {
           var ul = "<ul class='box'>";
           var li = '';
           for(var i=0; i<value.length; i++){
              li += "<li onclick='get1("+i+")'>"+value[i]+"</li>"
           }
           ul = ul + li + "</ul>";
           this.el.innerHTML = ul;

          window.get1 = function(val){
             alert(val)
          }
      })

      // 定义一个指令 可以设置颜色
      Vue.directive('red-text',function(value){
         this.el.style =  value || 'color:#f00'
      })

      //定义一个指令 高级定义 具体参考官网
      Vue.directive('example',{
         params: ['a','b'],
         bind: function () {
          //console.log(this.params.a) // 执行一次
         },
         update: function () {
            //console.log(this.params.a);
           // console.log(this.params.b);
           var o = this.params.b
           for(var i = 0; i<Object.keys(o).length; i++){
              console.log(Object.keys(o)[i] +"----"+o[Object.keys(o)[i]])
           }
         }
      })

      return new Vue({
        el:'#app',
        data:{
          msg:[]
        }
      })
    }()
  </script>
</body>
</html>

　　

vue 指令的用法的更多相关文章

  1. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  2. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  3. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  4. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  5. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  6. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  7. [Vue] : Vue指令

    Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...

  8. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  9. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

随机推荐

  1. py_One

    1.Python 标识符 在 Python 里,标识符由字母.数字.下划线组成. 在 Python 中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. Python 中的标识符是区分 ...

  2. 紫书 例题 11-2 UVa 1395（最大边减最小边最小的生成树）

    思路:枚举所有可能的情况. 枚举最小边, 然后不断加边, 直到联通后, 这个时候有一个生成树.这个时候,在目前这个最小边的情况可以不往后枚举了, 可以直接更新答案后break. 因为题目求最大边减最小 ...

  3. SSH的理解

    SSH的利用,通俗的讲就是一个网络传输数据的加密协议,目前有一些基于SSH的构建了服务器-客户端的软件工具,在Windows上装一个客户端,Linux上则为服务端,这样就可以把Windows上写的内容 ...

  4. Testing for SSL renegotiation

    https://blog.ivanristic.com/2009/12/testing-for-ssl-renegotiation.html

  5. hbase报错Could not initialize class org.apache.hadoop.hbase.protobuf.ProtobufUtil

    Caused by: java.lang.RuntimeException: java.io.IOException: java.lang.reflect.InvocationTargetExcept ...

  6. 优秀Swift开源项目推荐

    工具类 SwiftyJSON:GitHub上最为开发者认可的JSON解析类 Safe.ijaimi:源码漏洞分析检测工具,一键完成 Dollar.swift:Swift版Lo-Dash(或unders ...

  7. 面试题：Student s = new Student();在内存中做了哪些事情?即创建一个对象做了哪些事情

    lStudent s = new Student();在内存中做了哪些事情? •载入Student.class文件进内存(方法区) •在栈内存为s开辟空间 •在堆内存为学生对象开辟空间 •对学生对象的 ...

  8. 建筑建模学习笔记2——3DMax房屋框架建模

    以下这幅图是用3DMax做出的大体的框架 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I ...

  9. LeakCanary：简单粗暴的内存泄漏检測工具

    差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...

  10. C++基础之全局变量

    C++的水比較深,之前我一直以为C++的全局变量会像其它语言一样,很easy仅仅要在头文件里,定义一个变量就可以,比方以下的test.h: #ifndef _TEST_H #define _TEST_ ...