1、v-on：指令监听DOM事件，并在触发时运行一些javaScript代码。
<div id=‘myView‘> ???<img src="img/se.png" v-on:click="queryBook"></div>
在视图模型中调用声明的监听事件
var myViewModel = new Vue({ ???el:‘#myView‘, ???data:myModel, ???methods:{ ???????queryBook:function(){ ???????????alert(‘ok?‘);});2、v-for：指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-1"> ???<li v-for="item in items"> ???????{{ item.message }} ???</li></ul>var example1 = new Vue({ ???el: ‘#example-1‘, ???????data: { ???????items: [ ???????????{ message: ‘Foo‘ }, ???????????{ message: ‘Bar‘ } ???????] ???}})运行结果：
3、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- 内联字符串拼接 --><img :src="‘/path/to/images/‘ + fileName"><!-- class 绑定 --><div :class="{ red: isRed }"></div><div :class="[classA, classB]"></div><div :class="[classA, { classB: isB, classC: isC }]"><!-- style 绑定 --><div :style="{ fontSize: size + ‘px‘ }"></div><div :style="[styleObjectA, styleObjectB]"></div><!-- 绑定一个有属性的对象 --><div v-bind="{ id: someProp, ‘other-attr‘: otherProp }"></div><!-- 通过 prop 修饰符绑定 DOM 属性 --><div v-bind:text-content.prop="text"></div><!-- prop 绑定。“prop”必须在 my-component 中声明。--><my-component :prop="someThing"></my-component><!-- 通过 $props 将父组件的 props 一起传给子组件 --><child-component v-bind="$props"></child-component><!-- XLink --><svg><a :xlink:special="foo"></a></svg>4、v-model：在表单控件元素上创建双向数据绑定，负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>运行结果：
5、component（组件）：可以扩展 HTML 元素，封装可重用的代码。（自定义元素）
<div id="myDiv"> ???//调用自定义组件 ???<student v-for="stu in stuList" v-bind:stu="stu" v-bind:key="stu.name"> ???</student></div>
<script> ???var model = {stuList : [{id:1,name : "zhangsan", age : 18}, {id:2,name : "lisi", age : 18}, {id:3,name : "wangwu", age : 18}]}; ???var vm = new Vue({ ???????el : "#myDiv", ???????data : model});<script>//如果在同一个页面中，要在确保viewModel启动之前先注册组件//在js中自定义组件目的是为了可复用//注册Vue.component(‘student‘, { ???//声明props ???props:[‘data‘], ???template: ‘<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>‘});Vue.js——常用的指令
原文地址：http://www.cnblogs.com/laizhouzhou/p/7989169.html