Vue的学习记录，心得体会-1

最新推荐文章于 2024-03-08 10:38:06 发布

原创最新推荐文章于 2024-03-08 10:38:06 发布 · 2.8k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue的基础知识，包括Vue的定义、为何学习Vue、框架与库的区别、MVVM模式，以及Vue的指令、事件处理、过滤器、生命周期等核心特性。通过实例演示，帮助读者理解Vue在实际开发中的应用。

部署运行你感兴趣的模型镜像

Vue是什么？

vue是如今最火的前端框架，是一套构建用户界面的框架，让程序员减少对dom的操作，更多的精力用来关注业务逻辑上，

在mvc中，主要是负责v，view(视图)这一层。

为什么要学习vue呢？

vue可以极大的提高我们的开发效率，让我们不再关注dom，而是去关注与业务逻辑，帮我们在工作中提升竞争力。

vue是一个框架，jquery是一个库，框架和库的区别是什么？

框架：有一套完整的解决方法，对于项目的入侵很大，如果想在开发中途更换框架的话，项目需要重新写。

库：提供一个小的功能板块，对项目入侵小，在开发途中，更换库的代价比较小。

MVC与MVVM的区别

MVC是站在整个程序的角度上，m module模块，进行数据的crud，v view 视图，负责页面的展示 c controller 控制器用于业务逻辑的处理。

而mvvm只是站在了前端的角度上，m module 数据， v view 视图 vm viewModule 是一个调度者，分割了m v

Vue代码与MVVM关系的对应

首先，让我们来看看vue的基本代码结构吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--在两个大括号中{{}}直接写入data对象中定义好的变量，可以将数据渲染输出-->
    <!--对应mvvm中的v-->
    <p>{{info}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    //new出来的wm对应mvvm中的vm，是页面的调度者。
    let vm = new Vue({
        //使用元素选择器选择想要控制的区域。
        el:"#app",
        //用来定义el中需要用到的数据
        //对那个mvvm中的m
        data:{
            //通过模板字符串，可以把数据渲染到页面中，而不需要去操作dom。
            info:"你好，欢迎学习vue"

        },
        //用来定义el中需要用到的方法
        methods:{

        }
    })
</script>
</body>
</html>

m对应data中定义的变量，

v对应html代码，可通过模板字符串或者vue指令渲染数据

vm对应new Vue()这个对象，是整个mvvm的调度者

vue指令v-cloak v-text v-html

如果我们想将data中的对象渲染到页面中，可以使用{{}}差值表达式的方法，但是差值表达式有一个缺陷，就是在第一次加载时，vue文件还没加载的时候，会直接显示{{}}大括号和变量名，而不是要显示的数据，这时，我们只要在html的标签属性中添加一个vue指令，v-cloak即可解决差值表达式闪烁的问题。

<p v-cloak>{{msg}}</p>

v-text 将这个vue指令写入html标签属性中，并且赋值相应的data中的变量，也可以实现数据在页面中的渲染。

<p v-text="msg"></p>

v-html 这个命令可以将data属性中的html代码解析，如<h1>你好vue</h1>,如果用v-html解析将会是

你好vue

如果用v-text会解析为 <h1>你好vue</h1>

    <p v-html="vueHtml"></p>

差值表达式与v-text的功能很是相似，那么他们有什么区别吗？

v-text不会出现闪烁问题，并且会把标签中的内容覆盖，而{{}}不会出现闪烁问题，而且只会替换本身的占位符。

vue指令 v-bind

在平常使用html代码时，我们会给元素添加title之类的属性，我们也想让title使用data中的变量，该怎么去做呢？

这时，我们就要使用v-bind指令了，v-bind是vue中用于绑定属性的指令，只要在需要使用变量的属性之前，加入 v-bind: 就可以使用data中的变量了。

<button v-bind:title="title">按钮</button>

注意：v-bind : 是可以简写为 :要绑定的属性即可，而且v-bind可以写合法的js表达式。

vue指令 v-on

如果我们想点击一个按钮并触发一些事件的话，就需要使用v-on命令了。

v-on:事件="定义的方法名";

定义方法，需要在vue配置对象中的methods属性中进行方法的配置。

<div id="app"><!--属性v-on:click = "click"代表点击按钮可触发相应的事件，事件自行替换，入mousermove等js中常用的事件-->
    <button v-on:click="click">按钮2</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{

        },//在该对象中进行方法的定义
        methods:{//在v-on:click = ""中，直接在双引号里写入方法名，就可以在点击按钮是进行方法调用。
            click:function(){
                alert("我是v-on绑定的事件");
            },
            
        }
    })
