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. 【AIM Tech Round 5 (rated, Div. 1 + Div. 2) A】 Find Square

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找到左上角.往下一直走,往右一直走走到B边界就好. 中点的话.直接输出中位数 [代码] #include <bits/stdc ...

  2. HDU 3698 Let the light guide us

    Let the light guide us Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on HDU. ...

  3. 2015 Multi-University Training Contest 6 hdu 5362 Just A String

    Just A String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  4. 基本SQL查询

    当在数据库的表中存入数据后,就可以查询这些已经存入的数据.下面学习基本SQL查询 本节要点: l  如何使用select语句 Select语句的语法 SELECT语句中的运算 使用DISTINCT和U ...

  5. 数据库-mongodb-索引

    1.索引提高查询速度,降低写入速度,权衡常用的查询字段,不必在太多列上建立索引 2.在mongodb中,索引可以按字段升序.降序来创建,便于排序 3.默认是使用btree 来组织索引文件,2.4版以后 ...

  6. 文件上传前端操作-增加文件与删除文件按钮（jquery实现）

    初始 删除与添加 <!DOCTYPE html> <html> <head> <title></title> <meta charse ...

  7. thrift 版本不一致导致 @Override 报错

    thrift 版本不一致导致 @Override 报错 学习了:http://blog.csdn.net/antony1776/article/details/78920888 版本不一致导致的: 在 ...

  8. Android开发之配置adb工具的环境变量

    在Android开发中,adb是一个非常好用也非常使用的工具,可是使用的时候假设没有改动环境变量,每一次都须要输入全然路径非常麻烦.解决的方法是在环境变量中加入adb工具的路径. Windows平台 ...

  9. Share Your Knowledge and Experiences

     Share Your Knowledge and Experiences Paul W. Homer FRoM All oF ouR ExpERiEnCES, including both suc ...

  10. 利用js在文本框末尾获得焦点

    function moveEnd(obj) { obj.focus(); var len = obj.value.length; if (document.selection) { var sel = ...