模板语法

      mustache语法: {{ msg }}   msg需要在data里面定义
      html赋值:   v-html=""
      绑定属性: v-bind:id=""
      使用表达式：{{ok?'yes':'no'}}
      文本赋值：v-text=""
      指令：v-if=""
      过滤器 {{msg | capitalize}} 和 v-bind:id="rawld | formatId"

class和style绑定

      对象语法：v-bind:class="{active : isActive,“tex-danger" : hasError }"
      数组语法：v-bind:class="[activeClass,errorClass]"
                       data:{
                                activeClass:'active',
                                errorClass:'tex-danger'
                          }

         style绑定-对象语法  v-bind:style="{color: activeColor,fontSize:fontSize+'px'}"
                       data:{
                                activeColor :'red',
                                fontSize:12
                          }

条件渲染

           v-if
           v-else
           v-else-if
           v-show
           v-cloak

vue事件处理器

           v-on:click='greet'或者 @click='greet'  //angluar 的 ng-click='aa()'
           v-on:click.stop   阻止默认事件
           v-on:click.stop.prevent  阻止默认事件，阻止冒泡
           v-on:click.self     点击自己才有效
           v-on:click.once     只绑定一次
           v-on:keyup.enter (enter/tab/delete/esc/sapce/up/down/left/right) 鼠标按下绑定指定按钮

vue组件

           全局组件和局部组件 
           父子组件通讯--数据传递  （emit （子 ->父 ） pass props（父->子））
           slot (插槽)

          组件的定义与使用
          定义：
           Vue.component('todo-item',{
               template: '<div></div>' //html 代码 
           });
           使用：
           <!-- 创建一个 todo-item组件的实例 -->
           <todo-item></todo-item>

           组件接收到父作用域传递的数据
           定义：
           Vue.component('todo-item',{
               props：['todo']
               template: '<div>{{todo.text}}</div>' //html 代码 
           });
           使用：
           <!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，晚些时候我们会做个解。-->
           <todo-item 
               v-for="item in groceryList" 
               v-bind:todo="item"
                v-bind:key="item.id"
               ></todo-item>