VUE

学习vue1.0

vue到底是什么?
    一个mvvm框架(库)、和angular类似
    比较容易上手、小巧
官网:http://cn.vuejs.org/    
手册： http://cn.vuejs.org/api/

vue和angular区别?

vue——简单、易学
    指令以 v-xxx
    一片html代码配合上json，在new出来vue实例
    个人维护项目

    适合: 移动端项目,小巧

    vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
    指令以 ng-xxx
    所有属性和方法都挂到$scope身上
    angular由google维护

    合适: pc端项目

共同点: 不兼容低版本IE

---

vue基本雏形:

angular展示一条基本数据:

    var app=angular.module('app',[]);

    app.controller('xxx',function($scope){    //C
        $scope.msg='welcome'
    })

    html:
    <div ng-controller="xxx">
        {{msg}}
    </div>

vue:
    html:
        <div id="box">
            {{msg}}
        </div>

        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)    双向数据绑定

循环:
    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    推荐
键盘:
    @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}}    数据只绑定一次
{{{msg}}}    HTML转意输出

---

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

系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase    eg:    {{'welcome'| uppercase}}
lowercase
capitalize

currency    钱

{{msg| filterA 参数}}

....

---

交互:

$http    （ajax）

如果vue想做交互

引入: vue-resouce

get:
    获取一个普通文本数据:
    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:
    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);
    });

百度的接口：https://www.baidu.com/s?wd=s