Vue基础2

Vue基础2

---

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件处理

事件的基本使用

1.使用v-on：xxx或@xxx绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要箭头函数！否则this就不是vm；
4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或者组件实例对象；
5.@click=“demo”和@click=“demo($event)”效果一致，但后者可以传参；

• 点击事件

<div id="root">
        <h2>欢迎来到你的{
  {name}}</h2>
        <button v-on:click="showInfo">点我提示信息</button>
    </div>
    

v-on:click=“showInfo”:指代鼠标点击按钮时会调用showInfo这个函数

<script>
        Vue.config.productionTip = false
        new Vue({
   
            el: '#root',
            data: {
   
                name: '魔法城堡'
            },
            methods: {
   
                showInfo() {
   
                    alert('朋友你好')
                }
            }
        })

Vue实例中用methods这个配置对象书写函数showInfo()

• 事件修饰符

1.prevent:阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture:使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发的事件；
6.passive:事件的默认行为为立即执行，无需等待事件回调执行完毕；

• 键盘事件

<input type