</script>

v-on:的简写方法是@

接下来我们使用学到的vue基础制作一个跑马灯的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<div id="app">
    <!--这是定义的两个方法与一个字符串-->
    <button v-on:click="starts">浪起来</button>
    <button @click="stop">停</button>
    <div >
        {{msg}}
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            //我们定义的字符串
            msg:"猥琐发育，别浪",
            //这是定时器返回的对象，到时候通过这个对象进行暂停。
            dingshi:null
        },
        methods:{
            //这是开始方法，通过v-on:click = "starts"进行调用
            starts(){
                //为了不重复开启定时器，我们需要在最开始的时候进行定时器的关闭
                clearInterval(this.dingshi);
                //如果我们想在methods中的方法调用data中的属性，必须通过this.属性名
                //的方式进行调用，因为定时器内的this与外部this不同，所以我们需要在外
                //部进行this的传递。
                //还有一个办法，就是可以通过es6的箭头函数代替function函数。达到内外this一致
                let _this = this;
                this.dingshi = setInterval(function () {
                    //将字符串的第一位取出，然后方法最后一位，并且重新赋值给该字符串
                    //使用定时器重复执行，就可以达到跑马灯的效果。
                    let head = _this.msg.substring(0,1);
                    let body = _this.msg.substring(1);
                    _this.msg = body+head;
                    console.log(_this.msg);
                },300);
            },
            //暂停函数
            stop(){
                clearInterval(this.dingshi);
            }
        }
    })

</script>
</body>
</html>

注意：在methods中需要调用data中的属性，需要以this.属性的方式进行调用。

vue中的事件修饰符

事件修饰符是指对要发生的事件进行处理和修饰。有如下这么几个

.stop阻止冒泡

.prevent阻止默认行为

.capture进行事件的捕获

.self事件只有发生在元素本身时才触发回调

.once事件只触发一次

<body>
<div id="app">

    <!--给按钮添加事件修饰符.stop 点击按钮不再进行冒泡-->
    <!--<div v-on:click="divClick">
        <button v-on:click.stop="buttonClick">按钮</button>
    </div>-->

    <!--.prevent事件修饰符 链接的默认跳转行为将会被取消-->
    <!--<div v-on:click="divClick">
        <a href="" v-on:click.prevent>有问题先去问百度</a>
    </div>-->

    <!--.capture进行事件的捕获 事件触发时添加捕获的元素将第一时间执行回调-->
    <!--<div v-on:click.capture="divClick">
        <button v-on:click="buttonClick">按钮</button>
    </div>-->

    <!--.self只有事件发生在自身自会进行回调，不会被冒泡-->
    <!--<div @click="waiClick" class="wai">
        <div v-on:click.self="divClick">
            <button v-on:click="buttonClick">按钮</button>
        </div>
    </div>-->

    <!--.once事件只会触发一次-->
    <div v-on:click="divClick">
        <button v-on:click.once="buttonClick">按钮</button>
    </div>



</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"消息"
        },
        methods:{
            divClick(){
                console.log("我是div")
            },
            buttonClick(){
                console.log("我是button");
            },
            waiClick(){
                console.log("我是最外层的");
            }
        }
    })
</script>
</body>

Vue指令v-model实现双向数据绑定

v-model可以实现与表单元素的双向数据绑定，即表单元素的数据该表，vue中相应的数据也会发生改变

<body>
<div id="app">
    <h1 v-text="msg"></h1>
    <input type="text" v-model:value="msg">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我是v-module可以实现双向数据绑定"
        },
        methods:{

        }
    })
</script>
</body>

