vue基础学习（二）

02-01  vue事件深入-传参、冒泡、默认事件

<div id="box">
            <div @click="show2()">
                <input type="button" value="按钮" @contextmenu.prevent="show($event)">
            </div>
        </div>
        <script>
            window.onload= function(){
                //事件:@contextmenu右键点击触发、@click左键点击触发

                //事件简写:v-on:click等价于@click
                //事件传参:fn($event,XX) //$event表示触发的事件对象
                //阻止事件冒泡：@click.stop="fn()"        //等价于js方法ev.cancelBubble=true;
                //默认事件：@contextmenu.prevent="fn()"  //等价于js方法：ev.preventDefault();

                new Vue({
                    el:"#box",//选择器
                    data:{
                        'msg':'welcome vue'
                    },
                    methods:{
                        show:function(ev){
                            //alert(ev.clientX);
                            alert(1);
                            //ev.cancelBubble=true;//js方法：阻止冒泡；vue中的简写@click.stop="show($event)"
                            //ev.preventDefault();//js方法：阻止默认事件；vue中简写@contextmenu.prevent="fn()"
                        },
                        show2:function(){
                            alert(2);
                        }
                    }
                });
            }
        </script>

02-02　vue事件深入-键盘事件及按键编码事件

<div id="box">
            <input type="text" @keyup.enter="show($event)">

        </div>
        <script>
            //事件：@keydown="fn()"、@keydown="fn()"

            //按键编码：@keyup.13="fn()"或 @keyup.enter/up/right/bottom/left等  ; 等价于js中：ev.keyCode

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{

                    },
                    methods:{
                        show:function(ev){
                            //alert(ev.keyCode);//获取按键的编码
                            //if(ev.keyCode==13){//应用-识别按键回车;等价于@keyup.13="show()"
                                    alert("您按了回车键")
                            //}
                        }
                    }
                });
            }
        </script>

02-03  vue中操作基础属性与特殊属性class

<style>
            .color_red{color:red;}
            .bg_blue{background-color:blue;}
            .font12{font-size:12px;}
        </style>
        <div id="box">
            <img :src="url" :width="w" :title="altText" alt="this is a pic"><br>
            <strong :class="[red,b]" class="font12">彩色文字(数据变量控制)</strong><br><br>
            <strong :class="{color_red:boole_t,bg_blue:true}">彩色文字（类控制）</strong><br><br>
            <strong :class="json">彩色文字（json数据控制）</strong>
        </div>
        <script>
            //属性操作：
                //结构：v-bind:属性=“属性值变量”;v-bind可以省略，如：    :src="url" ；width="w"
            //特殊属性：class和style
                //:class="[red,b]       red是数据
                //:class="{color_red:boole_t,bg_blue:true}"        color_red是类,boole_t可以是布尔值或数据
                //:class="json"        json是以个json数据

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{
                        'url':'https://b-ssl.duitang.com/uploads/blog/201406/30/20140630102145_xSBWt.jpeg',
                        'w':'200px',
                        "altText":'这是一个图片',
                        'red':'color_red',//值表示的是类
                        'b':"bg_blue",//值表示的是类
                        'boole_t':'true',//布尔值变量
                        'boole_f':'false',
                        'json':{color_red:true,bg_blue:true},
                    },
                    methods:{

                    }
                });
            }
        </script>

02-04  vue中操作特殊属性style

<div id="box">
            <strong :style="[c,b]">彩色文字(数据变量控制)</strong><br><br>
            <strong :style="{color:varColor,backgroundColor:'blue'}">彩色文字(样式配合数据)</strong><br><br>
            <strong :style="json">彩色文字(json数据)</strong><br><br>
        </div>
        <script>
            //特殊属性：class和style
                //:style="[c,b]"      c和b是数据
                //:style="{color:varColor,backgroundColor:'blue'}"        color是样式名,varColor可以是变量或值
                //:style="json"        json是以个json数据
            //注意:复合样式一定要采用驼峰命名法   如:backgroundColor

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{
                        'varColor':'red',
                        'c':{color:'red'},
                        'b':{backgroundColor:'blue'},
                        'json':{color:'red',backgroundColor:'blue'}
                    },
                    methods:{

                    }
                });
            }
        </script>

02-05 vue的模板{{msg}}、{{*msg}}、{{{msg}}} 的区别

<div id="box">
            <input type="text" v-model="msg" /><br>
            直接表示变量：{{msg}}    ==&nbsp;&nbsp;  <span v-text="msg"></span><br>
            只能控制一次：{{*msg}}<br>
            直接表示变量，可以识别代码:{{{msg}}}    ==&nbsp;&nbsp;  <span v-html="msg"></span>
        </div>
        <script>
            //特殊属性:
            //{{msg}}     直接表示变量，不会识别代码   等价于属性：v-text = "msg"
            //{{*msg}}      只能控制一次，后来的不会同步
            //{{{msg}}}     会识别代码       等价于属性：v-html = "msg"
            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{
                        'msg':'abc<strong>标签内</strong>',
                    },
                    methods:{

                    }
                });
            }
        </script>

02-06  vue的过滤器，如：uppercase、lowercase、capitalize、curreoy

