<!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. Android开发之视图动画基础

    Android的animation由四种类型组成 XML中  alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转 ...

  2. JAVA设计模式之【状态模式】

    状态模式 水.固态.气态.液态 账户.正常状态.透支状态.受限状态 状态模式中,用一个状态类来分散冗长的条件语句,让系统有灵活性和可扩展性 状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的 ...

  3. CNN tflearn处理mnist图像识别代码解说——conv_2d参数解释，整个网络的训练，主要就是为了学那个卷积核啊。

    官方参数解释: Convolution 2D tflearn.layers.conv.conv_2d (incoming, nb_filter, filter_size, strides=1, pad ...

  4. C#中的CSP（Communicating sequential processes）

    说起Golang(后面统称为Go),就想到他的高并发特性,在深入一些就是 Goroutine.在大家被它优雅的语法和简洁的代码实现的高并发程序所折服时,其实C#/.NET也可以很容易的做到.今天我们来 ...

  5. RXjava的简介

    API 介绍和原理简析 1. 概念:扩展的观察者模式 观察者模式面向的需求是:举一个例子,警察在小偷实施作案的时候实施抓捕,在这一个例子中警察是观察者,小偷是被观察者.但是程序的观察者模式和这个还是有 ...

  6. shell编程笔记１

    参考文章:1 http://blog.csdn.net/wuwenxiang91322/article/details/9259877   通过chmod改变文件权限 补充知识: 1Linux文件的三 ...

  7. 响应式流API的构建基础

    下面三个重要的概念是响应式流API的构建基础: 发布者是事件的发送方,可以向它订阅. 订阅者是事件订阅方. 订阅将发布者和订阅者联系起来,使订阅者可以向发布者发送信号. http://www.info ...

  8. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

  9. MyBatis中抽象方法中多个参数的问题

    在使用MyBatis时,接口中的抽象方法只允许有1个参数,如果有多个参数,例如:      Integer updatePassword(             Integer id, String ...

  10. 纯净版linux （debian）挂载VirtualBox共享文件夹

    使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Linux debian 4.9.0-7-amd64 tty 1. 开始配置 1.1:打开虚拟机设置,打开你 ...