通过数据绑定给class设置样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .big{
            font-size: 50px;
        }
        .cu{
            font-weight: bold;
        }
        .xie{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--第一种方法v-bind绑定后，用数组传入类名，需要加引号,如果样式需要判断，则用
        对象包裹，key为类名，value为data中属性名
        -->
        <p :class="['big',{'cu':flag}]">我是代码</p>
        <!--直接传入对象，json形式，key类名，value为布尔值-->
        <p :class="{big:flag,cu:true}">我也是代码</p>
        
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false

        },
        methods:{

        }
    })
</script>

通过数据绑定，给元素设置内联样式

<body>
<div id="app">
    <!--数据绑定之后可以直接写一个json对象，内部使用css语法-->
    <p :style="{'background-color':'red'}">
        我是p
    </p>
    <!--可以传入一个data中的对象-->
    <p :style="pstyle">
        哦，我也是p
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            pstyle:{
                'font-size':'50px'
            }

        },
        methods:{

        }
    })
</script>
</body>

v-for的四种使用方法

我们经常要写一些重复性的工作，比如ul中相似的li，这时就可以用到v-for了。

v-for可以遍历数组，数组对象，对象，单独规定的次数

语法 v-for="item in 对象" v-for="item in 数组" v-for="item in 数组对象" v-for="item in 数字"

<body>
<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in arrobj">{{item.a}} 下标{{index}}</li>
    </ul>
    <ul>
        <li v-for="item in obj">{{item}}</li>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr:["111",2,"你好"],
            arrobj:[{a:1},{a:2},{a:3}],
            obj:{
                a:1,
                b:2,
                c:3
            }

        },
        methods:{

        }
    })
</script>
</body>

v-if与v-show

如果属性是true就显示该元素，如果为false,v-if就直接产出该html代码，v-show则会加上display:none的样式

<body>
<div id="app">
    <div v-if="flag">我是v-if</div>
    <div v-show="flag">我是v-show</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false

        },
        methods:{

        }
    })
</script>
</body>

Vue全局过滤器

vue过滤器可以让我们在使用差值表达式与v-bind时，对将要渲染的数据进行处理。

语法 v: {{数据|定义的过滤器方法}}

m:Vue.filter("过滤器名称",function(固定为要处理的数据,[可选，参数将作为回掉函数的第二个参数]){})

<body>
<div id="app">
    <div>{{time | dateProcess}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    /*定义过滤器方法，必须先于vue对象定义*/
    /*第一个参数为函数名，第二个是一个回调函数，用来进行处理数据，回掉函数的第一个参数
    * 固定为要渲染前要处理的数据，如本案例中的time
    * */
    Vue.filter("dateProcess",function (data) {
        let time = new Date(data);
        let y = time.getUTCFullYear();
        let m = time.getMonth()+1;
        let d = time.getDate();

        let newTime = `${y}-${m}-${d}`;
        console.log(newTime);
        return newTime;
    })

    var vm = new Vue({
        el:"#app",
        data:{
            time:new Date()
        },
        methods:{}

    })


</script>
</body>

Vue私有过滤器

在之前我们定义的过滤器，是全局的过滤器，即每个vue对象控制的html模块，都可以使用该过滤器。

接下来我们定义一些私有的过滤器，即只有该vue对象控制的html代码，才可以使用该过滤器。

语法

需要在new Vue的时候，新建一个对象，名为filters，在其中写入相应的过滤器方法。

<body>
<div id="app">

    <p>{{time | dateProcess}}</p>

</div>
<div id="app2">
    <p>不可用app中的私有过滤器方法</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            time:new Date()
        },
        methods:{},
        filters:{
            dateProcess(data){
                let time = new Date(data);
                let y = time.getUTCFullYear();
                let m = time.getMonth()+1;
                let d = time.getDate();

                let newTime = `${y}-${m}-${d}`;
                console.log(newTime);
                return newTime;
            }
        }
    })
    var vm = new Vue({
        el:"#app2",
        data:{

        },
        methods:{},

    })
</script>
</body>

ES6新增字符串处理方法，主要用于补足位数如时间 2:3 改为 02:03

String.prototype.padStart(maxleng,filestring);

