v-cloak，v-text，v-html，v-bind，v-on使用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="app">

            <!-- v 指令 -->

            <!-- 1.有闪烁问题 2.可以放内容 -->

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

            <!-- 1.没有闪烁问题 2.会覆盖内容 -->

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

            <!-- 1.会覆盖内容 2.把内容可以当做HTML -->

            <div v-html="msg3"></div>

            <!-- v-bind ,用于绑定属性的指令，这样就可以用js变量或表达式了 -->

            <button type="button" v-bind:title="msg + '可以用连接符'">绑定属性</button>

            <!-- v-bind ,可以简写 : -->

            <button type="button" :title="msg + '可以用连接符2'">绑定属性2</button>

            <!-- v-on 事件绑定机制 -->

            <button type="button" v-on:click="alertPlus" >绑定事件</button>

            <button type="button" v-on:mouseover="alertPlus" >绑定事件2</button>

        </div>

        <script type="text/javascript">

            new Vue({

                el:'.app',

                data:{

                    msg:'表达式',

                    msg2:"<h1>html标签</h2>",

                    msg3:"<h1>html标签</h2>",

                },

                methods:{//methods 定义Vue实例所有可以用的方法

                    alertPlus: function(){

                        alert("hello 绑定事件")

                    }

                }

            })

        </script>

    </body>

</html>

使用vue写出一个文字的跑马灯效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>跑马灯效果</title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <input type="button" value="跑起来" @click="running"/>

            <input type="button" value="停" @click="stop"/>

            <h4>{{msg}}</h4>

        </div>

        <script type="text/javascript">

            new Vue({

                el:'#app',

                data:{

                    msg:"学习完Vue的第二节！",

                    timerId:null//定时器id

                },

                methods:{

                    // ES6语法，省去function

                    running(){

                        // 当定时器为null时，创建定时器

                        if(this.timerId == null){

                            // ES6语法,箭头函数，申请function，方法的this也指向函数外的this

                            this.timerId=setInterval(()=>{

                                // 获得到字符串第一个字符

                                var start=this.msg.substring(0,1);

                                // 获取到第一个字符后的所有内容

                                var end=this.msg.substring(1);

                                // 将第一个字符以后的内容排在前面，第一个字符排在后面

                                this.msg=end+start;

                            },400)

                        }

                    },

                    stop(){

                        // 清除定时器

                        clearInterval(this.timerId)

                        // 重新赋值为null

                        this.timerId=null;

                    }

                }

            })

        </script>

    </body>

</html>

学习Vue第二节，v-cloak，v-text，v-html，v-bind，v-on使用的更多相关文章

  1. Vue快速学习_第二节

    表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可 ...

  2. 学习Vue第一节，Vue的模式与写法格式

    引用Vue <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf- ...

  3. Linux 基础学习（第二节）

    free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...

  4. [struts2学习笔记] 第二节 使用Maven搞定管理和构造Struts 2 Web应用程序的七个步骤

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40303897 官方文档:http://struts.apache.org/releas ...

  5. [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...

  6. [shiro学习笔记]第二节 shiro与web融合实现一个简单的授权认证

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39933993 shiro官网:http://shiro.apache.org/ shi ...

  7. 19课 Vue第二节

    事件修饰符 stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键   组合键 : @keydown.ctrl.enter s ...

  8. HTML学习----------DAY1 第二节

    使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web ...

  9. 小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

随机推荐

  1. java网络编程socket\server\TCP笔记（转）

    java网络编程socket\server\TCP笔记(转) 2012-12-14 08:30:04|  分类: Socket |  标签:java  |举报|字号 订阅     1 TCP的开销 a ...

  2. AJ学IOS（26）UI之iOS抽屉效果小Demo

    AJ分享,必须精品 先看效果 实现过程 第一步,把三个view设置好,还有颜色 #warning 第一步 - (void)addChildView { // left UIView *leftView ...

  3. python初学（一）

    1.输入一个百分制成绩,要求输出成绩等级A.B.C.D.E,其中90~100分为A,80~89分为B,70~79分为C,60~69分为D,60分以下为E. 要求:1)用if语句实现:2)输入百分制成绩 ...

  4. tensorflow-参数、超参数、卷积核权值共享

    根据网上查询到的说法,参数就是在卷积神经网络中可以被训练的参数,比如卷积核的权值和偏移等等,而超参数是一些预先设定好并且无法改变的,比如说是卷积核的个数等. 另外还有一个最最基础的概念,就是卷积核的权 ...

  5. Everything信息泄露

    Everything漏洞描述 [Everything]一款搜索文件非常快的工具,其速度之快令人震惊!它还有一个可以通过HTTP 或 FTP 分享搜索结果 的功能.它可以让用户在本地或局域网上的其他电脑 ...

  6. BUUOJ [CISCN2019 华北赛区 Day2 Web1]Hack World

    补一下这道题,顺便发篇博客 不知道今年国赛是什么时候,菜鸡还是来刷刷题好了 0X01 考点 SQL注入.盲注.数字型 0X02自己尝试 尝试输入1 赵师傅需要女朋友吗???随便都能有好吧 输入2 ?? ...

  7. 尝试用python开发一款图片压缩工具1：尝试 pillow库

    开发目的 我经常使用图片.公众号文章发文也好,还是生活中要使用素材.图片是一种比文字更加直观的载体.但是图片更加占用带宽,很多软件都对图片有大小限制.图片太大也会影响加载速度.我试过几款图片压缩工具, ...

  8. redis：安装及基础知识（一）

    Redis官网:https://redis.io/ Redis中文网:http://www.redis.cn/ Redis 是一个开源的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. ...

  9. 用Python打造电脑人脸屏幕解锁神器附带接头暗号！

    前言 最近突然有个奇妙的想法,就是当我对着电脑屏幕的时候,电脑会先识别屏幕上的人脸是否是本人,如果识别是本人的话需要回答电脑说的暗语,答对了才会解锁并且有三次机会.如果都没答对就会发送邮件给我,通知有 ...

  10. php用户量剧增导致cpu100%解决办法

    在php扩展里边开启opcache扩展,此扩展是解析php的缓存机制,每次解析都要消耗cpu,所以有大量的fpm进程去占用cpu,开启此扩展之后cpu就瞬间下来了,只解析第一次,往后的都使用缓存.很好 ...