vue学习part1

vue:

1、读音:   v-u-e2、vue到底是什么?    一个mvvm框架(库)、和angular类似    比较容易上手、小巧3、mvc:    mvp    mvvm    mv*    mvx4、官网:http://cn.vuejs.org/5、手册： http://cn.vuejs.org/api/

vue和angular区别?

vue——简单、易学    指令以 v-xxx    一片html代码配合上json，在new出来vue实例    个人维护项目    适合: 移动端项目,小巧    vue的发展势头很猛，github上start数量已经超越angularangular——上手难    指令以 ng-xxx    所有属性和方法都挂到$scope身上    angular由google维护    合适: pc端项目共同点: 不兼容低版本IE

---

vue基本雏形:

angular展示一条基本数据:        html:            <div> ng-controller="xxx"{{msg}}</div>        js:            var app=angular.module('app',[]);            app.controller('xxx',function($scope){ //C                $scope.msg='welcome'            })vue展示一条基本数据:        html:            <div id="box">                {{msg}}            </div>          js:             var c=new Vue({                el:'#box',  //选择器  class tagName                data:{                    msg:'welcome vue'                }            }); 

常用指令:

        angular:            ng-model               ng-controller            ng-repeat            ng-click            ng-show            $scope.show=function(){}        指令: 扩展html标签功能,属性        vue:        v-model 一般表单元素(input)   双向数据绑定        循环:            vue2.0把$index换成了index,使用方法(name,index)            v-for="name in arr"                    {{$index}}            v-for="name in json"                    {{$index}}{{$key}}            v-for="(k,v) in json"        事件:            v-on:click="函数"            v-on:click/mouseout/mouseover/dblclick/mousedown.....            new Vue({                        el:'#box',                        data:{ //数据                            arr:['apple','banana','orange','pear'],                            json:{a:'apple',b:'banana',c:'orange'}                        },                        methods:{                            show:function(){    //方法                                alert(1);                            }                        }                    });            显示隐藏:                v-show=“true/false”

bootstrap+vue简易留言板(todolist):

bootstrap: css框架    跟jqueryMobile一样    只需要给标签 赋予class，角色    依赖jquery

---

事件:

v-on:click/mouseover......简写:@click=""       推荐事件对象:    @click="show($event)"事件冒泡:    阻止冒泡:        a). ev.cancelBubble=true;        b). @click.stop 推荐默认行为(默认事件):    阻止默认行为:        a). ev.preventDefault();        b). @contextmenu.prevent    推荐            contextmenu右键键盘:    @keydown    $event ev.keyCode    @keyup    常用键:        回车            a). @keyup.13            b). @keyup.enter        上、下、左、右            @keyup/keydown.left            @keyup/keydown.right            @keyup/keydown.up            @keyup/keydown.down

---

属性:

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

---

class和style:

:class=""   v-bind:class="":style=""   v-bind:style="":class="[red]"  red是数据:class="[red,b,c,d]":class="{red:a, blue:false}":class="json"    data:{        json:{red:a, blue:false}    }--------------------------style::style="[c]":style="[c,d]"    注意:  复合样式，采用驼峰命名法:style="json"

---

模板:

{{msg}}             数据更新模板变化{{*msg}}    v-once  数据只绑定一次{{{msg}}}   v-html  HTML转意输出    没有标签<P></P>

---

过滤器:-> 过滤模板数据

vue2.0取消了过滤器系统提供一些过滤器:{{msg| filterA}}{{msg| filterA | filterB}}uppercase   eg: {{'welcome'| uppercase}}lowercasecapitalizecurrency    钱{{msg| filterA 参数}}

---

交互:

$http  （ajax）如果vue想做交互引入: vue-resouceget:    获取一个普通文本数据:    this.$http.get('aa.txt').then(function(res){        alert(res.data);    },function(res){        alert(res.status);    });    给服务发送数据:√    this.$http.get('get.php',{        a:1,        b:2    }).then(function(res){        alert(res.data);    },function(res){        alert(res.status);    });post:    emulateJSON:true    模拟json数据必须写    this.$http.post('post.php',{        a:1,        b:20    },{        emulateJSON:true    }).then(function(res){        alert(res.data);    },function(res){        alert(res.status);    });jsonp:    https://sug.so.360.cn/suggest?callback=suggest_so&word=a    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{        wd:'a'    },{        jsonp:'cb'  //callback名字，默认名字就是"callback"    }).then(function(res){        alert(res.data.s);    },function(res){        alert(res.status);    });