Vue.js 框架使用----跑马灯案例
<!-- 将来 new 的Vue实例， 会控制这个 元素中的所有的内容-->
<div id="app">
<!-- 1.{{ msg }} 插值表达式 -->
<p>{{ msg }}</p>
<!-- 2.v-text,v-cloak 解决闪烁问题 -->
<div v-cloak>{{msg}}</div>
<div v-text="msg"></div>
<!-- 3.v-html 显示标签-->
<div v-html="msg2"></div>
<!-- 4.v-bind Vue 提供的属性绑定机制 缩写是 ： -->
<input type="button" value="我要" :title="msg2">
<!-- 5.v-on Vue 提供的属性绑定机制 缩写是 @ -->
<input type="button" value="按钮" @click="show">
</div>
<script>
//2.创建一个Vue的实例
var vm = new Vue({
el: '#app', //表示要控制页面上的那个区域
data: {//data el 中要用的数据
msg: '欢迎学习Vue',
msg2:'<h1>hOHo,谁TM买小米</h1>'
},
methods:{
show:function () {
alert("谁TM买小米！");
}
}
})
</script>
注意：在VM实例中，如果想要获取 data 上的数据 ，或者 想要调用 methods中的方法 ，必须通过this.数据属性名 或 this.方法名 来进行访问， 这里的this，就表示 我们 new 出来的 VM 实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="嘿嘿" @click="lang">
<input type="button" value="暂停" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'窝窝头，一块钱四个！！！嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿',
intervalId: null //定义定时器ID
},
methods:{
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
//获取到头的第一个字符
var start = this.msg.substring(0,1);
//获取到 后面的所有的字符
var ent = this.msg.substring(1);
// 重新拼接得到新的字符串， 并赋值给 this.msg
this.msg = ent + start;
},100)
},
stop(){//暂停定时器
clearInterval(this.intervalId);
//重新赋值为null
this.intervalId=null;
}
}
});
</script>
</body>
</html>
注意：在VM实例中，如果想要获取 data 上的数据 ，或者 想要调用 methods中的方法 ，必须通过this.数据属性名 或 this.方法名 来进行访问， 这里的this，就表示 我们 new 出来的 VM 实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="嘿嘿" @click="lang">
<input type="button" value="暂停" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'窝窝头，一块钱四个！！！嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿',
intervalId: null //定义定时器ID
},
methods:{
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
//获取到头的第一个字符
var start = this.msg.substring(0,1);
//获取到 后面的所有的字符
var ent = this.msg.substring(1);
// 重新拼接得到新的字符串， 并赋值给 this.msg
this.msg = ent + start;
},100)
},
stop(){//暂停定时器
clearInterval(this.intervalId);
//重新赋值为null
this.intervalId=null;
}
}
});
</script>
</body>
</html>
