Vue1.0学习笔记

**vue生命周期:
钩子函数:
created             ->   实例已经创建 
beforeCompile   ->   编译之前
compiled                ->   编译之后
ready                   ->   插入到文档中 
beforeDestroy       ->   销毁之前
destroyed           ->   销毁之后

new Vue({
    el:'#box',
    data:{ //数据
    },
    methods:{//方法
    }，
    created:function(){
        alert('实例已经创建');
    }，
    created:function(){
        alert('编译之前');
    }，
    created:function(){
        alert('编译之后');
    }，
    created:function(){
        alert('插入到文档中');
    }，
    created:function(){
        alert('销毁之前');
    }，
    created:function(){
        alert('销毁之后');
    }
});

常用指令:
    v-model 一般表单元素(input)   双向数据绑定
循环:
当会循环的数组需要重复显示动态插入的相同的数据的时候使用track-by="索引"
track-by='索引'   提高循环性能

<li v-for="name in arr" track-by="{{index}}">
    {{$index}}
<li>
<li v-for="name in json">
    {{$index}}	{{$key}}
<li v-for="(k,v) in json">
    {{k}} {{v}} {{index}} {{key}}

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

new Vue({
    el:'#box',
    data:{ //数据
        show:true
    },
    methods:{
        show:function(){    //方法
            this.show = false
        }
    }
});

显示隐藏:
    v-show=“true/false” 
事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop="函数"         推荐
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    
    @keyup

<button @keyup="key($event)">键盘事件</button>
new Vue({
    el:'#box',
    data:{},
    methods:{
        key:function(ev){   
            ev.keyCode      //键盘的值
        }
    }
});

常用键:
    回车
        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是data里的数据
    :class="[red,b,c,d]"
    :class="{red:a, blue:false}"

:class="json"
        data:{
            json:{red:a, blue:false}
        }

style:
    :style="[c]"
    :style="[c,d]"
    注意:  复合样式，采用驼峰命名法 例backgroundColor
    :style="json"

模板:
    {{msg}}     数据更新模板变化
    {{*msg}}    数据只绑定一次
    {{{msg}}}   可以转意输出HTML
    <span>{{msg}}</span>    =   <span v-text="msg"></span>
    {{{msg}}}               =   <span v-text="msg"></span>

    ajax交互
    如果vue想做交互需引入: vue-resouce.js文件
    有两种写法
    this.$http.get().then(function(){},function(){})
    this.$http({
        url:地址,
        data:给后台提交数据,
        method:'get'/post/jsonp,
        jsonp:'cb' //cbName,
    }).then(function(){},function(){});
get:获取一个普通文本数据: 
new Vue({
    el:'#box',
    data:{ //数据
    },
    methods:{
        getData:function(){
            this.$http.get('aa.txt').then(function(res){
                alert(res.data);
            },function(res){
                alert(res.status);
            });
        }
    }
});
get数据给服务
new Vue({
    el:'#box',
    data:{ //数据
    },
    methods:{
        getData:function(){
            this.$http.get('get.php',{
                a:1,
                b:2
            }).then(function(res){
                alert(res.data);
            },function(res){
                alert(res.status);
            });
        }
    }
});

post数据给服务器:
new Vue({
    el:'#box',
    data:{ //数据
    },
    methods:{
        postData:function(){
            this.$http.post('post.php',{
                a:1,
                b:20
            },{
                emulateJSON:true  //用post需加上这一句
            }).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:{ //数据
    },
    methods:{
        getData:function(){     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);
            });
        }
    }
});     

计算属性的使用:
* computed里面可以放置一些业务逻辑代码，一定要return
new Vue({
    el:'#box',
    data:{ //数据
        a:1
    },
    computed:{
        b:{
            get:function(){  //return 返回的就是b的值
                return a+1
            }
            set:function(val){  //可设置其他属性的值，val就是b
                return this.a = val
            }
        }
    }
});

vue实例化后自带的一些简单方法:
var vm = new Vue();
vm.$el ->  就是元素
vm.$data  ->  就是data
vm.$mount ->  手动挂在vue程序
vm.$options    ->   获取自定义属性
vm.$destroy    ->   销毁对象
vm.$log(); ->  查看现在数据的状态

过滤器:-> 过滤模板数据
系统提供一些过滤器:
vue自带的过滤器
uppercase    过滤为大写  
lowercase    过滤为小写
capitalize   过滤为首字母
{{msg| filterA}}
{{msg| filterA 参数}} 
{{msg| filterA | filterB}}
currency     钱
参数:
第一个参数     {String} [货币符号] - 默认值: '$'
第二个参数     {Number} [小数位] - 默认值: 2
配合事件，延迟执行  debounce 2000    
<input type="button" @click="show | debounce 2000">

数据配合使用过滤器:
limitBy 参数(取几个)           取多少个     
limitBy 取几个  从哪开始    取从哪开始的多少个
filterBy ‘谁’                   取包含哪个字母的
orderBy 排序                   按参数排序
orderBy 取哪个 1/-1          取哪个字母的正序或倒序
    1  -> 正序
    2  -> 倒序
<li v-for="val in arr | limitBy 2"></li>
new Vue({
    el:'#box',
    data:{ //数据
        arr:[1,2,3,4,5]
    }
});

自定义过滤器: model ->过滤 -> view

    Vue.filter(过滤器名,function(input){
        //过滤逻辑
    });

时间转化器

过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<+]>/g,'');
            },
            write:function(val){ //view -> model
                return val;
            }
});
数据 -> 视图
model -> view
view -> model
自定义指令:
    属性:
    Vue.directive(指令名称,function(参数){
        this.el -> 原生DOM元素
    });
<div v-red="参数"></div>
指令名称:   v-red  ->  red
* 注意: 必须以 v-开头
自定义元素指令:（用处不大）
    Vue.elementDirective('zns-red',{
        bind:function(){
            this.el.style.background='red';
        }
    });

@keydown.up
@keydown.enter
@keydown.a/b/c....

自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb);  //浅度
vm.$watch(name,fnCb,{deep:true});  //深度监视**