本节任务
学会组件添加单击事件
标准格式
<text v-on:click="方法名称">点我啊</text>
省略格式
<text @click="方法名称">点我啊</text>
下面我们创建一个click.vue 页面来具体演示一下
先编写一个如下的页面
5BA54C72-A762-4559-8D69-72B4703F568D.png
<template>
<div class="page">
<text class="text" v-on:click="click">点我啊 </text>
</div>
</template>
接下来写样式
<style>
.page{
display: flex; // 让其子标签弹性布局
flex-direction: column;// 方向为从上向下
}
.text{
width:750px; // 设置宽度和屏幕宽度一样
height: 88px;//高度为88px
background-color: lightblue;// 背景颜色
text-align: center; // 文字对齐方式
line-height: 88px; //设置行高 让文字在垂直方向居中
font-size: 40px;// 设置字体
}
</style>
接下来 就是事件方法如何写,老语法
<script>
export default{
methods:{
click:function(){
console.log('你点疼我了')
}
}
}
</script>
新语法是这样写的
<script>
export default{
methods:{
click(){
// 日志输出
console.log('你点疼我了')
}
}
}
</script>
解释一下
methods 是方法集，所有事件方法都写在这个里面
特别提醒
不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
接下来 我们查看一下效果
打开两个终端窗口
分别 cd 进入工程目录 输入自动打包命令和启动服务命令
自动打包命令
xudeMacBook-Air:~ xujie$ cd /Users/xujie/Documents/weex/firstProject
xudeMacBook-Air:firstProject xujie$ npm run dev
启动服务命令
xudeMacBook-Air:~ xujie$ cd /Users/xujie/Documents/weex/firstProject
xudeMacBook-Air:firstProject xujie$ npm run serve
在google浏览器中输入localhost:8080
B2125463-5E3A-4574-87C2-32D2C83E1EFA.png
然后我们 在网页中,右击鼠标->检查
7BAA2AFD-2F87-43E6-8A75-D525D70321D1.png
此时单击绑定了事件的标签,在浏览器的右侧将会查看到如下的内容
4CF003BD-1FE0-4550-BB88-EF07D365D911.png
本节内容是一些基础的内容,我们后面有一些更高级的事件方法要教给大家!
