<div id="root">
<!-- 视图view -->
<h1>欢迎来到{{name}}学习</h1>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo">点我{{name}}信息(不传参)</button>
<button @click="showInfo2(66,$event)">点我{{address}}信息66(传参)</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建Vue实例
//Vue的实例对象视图模型VM
const vm = new Vue({
el: '#root',
//用于指定Vue为哪一个容器服务,值通常为css选择器字符串
// el: document.getElementById('root')
//模型model
data: {
name: '西南大学',
address: '重庆'
},
//data用于存放数据,数据供el所指定容器服务
methods: {
showInfo(event) {
alert('我是谁谁是');
console.log(this);//这里的this是vm
}
,
showInfo2(number, $event) {
console.log(number);
}
}
})
console.log(vm);
事件处理(methods)
- 本文链接: http://lzkpersonal.com.cn/2023/06/23/1-事件处理/
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!