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. [Linux]第二部分-linux文件磁盘格式

    账户信息在/etc/passwd中,密码在/etc/shadow中,组信息在etc/group中 (d/-)rwxrwxrwx 1 root 293 Oct 19 21:24 test 文件属性 连接 ...

  2. Android接口和框架学习

    Android接口和框架学习 缩写: HAL:HardwareAbstraction Layer.硬件抽象层 CTS:CompatibilityTest Suite,兼容性測试套件 Android让你 ...

  3. 2015.05.04,外语,读书笔记-《Word Power Made Easy》 14 “如何谈论日常现象” SESSION 41

    1. people are the craziest animals bovine(['bәuvain] adj. (似)牛的, 迟钝的),像牛一样placid(['plæsid] adj. 安静的, ...

  4. c10---多文件开发

    a.h // // lisi.h // 注意: .h是专门用来被拷贝的, 不会参与编译 #ifndef day05_lisi_h #define day05_lisi_h int sum(int v1 ...

  5. webview同步cookies

    目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优 ...

  6. 1. 批量梯度下降法BGD 2. 随机梯度下降法SGD 3. 小批量梯度下降法MBGD

    排版也是醉了见原文:http://www.cnblogs.com/maybe2030/p/5089753.html 在应用机器学习算法时,我们通常采用梯度下降法来对采用的算法进行训练.其实,常用的梯度 ...

  7. 高斯混合模型Gaussian Mixture Model (GMM)——通过增加 Model 的个数，我们可以任意地逼近任何连续的概率密分布

    从几何上讲,单高斯分布模型在二维空间应该近似于椭圆,在三维空间上近似于椭球.遗憾的是在很多分类问题中,属于同一类别的样本点并不满足“椭圆”分布的特性.这就引入了高斯混合模型.——可以认为是基本假设! ...

  8. Oracle动态性能表-V$SESSION_WAIT,V$SESSION_EVENT

    (1)-V$SESSION_WAIT 这是一个寻找性能瓶颈的关键视图.它提供了任何情况下session在数据库中当前正在等待什么(如果session当前什么也没在做,则显示它最后的等待事件).当系统存 ...

  9. NOIp2018之前打模板出现的问题汇总

    灵感来源是因为调试了一下午dij,就想把错误记下来 dij:结构体里的重载运算符不会写      结构体声明后要加引号     用于排序的结构体按照边长度排序 匈牙利:在dfs中的if语句中,要继续搜 ...

  10. easyui 之表单验证

    /** * 扩展easyui的validator插件rules,支持更多类型验证 */ $.extend($.fn.validatebox.defaults.rules, { minLength : ...