Vue第七天（事件处理器）

准备步骤如同第一天

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<!--v-on 指令-->
<div id="app1">
    <button v-on:click="count+=1">点击增加</button>
    <p>这个按钮被点击了{{count}}次</p>
</div>
<br>

<!--v-on 可以接收定义方法-->
<div id="app2">
    <!--greet:下面的定义方法-->
    <button v-on:click="greet">Greet</button>
    <br>
</div>

<!--直接绑定到方法-->
<div id="app3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('hello')">Say hello</button>
</div>
</body>
<script>
    /*v-on 指令*/
    /*       new Vue({
               el:'#app1',
               data:{
                   count:0
               }
           })*/

    /*v-on 可以接收定义方法*/
    /* new Vue({
         el: '#app2',
         data: {
             name: 'Vue.js'
         }
         // 在 `methods` 对象中定义方法
         , methods: {
             greet: function (event) {
                 // `this` 在方法里指当前 Vue 实例
                 alert('HELLO-' + this.name + '-!')
                 // `event` 是原生 DOM 事件
                 if (event) {
                     alert(event.target.tagName)
                 }
             }
         }
     })
     // 也可以用 JavaScript 直接调用方法
       app2.greet() // -> 'Hello Vue.js!'*/

    /*直接绑定到方法*/
    new Vue({
        el: '#app3',
        data: {
            say: function (message) {
                alert(message)
            }
        }
    })
</script>
</html>

Vue第七天（事件处理器）

猜你喜欢