<div id="app">
<input type="button"
    value="单击后增加"
    @click="m +=1"
    >

<input type="button"
    value="绑定函数的按钮"
    @click="add"
    >

<input type="button"
    value="绑定可传值函数的按钮"
    @click="add2(3,4)"
    >

<div>这个按钮被点击了 {{ m }} 。</div>
</div>

尝试一下 »

当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：

<button v-on:click="say('hi',$event)">say hi</button>

methods:{
  say:function(message,e){
     alert(message);
     console.log(e.currentTarget);
  }
}

尝试一下 »

computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会；例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法：

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

Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

• 1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
• 2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
• 3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

九九乘法是程序员的最爱:

<div id="app">
    <div v-for="n in 9">
        <b v-for="m in n">
            {{m}}*{{n}}={{m*n}}
        </b>
    </div>
</div>

尝试一下 »