Vscode入门(5):v-on、v-bind的使用与跑马灯效果展示
首先我们先讲v-bind的使用,这是一个定义鼠标放在按钮上显示的文字,v-bind:可以直接简写成:
也就是说v-bind可以绑定按钮的属性
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie==edge">
<title>Document</title>
<script src="./lib//vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>---{{ msg3 }}----</p>
<h4 v-cloak>{{ msg3 }}</h4>
<h4 v-text="msg3">-----</h4>
<div v-html="msg3"></div>
<input type="button" value="按钮" :title="msg2" >
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '我是一个刚刚学习vue的小白',
msg2: '来一个跑马灯,跑起来!',
msg3: '<h1>我是一个刚刚学习vue的小白</h1>',
}
})
</script>
</body>
</html>
接下来是v-on,v-on是事件绑定机制。可以简写为@
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie==edge">
<title>Document</title>
<script src="./lib//vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>---{{ msg3 }}----</p>
<h4 v-cloak>{{ msg3 }}</h4>
<h4 v-text="msg3">-----</h4>
<div v-html="msg3"></div>
<input type="button" value="按钮" :title="msg2" v-on:click="show" >
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '我是一个刚刚学习vue的小白',
msg2: '来一个跑马灯,跑起来!',
msg3: '<h1>我是一个刚刚学习vue的小白</h1>',
},
methods:{
show:function(){
alert('hello')
}
}
})
</script>
</body>
</html>
上图:
接下来就是我们跑马灯效果了
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie==edge">
<title>Document</title>
<script src="./lib//vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>---{{ msg3 }}----</p>
<h4 v-cloak>{{ msg3 }}</h4>
<h4 v-text="msg3">-----</h4>
<div v-html="msg3"></div>
<input type="button" value="开始" @click="show" >
<input type="button" value="停止" @click="stop" >
<h4 v-text="msg2"></h4>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '我是一个刚刚学习vue的小白',
msg2: '来一个跑马灯,跑起来!',
msg3: '<h1>我是一个刚刚学习vue的小白</h1>',
intervalId: null
},
methods:{
show() {
if(this.intervalId != null) return;
this.intervalId = setInterval(() => {
console.log(this.msg2)
var start = this.msg2.substring(0, 1)
var end = this.msg2.substring(1)
this.msg2 = end + start
},400)
},
stop() {
clearInterval(this.intervalId)
this.intervalId = null;
}
}
})
</script>
</body>
</html>
上图:
好了 今天我就学习到这里了
官方教程:链接: https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools.
推荐视频:链接: https://www.bilibili.com/video/BV11s411A7h6?p=6.
有一起学习的吗,下面是我的博客,可以相互交流一下!!!
我的博客:链接: https://blog.csdn.net/tinglis.