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. GitHub搭建个人主页

    GitHub搭建个人主页 1.注册登录GitHub 2.新建仓库 新建一个名为"username.github.io",其中username为你的用户名,仓库必须为公有类型,私有仓 ...

  2. std::forward和std::move

    std::forward完美转发 保证参数原来的属性(用在template的参数是引用的时候):左值引用在被转发之后仍然保持左值属性,右值引用在被转发之后依然保持右值属性 void show(int& ...

  3. AJ学IOS 之CoreLocation地理编码小Demo输入城市得到经纬度

    AJ分享,必须精品 一:效果 输入地名,可以得到相应的经纬度,知识为了学习写的小Demo 二:实现步骤 一 :首先获取用户输入的位置. 二 :创建地理编码对象. 三 :利用地理编码对象编码,根据传入的 ...

  4. win7下delphi中的help文档问题

    一,要安装WinHlp32.exe 文件 二, 三,在安装目录下:

  5. [YII2] 自带分页调整

    在search Model的search()方法里有一个$dataProvider 属性 ,在这个属性数组里添加 'pagination' => ['pageSize' => 10,],设 ...

  6. 用 Python 黄图批量鉴别审核

    前言 最近写了一款微信小程序需要用到图片审核,人工审核是不可能的人工审核的太费精力了,所以我就写了一个多线程批量识别脚本来处理,主要是调用百度AI的接口,这里我是付费了也不贵审核一条1分钱不到,再说我 ...

  7. python 携程asyncio 实现高并发示例2

    https://www.bilibili.com/video/BV1g7411k7MD?from=search&seid=13649975876676293013 import asyncio ...

  8. vue3开发饿了么商城2020年新版本

    带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址:   https://www.dua ...

  9. GitHub 热点速览 Vol.17：在？各家视频会员要不要？

    作者:HelloGitHub-小鱼干 摘要:经济实用,用作上周的 GitHub 热点的横批再合适不过.先不说 GitHub Trending 上不止一个的会员共享项目,免你找好友刷脸要会员,这项目实在 ...

  10. Spring Cloud 系列之 Sleuth 链路追踪（一）

    随着微服务架构的流行,服务按照不同的维度进行拆分,一次请求往往需要涉及到多个服务.互联网应用构建在不同的软件模块集上,这些软件模块,有可能是由不同的团队开发.可能使用不同的编程语言来实现.有可能布在了 ...