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. 利用Tensorflow训练自定义数据

    很多正在入门或刚入门TensorFlow机器学习的同学希望能够通过自己指定图片源对模型进行训练,然后识别和分类自己指定的图片.但是,在TensorFlow官方入门教程中,并无明确给出如何把自定义数据输 ...

  2. 【codeforces 799C】Fountains

    [题目链接]:http://codeforces.com/contest/799/problem/C [题意] 你有两种不同的货币; 余额分别为c和d 然后有n种商品; 每种商品只能由两种货币中的某一 ...

  3. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第四篇【AppiumLibrary实用函数介绍】

    http://blog.csdn.net/deadgrape/article/details/50585677 通过前几篇的讲述,我相信大家已经对RF+Appium的框架已经有所了解了. 接下来我告诉 ...

  4. ❝ Windows系统的FTP上传下载脚本 ❞

    运行环境:windows 脚本功能:从目标系统下载数据库备份文件*.dmp 执行方法:windows任务计划定时调用文件ftp.bat 文件1:ftp.bat echo 开始备份日期: >> ...

  5. NetOps Defined

    https://www.logzilla.net/2017/06/20/the-network-operations-top-5.html

  6. COCOS学习笔记--Cocod2dx内存管理(三)-Coco2d-x内存执行原理

    通过上两篇博客.我们对Cocos引用计数和Ref类.PoolManager类以及AutoreleasePool类已有所了解,那么接下来就通过举栗子来进一步看看Coco2d-x内存执行原理是如何的. / ...

  7. Sqoop_具体总结 使用Sqoop将HDFS/Hive/HBase与MySQL/Oracle中的数据相互导入、导出

    一.使用Sqoop将MySQL中的数据导入到HDFS/Hive/HBase watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWFyb25oYWRvb3A=/ ...

  8. UITableView属性 自己定义UITableViewCell

    UITableView的属性全齐.供大家參考 附:http://www.bubuko.com/infodetail-561085.html //曾经在使用UITableView的时候,总是在cell上 ...

  9. 2016.3.17__ JavaScript基础_1__第十二天

    Javascript基础 首先说声抱歉. 今日涉及内容难易度不统一,所以很多比較基础的属性直接通过思维导图展示了. 同一时候须要注意,今日思维导图中的内容和笔记中并非一一相应的,请读者自行对比查看. ...

  10. pyspark MLlib踩坑之model predict+rdd map zip，zip使用尤其注意啊啊啊！

    Updated:use model broadcast, mappartition+flatmap,see: from pyspark import SparkContext import numpy ...