我们在进行时间日期的输出的时候经常会遇到时间位数的问题，比如现在是两点三分，一般会输出为2:3，一旦时间小时或者分钟变为个位数，字符长度也会发生变化，甚至会导致布局混乱，现在，es6给我们提供了一个方法，padStrat();

通过字符串调用，传入两个参数，1.最大的位数，2.不足的位数用什么补全。

<body>

<div id="app">
    <p>{{time | dateProcess}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            time:new Date()
        },
        methods:{},
        filters:{
            dateProcess(data){
                let time = new Date(data);
                let y = time.getUTCFullYear();
                let m = (time.getMonth()+1).toString().padStart(2,"0");
                let d = time.getDate().toString().padStart(2,"0");
                let h = time.getHours().toString().padStart(2,"0");
                let mm = time.getMinutes().toString().padStart(2,"0");
                let s = time.getSeconds().toString().padStart(2,"0");
                
                let newTime = `${y}-${m}-${d} ${h}:${mm}:${s}`;
                return newTime;
            }
        }
    })
</script>
</body>

在这个更改时间格式的案例中，我们使用了padStrat方法，让时间固定为两位数，不足的位数使用0补全。

Vue自定义按键修饰符

可以使用 @keyup.键盘键位 = "事件" 来进行键盘事件的触发。

<!--keyup为键盘抬起事件，F2在全局中定义了，键盘码指向了133
        也就是f2键，最后绑定了事件add
        -->
        <input type="text" v-model="name" @keyup.F2="add">

默认可以使用的键盘件为不多，我们可以自定义增加一些键盘键位指令。

//这是在全局定义了f2的键盘按键，f2的键盘码为113
    Vue.config.keyCodes.F2=113;

Vue自定义指令

我们在平时写网页时，一般有这样的需求，刚刚打开的页面，规定的文本框就已经获取了焦点。

我们使用原生的js操纵，确实可以做到，选中dom元素，然后使用原生focus方法就可以，但是在我们使用Vue时，是不推荐操作dom的，这时，我们就可以自定义一个指令，只要给文本框加入这个指令，就可以在打开页面时获取焦点。

我们先来定义一个全局的自定义指令吧。

<body>
<div id="app">
    <!--使用v- 前缀加自定义的指令调用-->
    <input type="text" v-focus>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    //通过Vue.directive方法定义一个自定义指令
    //第一个参数是定义的指令名称，调用指令时需要加 v- 前缀
    //第二个参数是一个对象，内部通过不同的方法，在不同的时候调用不同的方法
    Vue.directive("focus",{
        //在第一次绑定到元素时调用，回掉函数的参数是绑定的原生dom
        bind:function (el) {

        },
        //在元素插入到父元素时调用
        inserted:function (el) {
            el.focus();
        },
        //在元素发生变化时调用
        update:function (el) {

        }
    })
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{}
    })
</script>
</body>

我们在使用vue自带的指令时，都是可以进行赋值的，那我们自定义的可以吗？

当然可以了，自定义指令传入的参数，可以通过回调函数的第二个参数获取。

<div id="app">
    <p v-colro="'yellow'">你好</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{},
        /*这是定义私有指令的方法，在directives中定义一个指令对象*/
        directives:{
            colro:{
                //钩子函数的第二个参数是一个对象，它有如下几个属性
                /*
                * name 指令名
                * value 指令的绑定值，（计算后）
                * expression 指令的绑定值 （计算前）
                * 常用的属性就这三个，更多的指令可以去官方文档查看。
                * */
                bind:function (el,binding) {
                    //el为绑定的元素，调用操作dom的原生方法，更改元素的颜色
                    //binging.value是绑定值
                    el.style.color = binding.value;
                }
                
            }
        }
    })
</script>
</body>

自定义指令还可以简写，在new Vue时，在第一个形参对象中添加对象，directives:{ 指令名:{ bind:function(){} } }

自定义指令简写

自定义指令的之后，我们总要创建一个对象，在对象中写入不同状态调用的不同方法，而日常中，我们要使用的也就是bind与inserted，所以，vue给我们提供了简写的方式。

