学习Vue第二节,v-cloak,v-text,v-html,v-bind,v-on使用
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使用的更多相关文章
- Vue快速学习_第二节
表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可 ...
- 学习Vue第一节,Vue的模式与写法格式
引用Vue <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf- ...
- Linux 基础学习(第二节)
free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...
- [struts2学习笔记] 第二节 使用Maven搞定管理和构造Struts 2 Web应用程序的七个步骤
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40303897 官方文档:http://struts.apache.org/releas ...
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...
- [shiro学习笔记]第二节 shiro与web融合实现一个简单的授权认证
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39933993 shiro官网:http://shiro.apache.org/ shi ...
- 19课 Vue第二节
事件修饰符 stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键 组合键 : @keydown.ctrl.enter s ...
- HTML学习----------DAY1 第二节
使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
随机推荐
- 正整数的二进制表示中1的个数计算(使用移位或者n&(n-1))
第一种:使用n&(n-1)表示来计算有多少个1 int n=127; int count=0; while (n!=0){ count++; n=n&(n-1); } 第二种:使用移位 ...
- Daily Scrum 12/29/2015
Process: Zhaoyang: Add the Time bar feature in the APP and complete the Speech API. Yandong: Do some ...
- G - Pairs Forming LCM LightOJ - 1236 (质因子分解)
题解:这道题要从n的角度来考虑i和j. n可以表示为n=a1^p1*a2^p2*a3^p3.......n=lcm(i,j),那么质因子a1^p1,a1可以在i或者j中,并且p1=max(a1i,a1 ...
- lua 逻辑运算 and, or, not
这边并非说lua低级,为了方便区分才这么写的. 高级语言中的逻辑运算符是&&,||,! a&&b : 当a和b都为真, 结果返回为真,当a或者b有一个为假,结果返回为假 ...
- jmeter 聚合报告参数解释
label:每个请求的名称 样本:发送给服务器的请求数量 平均值:平均响应时间,默认情况下是单个 Request 的平均响应时间,当使用了 Transaction Controller 时,也可以以T ...
- python之excel表操作
python对excel表操作主要用到三个库,xlrd,xlwt,xlutils,分别用于excel表读,写,修改操作,以下将一个简单介绍 一.生成excel表:xlwt类 新建excel表,并写入数 ...
- python-Django收集主机信息json格式
Control: from django.conf.urls import patterns, include, url from django.contrib import admin admin. ...
- 关于log4j、jul、jcl、slf4j等等日志组件的理解
日志组件: 我们经常在开发项目的时候,需要打印记录项目过程中的一些日志.那我们经常大概会用到 log4j.jul.jcl.slf4j.simple.nop.logback 等等,那我们就详细介绍下这些 ...
- 【FishFX】花式撩骚,打造TypeScript易用框架。
· 栗子入手 假设有以下foo数组,数组中每个对象都拥有id,name两个属性,现在需要查找id > 0的对象数量. const foo: Array<{ id: number, name ...
- [Python进阶].pyc的那点事
1. 什么是 .pyc文件 .pyc文件 就是 Python的字节码(byte-compiled)文件..py文件运行时,python会自动将其编译成PyCodeObject并写入.pyc文件,再有p ...