vue 和ng的區別

vue:
    讀音:    v-u-e
    view

    vue到底是什么?
        一個mvvm框架(庫)、和angular類似
        比較容易上手、小巧
    mvc:
        mvp
        mvvm
        mv*
        mvx
    官網: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}}
    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標簽功能,屬性

    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

    作業:
        1. 簡易留言-> 確認刪除? 確認刪除全部
        2. 用vue get 寫個例子    weibo