<div id="box">
            小写转大写：{{msg|uppercase}}    <br><br>
            小写转大写:{{'welcome'|uppercase}}        <br><br>
            大写转小写：{{'WELCOME'|lowercase}}        <br><br>
            大写转小写再首字母大写：{{'WELCOME'|lowercase | capitalize}}        <br><br>
            美元：{{12 | currency}}        <br><br>
            元：{{12 | currency '￥'}}        <br><br>
        </div>
        <script>
            //过滤器：过滤模板的数据
                    //语法：{{msg | filterA | filterB }}
            //        uppercase    转大写            eg:    {{msg|uppercase}}
            //        lowercase 转小写        eg:    {{'WELCOME'|lowercase}}
            //        capitalize 首字母转大写        eg:    {{msg|capitalize}}
            //        currecy            钱            eg:        美元：{{12 | currency}}        元：{{12 | currency '￥'}}    

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{
                        'msg':'abc',
                        a:'english',
                    },
                    methods:{

                    }
                });
            }
        </script>

02-07　　vue的交互GET获取一个普通文本数据及给服务器发送数据

　　　　<script>
            //交互：$http
            //    get:
//                    获取一个普通文本数据
//                    this.$http.get('data/aa.txt').then(function(res){
//                                alert(res.data);
//                            },function(res){
//                                alert(res.status);
//                            })
//
//                    给服务发送数据
//                        get: function () {
                        //    this.$http.get('data/get.php', {
                        //        a: 1,
                        //        b: 2
                        //    }).then(function (res) {
                        //        //成功后执行
                        //        alert(res.data);
                        //    }, function (res) {
                        //        //失败时执行
                        //        alert(res.status);
                        //    });
                        //}

            window.onload = function () {
                new Vue({
                    el: 'body',
                    data: {

                    },
                    methods: {
                        get: function () {
                            this.$http.get('data/get.php', {
                                a: 1,
                                b: 2
                            }).then(function (res) {
                                //成功后执行
                                alert(res.data);
                            }, function (res) {
                                //失败时执行
                                alert(res.status);
                            });
                        }
                    }
                });
            };
        </script>

02-08　　vue的交互POST向服务器发送数据并返回

<script>
            //交互：$http
            //    post
//                    给服务发送数据
//                this.$http.post('data/post.php',{
//                                a:1,
//                                b:2
//                            },{
//                                emulateJSON:true
//                            }).then(function(res){
//                                alert(res.data);
//                        },function(res){
//                            alert(res.status);
//                        })

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{

                    },
                    methods: {
                        //  post 给服务器发送数据
                        get:function(){
                            this.$http.post('data/post.php',{
                                    a:1,
                                    b:20
                                },{
                                    emulateJSON:true//不能少，post必须有这个标志，模拟json数据
                                }).then(function(res){
                                    alert(res.data);
                            },function(res){
                                alert(res.status);
                            })
                        }
                    }
                });
            }
        </script>

02-09　　vue中交互jsonp的跨域请求

　　<h1>vue交互必须引入vue-resouce</h1>
        <div id="box">
            <button type="button" @click="get()">按钮</button>
        </div>
        <script>
            //交互：$http
            //    jsonp 跨域请求
            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{

                    },
                    methods: {
                        //  jsonp 跨域请求
                        get:function(){
                            this.$http.jsonp('https://sug.so.360.cn/suggest', {
                                    word : 'a'
                                }).then(function(res){
                                    alert(res.data.s);
                            },function(res){
                                alert(res.status);
                            })
                        }
                    }
                });
            }

　　//    jsonp 跨域请求 ，有时需要声明修改callback的名称
            //window.onload= function(){
            //    new Vue({
            //        el:"#box",//选择器
            //        data:{

            //        },
            //        methods: {
            //            //  jsonp 跨域请求
            //            get:function(){
            //                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
            //                    wd : 'b'
            //                }, {
            //                    jsonp: 'cb' //callback的名字，默认名字就是callback
            //                }).then(function (res) {
            //                        alert(res.data.s);
            //                },function(res){
            //                    alert(res.status);
            //                })
            //            }
            //        }
            //    });
            //}
　　　　　　　　
        </script>

02-12　　vue交互实例：百度搜索下拉

<style>
            .gray{background-color:gray;}
        </style>
        <h1>百度搜索下拉案例</h1>
        <div id="box">
            <input v-model="t1" @keyup="get($event)" @keydown.down.prevent="changeDown()" @keydown.up.prevent="changeUp()" type="text" style="width:600px;height:35px;line-height:45px;font-size:16px;"/>
            <ul>
                <li v-for="value in myData" :class="{gray:$index==now}">
                    {{value}}
                </li>
            </ul>
            <p v-show="myData.length==0">暂无数据</p>
        </div>
        <script>
            //交互：$http
            //    jsonp 跨域请求

            window.onload= function(){
                new Vue({
                    el:"#box",//选择器
                    data:{
                        myData: [],
                        t1: '',
                        now :'-1'
                    },
                    methods: {
                        //  jsonp 跨域请求
                        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 () {
                                alert('error')
                            })
                        },
                        changeDown: function () {   //按下键向下选择
                            this.now++;
                            if (this.now == this.myData.length) { this.now = -1 };
                            this.t1 = this.myData[this.now];        //输入框数据同步
                        },
                        changeUp() {                //按上键向上选择
                            this.now--;
                            if (this.now == -1) { this.now = this.myData.length };
                            this.t1 = this.myData[this.now];
                        }

                    }
                });
            }
        </script>