<!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 This Activity already has an action bar supplied by the window decor

    This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ ...

  2. Nginx访问VM虚拟机CentOS 7系统与本地Windows系统共享目录403

    用VMware安装了CentOS7系统,并搭建了Nginx,MySQL,PHP的web项目运行环境,为了方便Windows本地主机进行程序调试把Windows本地项目目录共享到了虚拟机CentOS中的 ...

  3. [LeetCode] Longest Substring Without Repeating Characters 最长无重复字符的子串 C++实现java实现

    最长无重复字符的子串 Given a string, find the length of the longest substring without repeating characters. Ex ...

  4. web.xml配置详解（转载）

    一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></di ...

  5. jqGrid多级表格的实现

    原博主链接:http://blog.csdn.net/dreamstar613/article/details/54616503 jqGrid多级表格(可N级) 主要用的方法: subGridRowE ...

  6. （转）js document.all的用法

    document.all用法 一. document.all是页面内所有元素的一个集合.例如:      document.all(0)表示页面内第一个元素 二.document.all可以判断浏览器 ...

  7. 002.ActiveMQ的安装

    本安装说明基于CentOS7.1的版本,其他版本也基本可以参考. 1. 安装JDK1.8 CentOS7.1版本安装时忘记是默认还是自己选中的安装了OpenJDK,也是1.8的版本,因为ActiveM ...

  8. BootStrap学习(一)——BootStrap入门

    1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目 ...

  9. HTML基础——网站首页显示页面

    1.表格标签: border设置边框,align设置位置(居中等),bgcolor设置背景颜色,cellspacing设置边框之间的空隙,cellpadding设置边框与里面内容的间距. table表 ...

  10. 用js将CheckBox的值存入数据库和将数据库字符串的值转为数组选中CheckBox

    Index @{ ViewBag.Title = "测试"; } <script src="~/Scripts/jquery-1.10.2.js"> ...