Vue1.0学习小结1

作者: 前端工程狮_jam | 来源:发表于2017-09-04 21:34 被阅读0次

//vue雏形 el绑定元素，可以理解是angular的controll层，data放初始化数据。
//vm实例是全局，可能通过类似vm.$el/vm.$data来获取它的属性
//js
window.onload=function(){
//第一种方式，利用el来绑定
var vm=new Vue({
     el:'#box',
     data:{
        msg:'welcome vue'
     }
 });
 //第二种方式，利用$mount来挂载
 var vm=new Vue({
    data:{
       msg:'welcome vue'
    }
 }).$mount('#box');  // 手动挂载 vm.$mount('#box'); 
 };
 //html
 <div id="box">
    {{msg}}
 </div>

2. 常用指令

2.1 v-model 一般表单元素(input) 双向绑定，可显示文本/数组/对象，但对象会直接显示成[object Object]。
注意正常绑定模型是使用{{msg}}，如果接口返回过慢，可能会导致闪烁会先显示出大括号。为了避免这种情况可以用1、属性v-text="msg"等价于{{msg}}，2、增加个自定义属性v-cloak，把显示区域设为display:none。
其次它有{{msg}}和{{{msg}}}的用法
1、如果是加多一个号，使用{{*msg}}代表只绑定赋值一次，后来模型怎么变也不我的事
2、如果在最外层包多一层大括号，代表html转意输出。可以这么理解{{msg}}绑定的是像jQuery的text()，而{{{msg}}}绑定的是像jQuery的html()，属性v-html="msg"等价于{{{msg}}}

<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{*msg}}
<br>
{{{msg}}}

2.2 v-for 主要用做循环数组和JSON对象，数组v-for="name in arr"和对象v-for="name in json"都有{{$index}}，对象v-for="(k,v) in json"有{{$key}}。

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        }
    });
};
//html
<div id="box">
    <ul>
        <li v-for="value in arr">
            {{value}}   {{$index}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="value in json">
            {{value}}   {{$index}}  {{$key}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(k,v) in json">
            {{k}}   {{v}}   {{$index}}  {{$key}}
        </li>
    </ul>
</div>

2.3 v-show="true/false" 显示与隐藏，默认dom元素不写表示true

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{ //数据
            a:true
        }
    });
};
//html
<div id="box">
    <input type="button" value="按钮" v-on:click="a=false">
    <div style="width:100px; height:100px; background: red" v-show="a">
    </div>
</div>

注意这里如果用v-for有重复数据的话，需要使用track-by="$index"，绑定不同的序号。例如

<ul>
    <li v-for="val in arr" track-by="$index">
        {{val}}
    </li>
</ul>

自定义指令，不推荐使用元素指令，如想实现类似建议用组件的方式来。注意必须以v-开头，可以带参数

<span v-red>
    asdfasd
</span>
Vue.directive('red',function(){
    this.el.style.background='red';
});
//带参数
<span v-red="a">
    asdfasd
</span>
Vue.directive('red',function(color){
     this.el.style.background=color;
 });
 window.onload=function(){
    var vm=new Vue({
         el:'#box',
         data:{
             a:'blue'
         }
     });
 };
 //元素指令
 <div id="box">
    <zns-red>asdfasdf</zns-red>
</div>
 Vue.elementDirective('zns-red',{
     bind:function(){
         this.el.style.background='red';
     }
 });

3. 事件

v-on:click="函数" 这里的函数调用可以直接写函数名称，不需要写括号()；v-on可以理解为像jQuery一样用on绑定事件类型，注意事件需要写在methods里面去定义：v-on:click/mouseout/mouseover/dblclick/mousedown..... 它可以简写为@click=""推荐

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{ //数据
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            show:function(){
                alert(1);
            }
        }
    });
};
//html
<div id="box">
    <input type="button" value="按钮" v-on:click="show()">
</div>

事件调用可以使用$event参数，它可以当作当前target来使用，例如可以用它来阻止事件冒泡/默认行为等
1、阻止冒泡: a). ev.cancelBubble=true;b). @click.stop 推荐
2、阻止默认行为:a). ev.preventDefault(); b). @contextmenu.prevent 推荐
3、键盘值事件例如 a). @keyup.13 b). @keyup.enter 都是回车事件

方向键的上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

//冒泡事件
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
        },
        methods:{
            show:function(ev){
                alert(1);
                ev.cancelBubble=true;
            },
            show1:function(){
                alert(1);
            },
            show2:function(){
                alert(2);
            }
        }
    });
};
//html
<div id="box">
    <div @click="show2()">
        <input type="button" value="按钮" @click="show($event)">
        <input type="button" value="按钮" @click.stop="show()">
    </div>
</div>

//默认行为
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
        },
        methods:{
            show:function(ev){
                alert(1);
                ev.preventDefault();
            },
             show:function(){
                alert(1);
            }
        }
    });
};
//html
<div id="box">
    <input type="button" value="按钮" @contextmenu="show($event)">
    <input type="button" value="按钮" @contextmenu.prevent="show()">
    <input type="text" @keyup.enter="show()">  <!-- 你按了回车键 -->
</div>

4. 属性

vue绑定属性用v-bind: 例如v-bind:src="" ，其它width/height/title....也是。它可以简写成:src="" 推荐

