vue学习笔记(一)---- vue指令( v-on 事件绑定 )
2024-09-08 17:31:22
Vue 中提供了 v-on:
事件绑定机制
绑定的事件处理函数必须定义到vm实例的事件处理函数 methods
中去
<div id="app">
<!-- <input type="button" value="点我,魅力可大了呢" id="btn"/> -->
<input type="button" value="点我,魅力可大了呢" v-on:click="add"/>
<!-- <input type="button" value="点我,魅力可大了呢" v-on:mouseover="btn"/> -->
<hr>
<h3>今日的魅力值----{{glamour}}</h3>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
glamour:'1'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
add: function () {
// alert('Hello')
console.log('ok')
}
}
})
</script>
es6
中函数的简写形式:
methods: {
// add: function () {
// // alert('Hello')
// console.log('ok')
// }
// es6中函数的简写形式:
add(){
console.log('yes')
}
}
如果在 绑定的add
方法中加入小括号()页面也能正常执行
<input type="button" value="点我,魅力可大了呢" v-on:click="add()"/>
methods: {
add(num1,num2,num3){
console.log('hello'+num1+num2+num3)
}
}
既然都能执行,那加入小括号与不加小括号的区别在于:
加入小括号就能传递参数了呀,是不是傻
<input type="button" value="点我,魅力可大了呢" v-on:click="add(1,2,3)"/>
来吧展示:
函数中可以使用...
的方式去接收数组形式的参数
methods: {
// es6中函数的简写形式:
// add(num1,num2,num3){
// console.log('hello'+num1+num2+num3)
// }
add(...args){
console.log(args)
}
}
在vm实例中,如果想要访问data中的值,如果直接通过变量的方式是获取不到的,只能通过this访问,this就代表vm实例
栗子:
methods: {
// add(...args){
// console.log(args)
// }
add(){
console.log(msg)
}
}
通过this.xxx
去获取
add(){
console.log(this.msg)
}
思考:如果this是vm实例的话,想要获取data上的属性中的数据,方式不应该是
this.data.msg
?,
测试:
解释:
能够直接通过this.xxx
的方式去获取data属性上的数据的原因是,
vue做了一层处理,你挂载到data上的这些属性,默认处理了直接挂载到vm的身上
点击按钮,让魅力值增加
<body>
<div id="app">
<input type="button" value="点我,魅力可大了呢" v-on:click="add()"/>
<hr>
<h3>今日的魅力值----{{msg}}</h3>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:1
},
methods: {
add(){
this.msg+=1
console.log(this.msg)
}
}
})
</script>
</body>
v-on的简写: 将 v-on:
替换成 @
符号
比如:
<input type="button" value="点我,魅力可大了呢" v-on:click="add()"/>
<input type="button" value="点我,魅力可大了呢" v-on:mouseover="add()"/>
<input type="button" value="点我,魅力可大了呢" @click="add()"/>
<input type="button" value="点我,魅力可大了呢" @mouseover="add()"/>
最新文章
- Linux下的ctrl常用组合键
- Git Merge Commit忘了选分支?数据丢失? 刚刚做的都丢失了?别急!
- AFNetwork源码解析
- Properties --- C++读配置信息的类(一)
- C#基本知识点-Readonly和Const的区别
- 安装mvc3出错致命错误
- [LeetCode#154]Find Minimum in Rotated Sorted Array II
- keil c编译器错误与解决方法
- 《JavaScript 闯关记》之变量和数据类型
- JS多语种方式
- 使用IronPython给.Net程序
- Python之路: 面向对象
- pyhton:图像旋转
- Javascript我学之二函数定义
- java int and Integer
- MongoDB的”存储过程“
- NetCore偶尔有用篇:NetCore项目发布为Nuget包
- 简易的canvas画板
- Python基础 - 正则表达式
- JS数据交互:动态从数据库中获取数据填充Select
热门文章
- VirtualBox 下 CentOS7 静态 IP 的配置 → 多次踩坑总结,蚌埠住了!
- Burpsuite(科学版)安装教程
- MySQL 是怎么加行级锁的?为什么一会是 next-key 锁,一会是间隙锁,一会又是记录锁?
- C温故补缺(十二):预编译器与头文件
- [CG] 用 Docker 配置 Ubuntu OpenGL 环境
- 1.5 HDFS分布式文件系统-hadoop-最全最完整的保姆级的java大数据学习资料
- flutter系列之:如丝般顺滑的SliverAppBar
- for循环结构、range方法
- 监控Windows(生成php木马)
- Spring IOC官方文档学习笔记(二)之Bean概述