当前位置：网站首页>07_ Basic use of events

07_ Basic use of events

2022-07-19 01:37:00 【ID does not exist.】

The basic use of events

The basic use of events ：

1. Use v-on：xxx or @xxx The binding event , among xxx Is the event name

2. Event callback needs to be configured in methods In the object , Eventually it will be vm On

3.methods Functions configured in , Don't use arrow functions , otherwise this It's not vm 了

4.methods Functions configured in , It's all about being vue Managed functions ,this The direction is vm Or component instance object

[email protected]="demo" and @click="demo($event)" The effect is consistent , But the latter can be passed on 

<body>
    <div id="root">
        <h2> Welcome to {
  {name}} Study </h2>
        <!-- <button v-on:click="showInfo"> Click my prompt </button> -->
        <button @click="showInfo1"> Click my prompt 1（ Don't pass it on ）</button>
        <button @click="showInfo2($event,66)"> Click my prompt 2（ The ginseng ）</button>
    </div>
</body>
​
<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .
​
    const vm = new Vue({
        el: '#root',
        data: {
            name: ' Silicon Valley ',
        },
        methods: {
            showInfo1(event) {
                // console.log(event.target.innerText)
                // console.log(this) // Here this yes vm
                alert(' Hello, classmate ！')
            },
            showInfo2(event, number) {
                console.log(event, number)
                // console.log(event.target.innerText)
                // console.log(this) // Here this yes vm
                alert(' Hello, classmate ！！')
            }
        }
    })
</script>
原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170004038292.html

边栏推荐

猜你喜欢

随机推荐