下面的例子中，我们将创建一个say方法，这个方法绑定在一个button上。点击产生的效果就是弹出一个带有用户name的欢迎框。为了将这个方法指派给button，我们需要用v-on:click来进行事件绑定。
<div> 输入您的姓名: <input type="text" v-model="name"> <button v-on:click="say">欢迎点击</button> //#1 <button @click="say">欢迎点击</button> //#2 </div> <script> var V = new Vue({ el : '#vueInstance', data : { name : '_Appian' }, methods : { say : function(){ alert('欢迎' + this.name); } } }); </script>
当然了，不仅是可以绑定click点击事件，还可以绑定其他鼠标事件，键盘输入事件等一些js的事件类型。比如v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其他的自定义事件。
在开发过程中，你可能会频繁的用到事件绑定，v-on写起来有点麻烦，所以上例中提供了两种写法，#2就是对#1写法的缩写。利用@代替v-on，这里不多说。
利用v-if或者v-show进行条件判定
如果我们希望用户在登录之后才能看到欢迎弹窗，而如果没有登录则给它一个登录界面。Vue会提供给我们v-if指令和v-show指令用来控制不同登录状态下的显示内容。
利用先前的例子，我们可以用loginStatus的值来控制是否登录，如果是true则显示输入框和按钮让他能够看到欢迎弹窗，但如果是false（即未登录），则只能看到输入账号、密码的输入框和提交按钮（暂时不进行身份验证，只改变登录状态）。
<div> //loginStatus为true时会显示的section <section v-if="loginStatus"> 输入您的姓名: <input type="text" v-model="name"> <button v-on:click="say">欢迎点击</button> <button @click="switchLoginStatus">退出登录</button> </section> //loginStatus为false时会显示的section <section v-if="!loginStatus"> 登录用户: <input type="text"> 登录密码: <input type="password"> <button @click="switchLoginStatus">登录</button> </section> </div> <script> var V = new Vue({ el : '#vueInstance', data : { name : '_Appian', loginStatus : false }, methods : { say : function(){ alert('欢迎' + this.name); }, switchLoginStatus : function(){ this.loginStatus = !this.loginStatus; } } }); </script>
this的执行就是实例V。this的指向是一个需要自己去搞懂的问题，这里不多说。在上述例子中，只要把V-if换成v-show，一样可以获得等同的效果。同时v-if和v-show他们都支持v-else，但是绑定v-else命令的标签的前一兄弟元素必须有 v-if 或 v-show。
在上面的例子中，只要点击“登录”或者“退出登录”按钮都会触发switchLoginStatus方法，只要触发了这个方法就会导致loginStatus的状态变化（在true和false中进行切换），从而改变了html中的v-if的判断条件结果的变化，基于当前的loginStatus的布尔值的状态，使得显示的section是不同状态下的section。
v-show和v-if之间有什么区别呢?
在切换 v-if 块时，Vue有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
这个差别也许对你目前的开发来说并不重要，但是你还是要注意和留心，因为当你的项目开发变大的时候，这点会变得重要起来。
利用v-for输出列表
如果你是经营一个电商平台的商人的话，你一定有很多页面都需要渲染商品列表的输出。v-for指令允许循环我们的数组对象，用 “element in arrayObj” 的方式，念作“循环arrayObj这个数据对象里的每一个element”。
下面的例子中，我们将会利用v-for指令循环输出一个商品列表。每一个商品都会在一个li中，li中输出商品的名称、价格和商品类型。
<div> <ul> <li v-for="el in products"> {{ el.name }} - ￥ {{ el. price }} - {{ el. category }} </li> </ul> </div> <script> var V = new Vue({ el : '#vueInstance', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, category: 'electronics'}, {name: 'mouse', price: 40, category: 'electronics'}, {name: 'earphones', price: 20, category: 'electronics'}, {name: 'monitor', price: 120, category: 'electronics'} ] } }); </script>