vue入门(第一讲)

vue:
读音: v-u-e
view

vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
mvp,mvvm,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}}    (vue2.0已经停用$index)

        v-for="name in json"
            {{$index}}  {{$key}} (vue2.0已经停用$key)
    
        v-for="(k,v) in json"
      //vue2.0写法
     v-for="(item,index,key) in items"
  {{index}},{{key}},{{item}}

事件:

        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; //js正常的阻止冒泡事件
            b). @click.stop 推荐   //vue提供的阻止冒泡事件

默认行为(默认事件):
    阻止默认行为:

            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="" 推荐

    ![]({{url}})    效果能出来，但是会报一个404错误
    ![](url)    效果可以出来，不会发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}}    数据只绑定一次(vue2.0已经改为v-once)
    
    {{{msg}}}   HTML转意输出

---

过滤器:-> 过滤模板数据(vue2.0已经取消所有过滤器,所有过滤器都要自定义)
系统提供一些过滤器:

    {{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',{
              params:{
                   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);
    });