1 基本用法和ajax

模版

{{msg}} 数据更新模板变化  相当与v-text
{{*msg}}    数据只绑定一次  
{{{msg}}}   HTML转意输出   相当与v-html

属性

v-bind:src=""
width/height/title....
简写  ::src=""    推荐
<img src="{{url}}" alt="">  效果能出来，但是会报一个404错误
<img v-bind:src="url" alt="">   效果可以出来，不会发404请求

v-model 一般表单元素(input) 双向数据绑定

v-for 循环 能获取到的有 {{$index}} {{$key}}

1.  v-for="value in json"        //数组
2.  v-for="(k,v) in json"         //对象

v-on:click="函数" @:click 简写

v-on:click/mouseout/mouseover/dblclick/mousedown.....   
事件对象  $event
阻止事件冒泡 @click.stop=""
阻止默认行为 @click.prevent=""
常用键:
    回车
        a). @keyup.13
        b). @keyup.enter
    上、下、左、右
        @keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down

v-show="false/true" 显示隐藏

class和style 注意: 复合样式，采用驼峰命名法

1.  :class="json"  //json:{red:true,blue:true}  结果:class="red blue"    赋值
2.  :class="['red',d]"  // data:{ red:'green'}   结果:class="red green"   数组形式
3.  :class="{red:a,blue:b}" //data:{a:true,b:false}        结果:class="red"  对象形式
4.  :class="['green',red,{'a':true,'b':false}]"  //data:{ red:'c'}  结果:class="green c a"   混合
1.  :style="{color:'red'}"  // 结果style="color:red"    对象
2.  :style="[c,d]" //data:{c:{color:'red'},d:{backgroundColor:'gray'}}    结果:style="color:red"  赋值
3.  :style="c"   //a:{color:'red',backgroundColor:'gray' } 结果: style="color:red; backgroundColor:gray;"  赋值

过滤器

        {{'welcome'|uppercase}} //大写
        {{'WELCOME'|lowercase}}//小写
        {{'WELCOME'|lowercase|capitalize}} //先小写然后首字母大写
        {{12|currency}}//转化美金
        {{12|currency '￥'}}//转化人名币
        ....

$http （ajax） （注意要引入 vue-resource）

//get请求方式
    //给服务发送数据:√   
    this.$http.get('get.php',{// 这个参数是发送的数据
         a:1,
         b:20
     }).then(function(res){
         alert(res.data);
     },function(res){
        alert(res.status);
     });
 //post请求方式
     this.$http.post('post.php',{//这个参数是发送的数据
        a:1,
        b:20
     },{                                     //这个参数是标题头                          
        emulateJSON:true
     }).then(function(res){
        alert(res.data);
     },function(res){
        alert(res.status);
     });
//jsonp请求方式
     this.$http.jsonp('https://sug.so.360.cn/suggest',{
         word:'a'          //这个参数是发送的数据   
     },{
         jsonp:'cb'       //callback名字，默认名字就是"callback"  如果不是这定义名字
     }).then(function(res){
         alert(res.data.s);
     },function(res){
         alert(res.status);
     });
//如果请求有错误的话第二个参数改成{params: {word: 'a' }}