<div id="app">
    <p v-fontsize="'50px'">你好</p>
    <p>{{msg}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"nihao"
        },
        directives:{
            fontsize:function (el,binding) {
                el.style.fontSize=parseInt(binding.value)+"px";
            }
        }
    })
</script>
</body>

Vue实例的生命周期

vue的生命周期在创建时分为四部分，分别是beforeCreate,created,beforeMount,Mounted，这四个部分即是状态，也是方法，当vue到了相应的状态，就会自动执行相应的方法。

我们来分别讲解一下这些状态，

首先是beforeCreate

在这个函数可以调用的时候，vue刚刚创建了一个初始的实例对象，以及一些默认的生命周期函数与默认的事件，其他的东西一律没有创建，意思是，在beforeCreate函数执行的时候，data中的数据与methods中的方法还不可以进行调用。

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我在beforeCreate函数执行时是不可以调用的"
        },
        methods:{
            show(){
                console.log("我要展示自己");
            }
        },
        beforeCreate(){
            //这是我们遇到的第一个生命周期函数，在实例完全创建出来之前会执行这个函数。
            console.log(this.msg);//undefined
            this.show();//报错，this.show不是一个函数
            //因为报错，所以我们可以得出结论，在这个函数执行时，data中数据methods中函数
            //都还没有进行初始化。
        }
    })
</script>

第二个状态是created

在created函数执行时，data中的数据与methods中的方法已经初始化好了，如果我们想最早的调用这些数据与方法，只能在created这个方法中。

第三个状态是beforeMount

在执行完created函数之后，vue的创建流程会进入判断，有没有el，有没有template,如果有el的话，就把el绑定的html内容，放进vue的虚拟dom中去，在这时，beforMount函数执行。

在这时vue开始编辑模板，vue中的指令开始执行，在内存中生成一个完整的模板字符串，但是只是在内存中，页面中还没有进行渲染，所以，我们这是获取页面中元素的内容，还只是之前写的模板字符串。

<body>
<div id="app">
    <p id="muban">{{msg}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我在beforeCreate函数执行时是不可以调用的"
        },
        methods:{
            show(){
                console.log("我要展示自己");
            }
        },
        
        beforeMount(){
            /*在这时，内存中已经有了完整的模板字符串，但是还没有在页面中进行渲染
            * 如果这是查看元素的内容，还只是模板字符串而已。
            * */
            console.log(document.getElementById("muban").innerHTML);
            /*输出为: {{msg}}
            * */

        }
    })
</script>
</body>

最后一个实例创建期间的生命周期函数mounted

在这个函数执行时，页面已经渲染好了。

<body>
<div id="app">
    <p id="muban">{{msg}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我在beforeCreate函数执行时是不可以调用的"
        },
        methods:{
            show(){
                console.log("我要展示自己");
            }
        },
       
        mounted(){
            /*这是第四个生命周期函数
            在该函数执行时，内存中的模板字符串已经进入到页面中，用户已经可以看到渲染好的
            页面了
            * */
            console.log(document.getElementById("mubna").innerHTML);
            /*这是实例创建期间的最后一个生命周期函数，如果没有其他操作，这个实例就躺在我们
            的内存中一动不动了。
            * */
        }
    })
</script>
</body>

当最后一个创建阶段的生命周期函数执行完毕，vue就已经进入到了运行阶段。

Vue运行阶段的生命周期函数

运行阶段的生命周期函数有两个 beforeUpdate与updated，这两个函数会根据data中数据的改变，执行0到多次。

beforeUpdate:

只要data中的数据发生改变，就会先执行beforeUpdate,当该函数执行时，内存中的数据已经改变，是最新的数据，而页面中的数据还是旧的。

<body>
<div id="app">
    <input type="button" value="点我改变数据" @click="gengxin">
    <p id="p">{{msg}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我是一个数据"
        },
        methods:{
            gengxin(){
                this.msg="我改变啦";
            }
        },
        beforeUpdate(){
            console.log(document.getElementById("p").innerHTML+"  页面");
            //我是一个数据  页面
            console.log(this.msg+"  内存");
            //我改变啦  内存
            /*从输出内容中我们可以发现，只要内容发生改变，函数就会别调用，而且在该函数
            执行时内存中的数据是新的，页面数据是旧的。
            * */
        }
    })
