VUE：内置指令与自定义指令

常用的内置指令

1）v:text　　更新元素的 textContent

2）v-html　　更新元素的 innerHTML

3）v-if　　如果为true，当前标签才会输出到页面

4）v-else　　如果为false，当前标签才会输出到页面

5）v-show　　通过控制display样式来控制显示/隐藏

6）v-for　　遍历数组/对象

7）v-on　　绑定事件监听，一般简写为@

8）v-bind　　强制绑定解析表达式，可以省略v-bind

9）v-model　　双向数据绑定

10）ref　　指定唯一标识，vue对象通过$els属性访问这个元素对象

11）v-cloak　　防止闪现，与css配合：[v-cloak]{display:none}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            [v-cloak]{

                display: none;

            }

        </style>

    </head>

    <body>

        <div id="example">

            <p ref="content">taosir is learning...</p>

            <button @click="hint">提示</button>

            <!--<p v-text="msg"></p>-->

            <p v-cloak>{{msg}}</p>

        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>

        <script>

            alert('----')

            new Vue({

                el:'#example',

                data:{

                    msg:'涛先森正在努力学习'

                },

                methods:{

                    hint(){

                        alert(this.$refs.content.innerHTML);

                    }

                }

            })

        </script>

    </body>

</html>

自定义指令

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            1.注册全局指令

                Vue.directive('my-directive',function(el,binding){

                    el.innerHTML = binding.value.toupperCase()

                })

            2.注册局部指令

                directives：

                    'my-directive':{

                        bind(el,binding){

                            el.innerHTML = binding.value.toupperCase()

                        }

                    }

            3.使用指令

                v-my-directive='xxx'

        -->

        <!--

            需求：自定义2个指令

            1.功能类似于 v-text，但是转换为全大写

            2.功能类似于 v-text，但是转换为全小写

        -->

        <div id="test1">

            <p v-upper-text="msg1"></p>

            <p v-lower-text="msg1"></p>

        </div>

        <div id="test2">

            <p v-upper-text="msg2"></p>

            <p v-lower-text="msg2"></p>

        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>

        <script>

            //定义全局指令

            //el：指令属性所在的标签对象

            //binding：包含指令相关信息数据的对象

            Vue.directive('upper-text',function(el,binding){

                console.log(el,binding);

                el.textContent = binding.value.toUpperCase()

            })

            new Vue({

                el:'#test1',

                data:{

                    msg1:'taosir love java!'

                },

                //注册局部指令

                directives:{

                    'lower-text'(el,binding){

                        el.textContent = binding.value.toLowerCase()

                    }

                }

            })

            new Vue({

                el:'#test2',

                data:{

                    msg2:'taosir love Vue!'

                }

            })

        </script>

    </body>

</html>

VUE：内置指令与自定义指令的更多相关文章

  1. Vue 内置指令 && 自定义指令

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件

    vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...

  3. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  4. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  5. Linux常用基本命令：三剑客命令之-awk内置变量与自定义变量

    AWK中,变量分为两种:内置变量与自定义变量. 常见的内置变量有: FS:输入字段分隔符, 默认为空白字符 OFS:输出字段分隔符, 默认为空白字符 RS:输入记录分隔符(输入换行符), 指定输入时的 ...

  6. Java注解-元数据、注解分类、内置注解和自定义注解|乐字节

    大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据 注解的分类 内置注解 自定义注解 注解处理器 Ser ...

  7. 9.1hadoop 内置计数器、自定义枚举计数器、Streaming计数器

    1.1  计数器 计数器的作用是用来统计数量的,用于记录特定事件的次数,分为内置计数器.自定义java枚举计数器.自定义Stream计数器三大类.用于质量分析,或应用级统计.分析计数器的值比分析一堆日 ...

  8. Vue内置组件keep-alive的使用

    本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...

  9. vue内置指令与自定义指令

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

随机推荐

  1. PHP算法之判断是否是质数

    质数的定义 质数又称素数.一个大于1的自然数,除了1和它自身外,不能整除其他自然数的数叫做质数:否则称为合数. 实现思路 循环所有可能的备选数字,然后和中间数以下且大于等于2的整数进行整除比较,如果能 ...

  2. powershell远程访问

    在服务器上打开powershell 1.winrm quickconfig 2.Enable-PSRemoting -Force 在客户端上打开powershell 1.Enter-PSSession ...

  3. 洛谷—— P3353 在你窗外闪耀的星星

    https://www.luogu.org/problem/show?pid=3353 题目描述 飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年 ...

  4. 防止 Chrome 屏蔽 非官方 扩展程序 教程（二）

    说明 前面介绍过一篇通过开发人员模式载入扩展程序的方法,尽管能够正常使用,可是每次又一次打开 Chrome 都会弹出询问窗体,比較麻烦.这里介绍第二种防止屏蔽的方法.与前一种方法相比,尽管应用的步骤多 ...

  5. Directx Matrix.PerspectiveFovLH Matrix.PerspectiveFovRH的理解

    该函数一个四个参数public static Matrix PerspectiveFovLH ( float fieldOfViewY, float aspectRatio, float znearP ...

  6. Linux就该这么学 20181008(第十三章BIND)

    参考链接https://www.linuxprobe.com Bind提供域名解析服务 DNS Domin Name Server 域名解析服务 功能模式 .正向解析,将域名解析为IP地址 .反向解析 ...

  7. week3_notebooke1

    今日内容:编码集合深浅cpoy文件操作函数初始函数函数的返回值函数的传参 初识: # == 数值比较 # is 比较的是内存地址 # id 测试的是内存地址 # 小数据池 str int # int: ...

  8. .NET MVC权限设计思考之切入点

    在WebForm下我们一般会设计个PageBase继承Page,在OnInit方法中实现对基本权限的验证业务,然后所有的页面在继承PageBase直接继承这项基本权验证业务.而在.NET MVC下我们 ...

  9. DB2导出表结构、表数据小结

    一.DB2命令行导出数据库全库表结构 ① Win+R进入到DB2安装目录的BIN目录下,执行命令:DB2CMD,进入到DB2 CLP窗口. 命令:DB2CMD ② 创建一个data文件夹 命令:MKD ...

  10. SQL Server 检测到基于一致性的逻辑 I/O 错误

    背景:新建DB_GZN 恢复数据库备份文件 执行:          select * from VI_MPS_PAPLT 错误提示: 消息 824,级别 24,状态 2,第 2 行 SQL Serv ...