v-bind属性绑定指令，v-bind会把后面引号中的内容当做js代码解析
<input type="button" value="按钮" v-bind:title="MyTitle">
引号中的内存可以进行计算
<input type="button" value="按钮" v-bind:title="MyTitle+123">
v-bind可以直接简写为
：例如<input type="button" value="按钮" :title="MyTitle+123">
上述片段使用的JS代码如下：
<script type="text/javascript">
var vm = new Vue({
el:‘#app‘,
data:{
MyTitle:‘这是一个按钮‘
}
})
</script>
最终在浏览器中的渲染效果如下：
通过v-on进行事件绑定
<input type="button" v-on:click="show" />
另外，v-on也可以使用语法糖@来简写，如：
<input type="button" @click="show" />
在JS部分对方法进行定义
<script type="text/javascript">
var vm = new Vue({
el:‘#app‘,
data:{},
// methods中定义了当前实例中所有的方法
methods:{
show(){
alert(‘oook‘)
}
}
})
</script>
实现文字的循环滚动，类似于LED条幅的跑马灯效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" name="" id="" value="开始" @click="start" />
<input type="button" name="" id="" value="停止" @click="stop" />
<h3>{{msg}}</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:‘#app‘,
data:{
msg:‘预祝大家考研成功！‘,
timerId:null
},
methods:{
start(){
// 防止定时器重复开启
if(this.timerId != null) return
// methods不能直接使用data中的数据
// 箭头函数内外this指向相同
this.timerId = setInterval(()=>{
var first = this.msg.substring(0,1)
var other = this.msg.substring(1)//出去第一个后面所有的数据
this.msg = other + first
},500)
},
stop(){
clearInterval(this.timerId)
// 每次清除定时器之后，需要把定时器的id重新赋值为null
this.timerId = null
}
}
})
</script>
</body>
</html>
效果图如下：
原文：https://www.cnblogs.com/agitm/p/13463645.html