</script>
</body>

接下来就该执行updated生命周期函数了

当函数执行时，页面已经更新完毕，数据与内存中保持了一致。

<body>
<div id="app">
    <input type="button" value="点我改变数据" @click="gengxin">
    <p id="p">{{msg}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我是一个数据"
        },
        methods:{
            gengxin(){
                this.msg="我改变啦";
            }
        },
        
        updated(){
            console.log(document.getElementById("p").innerHTML+"  页面");
            //我改变啦  页面
            console.log(this.msg+"  内存");
            //我改变啦  内存
            //数据保持了一致
        }
    })
</script>
</body>

Vue销毁生命周期函数

也是分为两个函数beforeDestory与destoryed,

当beforeDestory执行时，vue实例就已经进入了销毁阶段，但data数据，methods中的函数还没有正式被销毁。

当destoryed函数真正执行时，vue中data数据，methods函数已经全部结束。

vue-resource发送get post jsonp请求

当我们用习惯了jQuery之后，总是喜欢用jqery发ajax请求，而我们现在用的是vue，那么怎么用vue发送ajax请求呢。

我们可以用vue的第三方包 vue-resource进行发送。

vue-resource是依赖与vue的，所以，我们需要先引入vue，再引入vue-resource;

导入之后，使用就会自动多出一个$http，使用this.$http就可以调用get,post,jsonp请求了，

语法为 this.$http.get("请求地址").then(function(){"这是成功的回掉函数"},function(){"这是失败的回调函数"});

我们自己使用node搭建一个服务器。

let express = require("express");
let app = express();

app.get("/get",function (req,res) {
    //为了可以进行ajax跨域调用，需要加上这一句
    res.header("Access-Control-Allow-Origin","*");
    res.json({
        name:"get"
    });
})
app.post("/post",function (req,res) {
    //为了可以进行ajax跨域调用，需要加上这一句
    res.header("Access-Control-Allow-Origin","*");
    res.json({
        name:"post"
    })
})
//如果访问路由地址为jsonp的，就执行这个函数
app.all("/jsonp",function (req,res) {
    //创建要传递的数据
    let obj = {
        naem:"jsonp",
        time:new Date()
    }
    //将url地址传来的方法名称加()调用，在括号中传入要传递的数据

    let js = `${req.query.callback[0]}(${JSON.stringify(obj)})`;
    //最后，通过end方法输出，这样，在请求放，就会调用相应的方法，参数中的数据也就传递了过去。
    res.end(js);
})
app.listen(8888);

接下来的代码中，展示了get，post，jsonp的三种请求方式

<body>
<div id="app">
    <input type="button" value="get" @click="getInfo">
    <input type="button" value="post" @click="postInfo">
    <input type="button" value="jsonp" @click="jsonpInfo">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    //这是用来执行与传递数据的方法。
    show=(data)=>{
        console.log(data);
    }
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            getInfo(){
                //这样就可以发送ajax请求了，写入url地址，.then调用成功回调函数，
                //输出data数据，data中的body属性就是请求到的数据
                this.$http.get("http://127.0.0.1:8888/get")
                    .then((data)=>{
                        console.log(data);
                    },(err)=>{
                        console.log(err);
                    })
            },
            postInfo(){
                //post方法有三个参数，分别是请求的地址，要发送的数据，配置选项。
                //这第三个参数中，配置选项中的emulateJSON:true是为了
                //如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
                //启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。
                this.$http.post("http://127.0.0.1:8888/post",{},{emulateJSON:true})
                    .then(data=>{
                        console.log(data);
                    },err=>{
                        console.log(err);
                    })
            },
            //使用jsonp的方式，可以做到跨域请求。
            jsonpInfo(){
                //请求的地址放入，并且把定义好的方法传出，请求回来的时候，就会执行该方法，并且
                //数据将会作为参数返回。
                this.$http.jsonp("http://127.0.0.1:8888/jsonp?callback=show")
                    .then(function () {

                    },function () {
                        
                    })

            }
        },

    })


</script>

</body>

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率