<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <link rel="stylesheet" href="vlib/css/index.css">
    <style>
        *{margin:;padding:;box-sizing:border-box;}
        a{text-decoration:none;}
    </style>
</head>
<body>
    <script src="vlib/vue.js"></script>
    <script src="vlib/index.js"></script>
    <div id="app">
        <component-child v-if="list" :mess="list"></component-child>
        <div>
            <button @click="myupdate">更新</button>
            <button @click="mydel">卸载</button>
            <button @click="myinstall">安装</button>
        </div>
    </div>
    <script>
        Vue.directive('limitStr',{
            bind:function(el,binding,vcode){
                console.log();
            },
            inserted:function(el,binding,vcode){
                console.log();
            },
            update:function(el,binding,vcode){
                console.log();
            },
            componentUpdated:function(el,binding,vcode){
                console.log();
            },
            unbind:function(el,binding,vcode){
                console.log();
            }
        })

        var componentChild = {
            template:'<div>\
                {{messval}}\
                <input type="text" :value="mess" v-limit-str>\
                </div>',
            data: function(){
              return {
                  messval:this.mess
              }
            },
            props:{
              mess:{
                  type:String,
                  default:''
              }
            },
            methods:{
                getVal:function(e){
                    this.messval = e.target.value
                }
            }
        }

        new Vue({
            el:'#app',
            data:{
                list:'hello word!!!'
            },
            components:{
                componentChild:componentChild
            },
            methods:{
                myupdate:function(){//更新
                    this.list = '更新了！！123'
                },
                mydel:function(){//卸载
                    this.list = '';
                },
                myinstall:function(){//安装
                    this.list = 'china!!!';
                }
            }
        })
    </script>
</body>
</html>

vue中指令写了一个demo的更多相关文章

  1. 在VS中实现webService的一个demo（图解）

    在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...

  2. NDK中使用pthread多线程中自己写的一个BUG

    在使用pthread进行NDK中的多线程开发时,自己写了一个BUG, void *darkGrayThread(void *args) { ThreadParam *param = (ThreadPa ...

  3. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  4. vue中，写在methods里的B方法去调A方法的数据，访问不到？

    今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...

  5. opencv debug版本在linux下编译，并写了一个DEMO

    用如下方法编译opencv: git clone "https://github.com/opencv/opencv.git" mkdir opencv_debug cd open ...

  6. vue中指令绑定的v-if逻辑结构

    <!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...

  7. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  8. vue中使用router打开一个新的窗口

    一个单页应用打开一个新的窗口不是很好控制,比如权限的处理,因为原先的页面不会自动刷新,方法很简单: let routeData = this.$router.resolve({ name: " ...

  9. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...

随机推荐

  1. 在GitHub上使用Hexo搭建静态博客

    搭建静态博客须要一个前提是电脑上有安装git而且有github帐号,这个不懂能够看廖雪峰先生的git教程 1.下载nodejs.在官网上能够下载 2.使用git进入你新建的一个目录,输入命令 npm ...

  2. node10---GET请求和POST请求的参数

    GET请求的参数在URL中,在原生Node中,需要使用url模块来识别参数字符串.在Express中,不需要使用url模块了.可以直接使用req.query对象. ● POST请求在express中不 ...

  3. CxImage内存方式转换图像

    最近,处于项目需要,需要将Bmp转换为JPEG格式.以前做过,采用的是GDI+的方式,该方式有一个极大地缺陷为无法实现跨平台处理.闲话少说,进入正题. CxImage cxImageBmp(pRGBB ...

  4. html5+css3+javascript 自定义提示窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  5. X86 X64 X86_64 AMD64 区别

    X86:32位(一般i386是32位CPU的统称) X64:64位(代表CPU:IA64,现在几乎没有这样纯粹的64位CPU,都是兼容32位的64位CPU,如下) X86_64:兼容32位的64位CP ...

  6. HTML基础——网站信息显示页面

    1.语法和规范 HTML文件都是以.html或者.htm结尾的.建议使用.html结尾. HTML文件分为头部分(<head></head>)和体部分(<body> ...

  7. C#压缩和解压缩字节（GZip）

    标题:C#压缩和解压缩字节(GZip的使用) 作用:此类在 .NET Framework 2.0 版中是新增的.提供用于压缩和解压缩流的方法和属性.定义:表示 GZip 数据格式,它使用无损压缩和解压 ...

  8. HDU 1171 Big Event in HDU【01背包】

    题意:给出n个物品的价值和数目,将这一堆物品分给A,B,问怎样分使得两者的价值最接近,且A的要多于B 第一次做的时候,没有思路---@_@ 因为需要A,B两者最后的价值尽可能接近,那么就可以将背包的容 ...

  9. 手工备份恢复oracle数据库

     手工备份恢复oracle数据库: 虽然已经有了rman工具 但是手工恢复oracle能够让你对oracle数据库有更加深入的了解 数据库一致性开机条件: 数据文件 scn,控制文件 scn,redo ...

  10. VC++ 借助 Win32 API 绘图实现基本的细胞自动机演示

    //本程序使用 Visual Studio 2015 生成的 Win32 窗口程序模板 开发//使用 Win32 API 绘图//实现基本的细胞自动机演示////目前已知问题://存在内存泄漏,但具体 ...