前端vue框架（3）——vue的基础语法(下)

上一篇入口：

前端vue框架（2）——vue的基础语法(上)-CSDN博客文章浏览阅读567次，点赞9次，收藏6次。vue的安装在上一篇博客中前端vue框架(1)——vue的安装-CSDN博客Vue (发音为 /vju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和 javaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。1.渐进式框架vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。https://blog.csdn.net/2301_78566776/article/details/145126288?spm=1001.2014.3001.5501

一、事件处理

1.内联事件处理器

2.方法事件处理器

二、事件对象$event

1.获取 event 对象

2.传递参数

3.Demo

编辑

4.传参的过程当中获取 event

三、事件修饰符

1.阻止默认事件

2. 阻止事件冒泡

一、事件处理

我们可以使用v-on指令（简写为@)来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：

javascript">on:click="methodName"或@click="handler"

事件处理器的值可以是

内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似)

方法事件处理器：一个指向组件上定义的方法的属性名或是路径

1.内联事件处理器

内联事件处理器通常用于简单场景

javascript"><template><h1>Hello world</h1><button @click="count++">Add</button><p>{{ count }}</p>
</template>
<script>export default{data(){return{count:0}}}
</script>

2.方法事件处理器

javascript"><template><h1>Hello world</h1><button @click="addCount">Add</button><p>{{ count }}</p>
</template>
<script>export default{data(){return{count:0}},//所有的方法或者函数都放在这里methods:{addCount(){this.count++;}}}
</script>

二、事件对象$event

事件参数可以获取event对象和通过事件传递数据

1.获取 event 对象

javascript"><template><h1>Hello world</h1><button @click="addCount">Add</button><p>{{ count }}</p>
</template>
<script>export default{data(){return{count:0}},methods:{addCount(e){console.log(e)this.count++;}}}
</script>

注意：vue当中的event对象，就是原生JS的Event对象。

javascript"><template><h1>Hello world</h1><button @click="addCount">Add</button><p>{{ count }}</p>
</template>
<script>export default{data(){return{count:0}},methods:{addCount(e){// vue当中的event对象，就是原生JS的Event对象\e.target.innerHTML = "Add" + this.countthis.count++;}}}
</script>

2.传递参数

javascript"><template><h1>Hello world</h1><button @click="addCount('hello')">Add</button><p>{{ count }}</p>
</template>
<script>export default{data(){return{count:0}},methods:{addCount(msg){console.log(msg)  this.count++;}}}
</script>

3.Demo

对于Demo我添加了详细的备注

javascript"><template><!-- 组件的模板部分 --><h1>Hello world</h1> <!-- 一个简单的标题 --><!-- 使用 v-for 指令循环遍历 names 数组，为每个元素创建一个 <p> 元素 --><!-- @click 是 Vue 的事件监听语法，用于绑定点击事件处理器 --><!-- getNameHandler 是定义在 methods 中的方法，用于处理点击事件 --><!-- :key 是 Vue 的一个特殊属性，用于给每个循环的元素一个唯一的标识 --><p @click="getNameHandler(item)" v-for="(item, index) in names" :key="index">{{ item }} <!-- 显示当前循环的元素 --></p>
</template><script>
export default {// 组件的数据对象data() {return {// 定义一个名为 names 的数组，包含一些字符串元素names: ["admin", "张三", "李四"]};},// 组件的方法对象methods: {// 定义一个名为 getNameHandler 的方法，用于处理点击事件// 该方法接收一个参数 name，即被点击的 <p> 元素对应的 names 数组中的元素getNameHandler(name) {// 在控制台打印出被点击的元素对应的名称console.log(name);}}
};
</script>

在该Demo中，点名字就会出现值

4.传参的过程当中获取 event

三、事件修饰符

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好

为了解决这一问题,Vue为v-on提供了事件修饰符，常用有以下几种：

.stop

.prevent

.once

.enter

....

1.阻止默认事件

我们知道a标签点击之后会发生跳转，那我们能不能阻止这一事件的发生呢？

javascript"><template><a @click="clickHandler" href="https:www.baidu.com">百度</a>
</template>
<script>export default{methods:{clickHandler(e){//阻止默认事件e.preventDefault();console.log("点击了")}}}
</script>

我们也可以采用更直接的方式