一： 书写方式

  el代表的是element 
 Data:{  (存储数据)}
   格式为： new Vue({
   el :”要绑定的元素，可以是body Id选择元素  类名选择元素”
   data :{要存储的数据
}})

二： 关于类名 v-bind:class=”XXX” 可以简写 :class=”XXX

1 <strong :class="[re]">文字...</strong>
  <p :class="re"> xxxxxx</p>
  :class=”re” 和：class=”[ re]效果一样 只是[ ]可以绑定多个类名
2 <strong :class="{red:true,blue:true}">文字...</strong>
      ：class=“”  也可以绑定布尔值， true显示 false 就不显示
3  此 ：class=” a”   a的值也可以在data:{ }中显示 用true或false来判断
4 ：class=“json” 此在data: { }中可以多个用布尔值判定

三：在style 中 和class一样 都有简写：style=”” 此用法和class 一摸一样

四 过滤器

1 {{‘hellow’|uppercase}}  此是转化为大写
2 {{‘HELLOW’|lowercase}} 此是转化成小写
3 {{12|currency}} 转化为钱币
{{12|currency $}} 转化的是美元  {{12 |currency ￥}}转化的是人民币
4 debounce    要配合事件 延迟执行
 例：<input type="text" @keyup="show | debounce 2000"> 意思是延迟两秒执行，必须和事件配合执行
   5 数据配合过滤器
   5.1 LimitBy 参数（去几个  从哪开始）
   例：  <li v-for="val in arr | limitBy 2 arr.length-2">
               {{val}}
           </li>  此意思是取后面两位
   5.2 orderBy 排序 1 是正序 -1是倒序
   例：<li v-for="val in arr | orderBy -1（o如果是o，意思就是从o开始排序）">
               {{val}}
           </li>
   5.3 filterBy 过滤器  过滤包含的
   例：<li v-for="val in arr | filterBy a">
               {{val}}
  </li>  过滤的是包含有a 的

五 事件

1 v-on:click=”a” 点击事件 可以简写成@click=”a”
2 dblclick  双击事件 
3 mouseenter 移入事件
4 mouseout 移出事件
 用法实例：methods:{a:function(){要执行的函数} }

六 双向数据绑定 v-model=”msg”

  实例：<div id="box">
    <input type="text" v-model="msg">
          {{msg}}
</div>
此msg 有两种显示方式 1 可以随绑定的v-model的msg 变化而变化 2 可以在data:{ }中 msg的值写上

七 属性src

1 <img :src="url" alt="" :width="w" :title="t">可以在src中直接写url 然后在data 中写上url的地址
2 可以写多个属性  只需在data 的url中用逗号隔开。

八 循环 v-for=”item in items”

1 直接{{item}} 就可以循环items 的内容了
2 {{$index}} 可以打印出索引值
3 {{$key}} 可以打印出对象的key值 例如 json:{a:'apple',b:'banana',c:'orange'}
{{$key}} 可以打印出a b c

九 键盘事件

1 @keydown 点击下去的时候触发事件<input type="text" @keydown="show($event)">
 methods:{
              show:function(ev){
                  alert(ev.keyCode);
              }
          } 此ev.keyCode 能打印出keydown 的当前值
2 @keyup 点击离开后触发事件
3 3 <input type="text" @keyup.enter="show()"> 这是绑定的回车键 @keyup.left=’show()’ 这是绑定了左键
4 默认行为 @contextmenu="show($event)" 就比如ev.preventDefault 
5 事件冒泡 ev.cancelBubble=true;(在事件的函数中)
6 事件对象 ev.clientX 横坐标的值