Vue的点击事件
创建一个click.html页面并引入vue.js代码，详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
v-on:click="" 表示的是vue的点击事件," "里面写定义方法的名字
先在body里面写个大div，id为app，然后在div标签里面再写一个小div,div里面写个{{message}}，然后在到vue对象的data属性里面去定义具体值
第二个div的下面有一个button标签用来触发点击事件的,先在在button标签里面用v-on:click=" "
然后再到vue对象中写个和data数据同等级的methods属性专门用来定义方法的，
reverseMessage(){
alert("hello liqinggang");
}
效果图如下：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<!--v-on:click="" 表示的是vue的点击事件," "里面写定义方法的名字-->
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello liqinggang!!!"
},
//vue的方法定义
methods:{
reverseMessage(){
/*第一个this.message:可以访问到我们在data中定义的message变量
通过根据字符串切割、反转、再通过字符串拼接完成字符反转*/
this.message=this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
浏览器效果如下图
image.png
Vue的input标签的输入
创建一个input.html页面并引入vue.js代码，详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
把输入的变量通过v-model的指令可以给它绑定属性中的message，这样的话在input里面输入的值会自动绑定到
data数据的message变量上去，而message变量发送变化就会导致div中的{{message}}变量也发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<!--把输入的变量通过v-model的指令可以给它绑定属性中的message，这样的话在input里面输入的值会自动绑定到
data数据的message变量上去，而message变量发送变化就会导致div中的{{message}}变量也发生变化-->
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello liqinggang!!!"
}
})
</script>
</body>
</html>
效果如下
image.png
image.png
