1、vueJs基础知识01

vue是框架，vue.js是vue框架的核心js库

库：是一个封装好的特定的方法的集合，提供给开发者使用，库没有控制权，控制权在使用者手中。代表：jQuery、underscore、util

框架：框架就是一整套架构，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权在框架本身，使用者要用框架所规定的某种规范进行开发。代表：backbone、angular、vue

历史过渡框架：jQuery --> YUI --> backbone ---> anguler --> react -->vue

vue将库结合在一起，VueRout、vuex，axios

特点：响应式数据绑定（放弃操作dom，进而操作数据）

　　　可组合的组件系统

初识vue.js

　　读音：同view，视图的意思

　　vue到底是什么：一个mvvm框架（库），和angular类似，比较容易上手、小巧

　　mvc思想：module层（数据）和view层（视图）分离，由数据驱动视图，类似的有

　　　　　　　　mvp，mvvm，mv*，mvx等

　　官网：http://cn.vuejs.org/

　　手册：http://cn.vuejs.org/api/

vue和angular的区别

　　vue----简单，易学

　　　　　指令以v-xxx的形式

　　　　　它是一片html代码（view层），配合上json数据（module层），然后再new出vue实例（vm层即controller）组成

　　　　　是有个人维护的项目

　　　　　适合：移动端项目，小巧灵活

　　　　　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(){}

　　vue：
　　　　指令: 扩展html标签功能,（其实就是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”

事件

　　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请求（推荐使用bind动态绑定）

class和style:

    :class=""    v-bind:class=""  //可以跟单个类
    :style=""    v-bind:style=""

    :class="[red]"    //red是数据，可以跟数组
    :class="[red,b,c,d]"

    :class="{red:a, blue:false}"  //a是数据，可以跟对象

    :class="json"  //可以跟整体一个json数据

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

模板　

　　{{msg}} 数据更新模板变化
　　{{*msg}} 数据只绑定一次

　　{{{msg}}} HTML转义输出html标签

过滤器：过滤模板数据

　　　　系统提供一下过滤器：

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

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

    currency    钱

    {{msg| filterA 参数}} （参数以空格分开）

    ....

交互

　　全局调用http和实例调用http

　　(全局使用)Vue.http.get....../ （实例使用）this.$http.get...    $http （类似于jq中的ajax功能）

    如果vue想做交互

    引入: vue-resouce （vue2.0已不维护，推荐使用axios）

    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);
        });
　　　　
　　　　

　　　　　　this.$http.get()/post()/jsonp()

　　　　　　this.$http({
　　　　　　　　url:地址
　　　　　　　　data:给后台提交数据,
　　　　　　　　method:'get'/post/jsonp
　　　　　　　　jsonp:'cb' //cbName
　　　　　　});