Vue之事件绑定

CSNMD

于 2024-12-18 09:20:08 发布

阅读量147

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144550180

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../lib/vue2/vue.js"></script>

</head>

<body>
  <div id="app">
    <h1>{{ msg }}</h1><br />
    <h1>{{ msg }}</h1><br />
    <button v-on:click="clickButton1">点击展示提示信息</button><br />
    <button @click="clickButton2">点击展示提示信息</button>
  </div>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    const vm = new Vue({
      data() {
        return {
          msg: 'hello world'
        }
      },
      methods: {
        clickButton1() {
          console.log('clickButton1:',this)
          alert('点击了按钮1')
        },
        clickButton2:()=> {
          console.log('clickButton2:',this)
          alert('点击了按钮2')
        },
      }
    })
    vm.$mount('#app')

    // 延迟渲染

    // setTimeout(() => {
    //   vm.$mount('#app')
    // }, 2000)
  </script>
</body>

</html>