//两种方式显示图片，建议用它推荐的属性绑定方式
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
            url:'https://www.baidu.com/img/bd_logo1.png',
            w:'200px',
            t:'这是一张美丽的图片'
        }
    });
};
//html
<div id="box">
    ![]({{url}})  <!-- 效果能出来，但是会报一个vue warning警告 -->
    ![](url)
</div>

5. class和style

class和style也是属性，所以它们绑定的方式跟前面我们讲的绑定图片src类似，例如:class=""等价于v-bind:class="" 或者:style=""等价于v-bind:style="" 。:style和:class都可以接受数组和JSON，不过需要注意的是复合样式，采用驼峰命名法。

//head :class接受数组
<style>
    .red{
        color: red;
    }
    .blue{
        background: blue;
    }
</style>
<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                red:'red',
                blue:'blue',
                a:true,
                b:false,
                json:{
                    red:true,
                    blue:true
                },
                style:{
                    color:'red',
                    backgroundColor:'gray'
                }
            }
        });
    };
</script>
//html
<div id="box">
    <strong :class="[red,blue]">文字...</strong>
    <strong :class="{red:true,blue:true}">文字...</strong>
    <strong :class="{red:a,blue:b}">文字...</strong>
    <strong :class="json">文字...</strong>
    <strong :style="style">文字...</strong>
</div>

6. 过滤器

过滤模板数据，系统提供一些过滤器。
a、例如capitalize/lowercase/uppercase/currency/json。格式参考：{{msg| filterA | filterB}}或{{msg| filterA 参数}}，例如capitalize是首字母大写，lowercase是全部小写，uppercase是全部大写，currency是转换成钱单位显示，json是显示obj对象数据，而不是[object Object]
b、debounce配合事件，延迟执行，单位是毫秒
c、limitBy作用是限制显示几个，limitBy可以带参数，第一个参数代表要取几个，第二个参数代表从哪里开始，前边算或者结尾都可以，用法类似substring。注意序号是从0开始算。
d、filterBy 过滤数据，有点类似搜索引擎做的事。filterBy ‘谁’过滤条件显示对应的数据
e、orderBy 排序 orderBy 1/-1 1代表正序 -1代表倒序
f、自定义过滤器，可以带参数

<div id="box">
    {{'welcome' | uppercase}}
    {{'WELCOME' | lowercase}}
    {{'WELCOME' | lowercase | capitalize}}
    {{12 | currency}}
    {{12 | currency '￥'}}
    {{obj | json}}
</div>
<input type="text" @keyup="show | debounce 2000"> //代表show事件延迟两秒执行

data数据为 arr:[1,2,3,4,5]
 <li v-for="val in arr | limitBy 2">  //限制默认显示两个
     {{val}}
 </li>
 <li v-for="val in arr | limitBy 2 arr.length-2"> //限制显示从后面倒数两位的两个
    {{val}}
 </li>
 
 data数据为arr:['width','height','background','orange'],    a:''
 <input type="text" v-model="a">
 <ul>
    <li v-for="val in arr | filterBy a">
        {{val}}
    </li>
 </ul>
 
 <li v-for="val in arr | orderBy -1">  //倒序
    {{val}}
 </li>
 
 //自定义过滤器，不带参数
 <div id="box">   
    {{a | toDou}}
</div>
Vue.filter('toDou',function(input){
    return input<10?'0'+input:''+input;
});
//自定义过滤器，带参数
<div id="box">
    {{a | toDou 1 2}}
</div>
Vue.filter('toDou',function(input,a,b){
    alert(a+','+b);
    return input<10?'0'+input:''+input;
});
//双向过滤
 <div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    {{{msg}}}
</div>
Vue.filter('filterHtml',{
    read:function(input){ //model-view
        return input.replace(/<[^<]+>/g,'');
    },
    write:function(val){ //view -> model
        console.log(val);
        return val;
    }
});

7. 数据交互

数据交互请求需要用到vue-resource ，this.$http有几种方式方向，例如get/post/jsonp等

<script>
    window.onload=function(){
        new Vue({
            el:'body',
            data:{
            },
            methods:{
                get:function(){
                    this.$http.get('get.php',{
                        a:1,
                        b:2
                    }).then(function(res){
                        alert(res.data);
                    },function(res){
                        alert(res.status);
                    });
                },
                post:function(){
                    this.$http.post('post.php',{
                        a:1,
                        b:20
                    },{
                        emulateJSON:true   //post需要设置请求头
                    }).then(function(res){
                        alert(res.data);
                    },function(res){
                        alert(res.status);
                    });
                },
                getJSONP1:function(){
                    this.$http.jsonp('https://sug.so.360.cn/suggest',{
                        word:'a'
                    }).then(function(res){
                        alert(res.data.s);
                    },function(res){
                        alert(res.status);
                    });
                },
                getJSONP2: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);
                    });
                },
                getPageData:function(n){
                    this.$http({
                        url:URL,
                        data:{
                            act:'get',
                            page:n
                        }
                    }).then(function(res){
                        console.log(res.data);
                    });
                }
            }
        });
    };
</script>

Vue1.0学习小结1

目录

1. 什么是Vue?

2. 常用指令

3. 事件

4. 属性

5. class和style

6. 过滤器

7. 数据交互

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读