2018-05-05 一

一、简介

是一个mvvm框架（库），和angular类似，小巧易上手
mvc：mvp、mvvm、mv*、mvx

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

vue和angular的区别：

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

<script src="vue.js"></script>
    <script>
        window.onload = function(){
            var c = new Vue ({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        }
    </script>
</head>
   <div id="box">
       {{msg}}
   </div>

二、常用指令

v-model 一般用在表单元素

    <input type="text" v-model="msg">
    <input type="text" v-model="msg">
    {{msg}}
    <!--双向数据绑定，改变一个都改变-->

el里放的是选择器：可以是标签 id class等

v-for vue循环
属性 {{$index}} {{$key}}

 var c = new Vue ({
                el:'#box',
                data:{
                    msg:'welcome',
                    msg1:123,
                    msg2:true,
                    arr:['a','b','c'],
                    json:{a:'aaa',
                        b:'bbb',
                        c:'ccc'
                    }
                }
            });

    <ul>
        <li v-for="value in json">
            {{value}} {{$index}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="value in arr">
            {{value}} {{$index}} {{$key}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(k,v) in arr">
            {{k}} {{v}} {{$index}} {{$key}}
        </li>
    </ul>

三、事件

v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....

 window.onload = function(){
            var c = new Vue ({
                el:'#box',
                data:{
                    msg:'welcome',
                    msg1:123,
                    msg2:true,
                    arr:['a','b','c'],
                    json:{a:'aaa',
                        b:'bbb',
                        c:'ccc'
                    }
                },
               methods:{
                   show:function(){
                       alert("啦啦啦")
                   },
                   add:function(){
                       this.arr.push('d')
                   }
               } ,
            });
        }
    </script>
    <div id="box">
      <button value="" v-on:click="show()">show</button>
      <button value="" v-on:click="add()">add</button>
      <ul>
          <li v-for="value in arr">{{value}}</li>
      </ul>
    </div>

显示隐藏 : v-show=“true/false”
v-on:click/mouseover.....
简写方法： @click=" "
事件对象：@click="show($event)"

            new Vue ({
                el: '#box',
                data:{

                },
                methods:{
                    add:function(aa,bb){
                        alert(aa.clientX);
                        alert(bb);
                    }
                }
            })
        }
   <div id="box">
       <button @click="add($event,12)">按钮</button>
   </div>

事件冒泡，阻止冒泡：
a). ev.cancelBubble=true;
b). @click.stop 推荐

                methods: {
                    show: function () {
                        alert("div的");
                    },
                    showhh: function () {
                        alert("button的");
                    }
                }
<div id="box">
    <div id="box1" @click="show()">
        <button @click.stop="showhh()">按钮</button>
    </div>
</div>

默认行为(默认事件)，阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐

                methods: {
                    show: function (ev) {
                        alert("1");
//                        ev.preventDefault();
                    }
                }
<div id="box">
    <!--<input type="button" value="按钮" @contextmenu="show($event)">-->
    <input type="button" value="按钮" @contextmenu.prevent="show()">

键盘：
@keydown、$event、ev.keyCode、
@keyup
常用键：回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

                methods: {
                    show: function (ev) {
                        if(ev.keyCode==13){
                            alert("您按回车了");
                        }
                    },
                    show1:function(ev){
                        alert(ev.keyCode);
                    },
                    show2:function(ev){
                        alert("您按回车了");
                    }
                }
<div id="box">
        <input type="text" @keydown="show($event)">
        <input type="text" @keyup="show1($event)">
        <input type="text" @keydown.13="show2($event)">
</div>

四、属性:

v-bind:src=""
width/height/title....
简写方法 ：src=" "
<img :src="url" alt="">

    <img src="{{url}}" alt="">  效果能出来，但是会报一个404错误
    <img v-bind:src="url" alt="">   效果可以出来，不会发404请求

五、class和style

:class=" "
v-bind:class=" "
1. :class="[red]" red是数据
2. :class="[red,b,c,d]"
3. :class="{red:a, blue:false}"
4. :class="json"
  data:{
  json:{red:a, blue:false}
  }

       data:{
                  red:'red',
                  a:'blue',
//                后面的类名，前面是数据
                  json:{red:true,blue:'a'}
//                后面是数据，前面是类名
                }
<div id="box">
   <!--<div :class=[red,a]>div</div>-->
    <!--<div :class="{red:true,blue:a}">aaa</div>-->
    <div :class="json">div</div>

:style="" v-bind:style=""
1. :style="[c]"
2. :style="[c,d]"
  注意: 复合样式，采用驼峰命名法
3. :style="json"

                    c:{
                        color:'red',
                    },
                    d:{
                        backgroundColor:'blue'
                    },
                    json:{ 
                        color:'red',
                        backgroundColor:'blue'
                    }
    <div :style="[c]">style</div>
    <div :style="[c,d]">style</div>
    <div :style="json">style</div>

六、模板

{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出

                    data:{
                    msg:'abc'
                }
    <div id="box">
        <input type="text" v-model="msg">
        <br>
        {{msg}}
        {{*msg}}
        {{{msg}}}
    </div>

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

系统提供一些过滤器:
一个过滤器：{{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

百度下拉列表实例：

  new  Vue({
                el:'#box',
               data:{
                   myData:[],
                   t1:'',
                   now:-1
               },
                methods:{
                    get:function(ev){
                        if(ev.keyCode == 38|| ev.keyCode == 40){
                            return;
                        }
                        if(ev.keyCode == 13){
                            window.open("https://www.baidu.com/s?wd="+this.t1);
                            this.t1='';
                        }
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:this.t1
                        },{
                            jsonp:'cb'
                        }).then(function(res){
                            this.myData = res.data.s;
                        },function(){

                        });
                    },
                    changeDown:function() {
                        this.now++;
                        if(this.now==this.myData.length){
                            this.now=-1;
                        }
                        this.t1 = this.myData[this.now];
                    },
                    changeUp:function(){
                        this.now--;
                        if(this.now==-2){
                            this.now=this.myData.length-1;
                        }
                        this.t1 = this.myData[this.now];
                    }
                }
            });
        };
    <div id="box">
        <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
        <ul>
            <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
        </ul>

        <p v-show="myData.length==0">暂无数据</p>
    </div>

作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo