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. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  2. ACdream 1229 Data Transmission

    Data Transmission Special JudgeTime Limit: 12000/6000MS (Java/Others)Memory Limit: 128000/64000KB (J ...

  3. String String s = new String("asd") 涉及对象数目

    问题·:.String str = new String("abc")创建了多少个对象? 这个问题在很多书籍上都有说到比如<Java程序员面试宝典>,包括很多国内大公司 ...

  4. Apach配置本地域名

    分三步: 一,开启虚拟域名设置,在路径中找到(apache\apache2.4.9\conf)httpd.conf 配置文件, 去掉 " Include conf/extra/httpd-v ...

  5. [Linux]第五部分-Linux系统管理员

    启动流程如下:1.加载BIOS信息,读取第一个启动设备代号2.读取第一个启动设备的Mbr引导程序的启动信息3.加载操作系统核心信息4.核心执行init程序并获取运行信息5.init执行 /etc/rc ...

  6. 在ActivityA中关闭还有一个ActivityB

    1.对于简单的两个Activity public class A_activity extends Activity { public static A_activity _instance = nu ...

  7. iOS开发-文件管理之多的是你不知道的事（一）

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  8. 创建逻辑dg

    逻辑备用DG   今天是2014-04-29,近期一直忙的事情,也没来的急写点东西.今天继续整理dg的相关内容,要说的是逻辑dg的创建过程和注意事项. 什么是逻辑dg呢?物理dg类似于主库的完整副本. ...

  9. Java 零基础跑起第一个程序

    Java 零基础跑起第一个程序 一 概述 1  java代码编译 编译后才干在计算机中执行.编译就是把人能看懂的代码转换成机器能看懂的形式 2 java的长处 一次编译.到处执行.由于java代码是在 ...

  10. Statspack的使用

    Statspack是Oracle 8i以上提供的一个非常好的性能监控与诊断工具,基本上全部包含了BSTAT/ESTAT的功能,更多的信息可以参考附带文档$ORACLE_HOME/rdbms/admin ...