11.vue 数据交互

最新推荐文章于 2022-08-31 23:20:53 发布
最新推荐文章于 2022-08-31 23:20:53 发布
阅读量230 收藏 3
点赞数
分类专栏： nodeJs 文章标签： vue vue 数据交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22225239/article/details/89484592
版权

11.vue 数据交互

vue

new Vue({
    el,选择器  string/obj  不能选择html/body
    data,
    methods,
    template  string/obj
    //生命周期 —— 虚拟DOM
    1、初始化
    beforeCreate
    created
    2、渲染
    beforeMount
    mounted
    3、更新
    beforeUpdate
    updated
    4、销毁
    beforeDestroy
    destroyed
});

指令：v-model/text/html/bind/for/if/show

v-model 绑定数据 数据来源
v-text 纯文本 简写 {{v-model/data}}

bind 绑定属性
v-bind:属性名="'值'" 简写 :属性名="'值'"

v-bind="json/{...}"

v-on:事件="事件函数 --- methods"
@事件="事件函数"

v-for="v,k,i in/of arr/json"

v-show 样式
v-if dom节点

交互

==ajax   fetch   vue-resource   axios==

fetch使用方式

get:

fetch(url).then(res=>{
     return res.text()/res.json();
}).then(data=>{
        
}).catch(err=>{

});

fetch(url).then(res=>{

    if(res.ok){//true/false
        res.text()/res.json().then(data=>{
            
        });
    }
}).catch(err=>{

});


res.text()/res.json();返回的都是promise对象

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
window.onload = function(){
    
    let oBtn = document.getElementById("btn1");
    
    oBtn.onclick = function(){
         
        let url = "get.php?a=1&b=2";
        
        fetch(url).then(res=>{
            return res.text();  
        }).then(data=>{
            console.log("get:",data);   
        });
        
    };
};
</script>
</head>

<body>
<div id="app">
     <input id="btn1" type="button" value="按钮">
     
</div>
</body>
</html>

post:

fetch(url,{
    method:"post",
    headers:{
        "content-type":"application/x-www-form-urlencoded"
    },
    body:"name=value&name=value"/ new URLSearchParams()
})

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
window.onload = function(){
    
    let oBtn = document.getElementById("btn1");
    
    oBtn.onclick = function(){
         
        let url = "post.php";//?a=1&b=2
        
        fetch(url,{
            method:"post",  
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            body:"a=1&b=2"
        }).then(res=>{
            return res.text();  
        }).then(data=>{
            console.log("post:",data);  
        });
        
    };
};
</script>
</head>

<body>
<div id="app">
     <input id="btn1" type="button" value="按钮">
     
</div>
</body>
</html>

fech跨域

https://www.npmjs.com/package/fetch-jsonp

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
<script src="fetch-jsonp.js"></script>
<script>
window.onload = function(){
    
    let oBtn = document.getElementById("btn1");
    
    oBtn.onclick = function(){
        let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa";
         
      fetchJsonp(url,{
            jsonpCallback: 'cb',
            jsonpCallbackFunction: 'xxx'
      }).then(function(res) {
        return res.json()
      }).then(function(json) {
        console.log('parsed json', json)
      }).catch(function(err) {
        console.log('parsing failed', err)
      })
            
    };
};
</script>
</head>

<body>
<div id="app">
     <input id="btn1" type="button" value="按钮">
     
</div>
</body>
</html>

vue-resource/axios

get:

vm.$http.get(url,{params:{}}).then(res=>{
    
     res.body/bodyText/data

}).catch;

post:

vm.$http.post(url,{},{emulateJSON:true}).then(res=>{
    
     res.body/bodyText/data

}).catch;

jsonp:

vm.$http.jsonp(url,{params:{},jsonp:"cb"}).then(res=>{
    
     res.body/bodyText/data

}).catch;

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
                
        },
        methods:{
            get(){
                //get(url,{params:{xxx}}).then.catch;
                let url = "get.php"
                this.$http.get(url,{params:{a:1,b:1}}).then(res=>{
                    //res.body/bodyText/data
                    console.log(1,res.data);    
                }).catch(err=>{
                    console.log(2,err); 
                });
            },
            post(){
                let url = "post.php"
                this.$http.post(url,{a:1,b:1},{emulateJSON:true}).then(res=>{
                    //res.body/bodyText/data
                    console.log(1,res.data);    
                }).catch(err=>{
                    console.log(2,err); 
                }); 
            },
            jsonp(){
                
                let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
                this.$http.jsonp(url,{params:{wd:"aaa"},jsonp:"cb"}).then(res=>{
                    //res.body/bodyText/data
                    console.log(1,res.data.s);  
                }).catch(err=>{
                    console.log(2,err); 
                }); 
            }   
        }
    });
};
</script>
</head>

<body>
<div id="app">
    <input @click="get" type="button" value="get"/>
    <input @click="post" type="button" value="post"/>
    <input @click="jsonp" type="button" value="jsonp"/>
</div>
</body>
</html>

axios:

get:

axios.get(url,{params:{}}).then(res=>{
    
     res.data

}).catch;

post:

axios.post(url,{}/"name=value&name=value").then(res=>{
    
     res.data

}).catch;

exp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
window.onload = function(){
    let vm = new Vue({
        el:"#app",
        data:{
                
        },
        methods:{
            get(){
                //get(url,{params:{xxx}}).then.catch;
                let url = "get.php";
                axios.get(url,{params:{a:11,b:11}}).then(res=>{
                    console.log(1,res.data);
                }).catch(err=>{
                    console.log(2,err); 
                }); 
            },
            post(){
                //let url = "post.php";
                let url = "http://localhost:3000/"
                axios.post(url,{a:1,b:2}).then(res=>{
                //axios.post(url,"a=11&b=11").then(res=>{
                    console.log(1,res.data);
                }).catch(err=>{
                    console.log(2,err); 
                }); 
                 
            }
        }
    });
};
</script>
</head>

<body>
<div id="app">
    <input @click="get" type="button" value="get"/>
    <input @click="post" type="button" value="post"/>
</div>
</body>
</html>

跨域：

推荐用模块 cors

https://www.npmjs.com/package/cors

app.use(cors());

exp:
app.js:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors')

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(cors());
/*app.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    next(); 
});*/

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));

app.use(express.json());
app.use(express.urlencoded({ extended: false }));


app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.post('/', function(req, res, next) {
    console.log(req.body);
    let {a,b} = req.body;
    res.send({type:"post",res:a + b});
});

module.exports = router;

案例：

微博评论：

1、weibo_axios.html:

axios交互：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微博ajax接口测试</title>
<link href="style/weibo.css" rel="stylesheet" />
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
window.onload = function(){
    let url = "weibo.php";
    let vm = new Vue({
        el:".app",
        data:{
            iNow:1,
            msg:"abc",
            arr:[],
            pageCount:1,
        },
        methods:{
            formatTime(iS){
                let oDate = new Date(iS*1000);
                return [
                    oDate.getFullYear(),"年",
                    oDate.getMonth()+1,"月",
                    oDate.getDate(),"日",
                    " ",
                    oDate.getHours(),"时",
                    oDate.getMinutes(),"分",
                    oDate.getSeconds(),"秒"
                ].join("")
            },
            /*weibo.php?act=add&content=xxx 添加一条
                返回：{error:0, id: 新添加内容的ID, time: 添加时间}
            */
            addMsg(){
                axios.get(url,{params:{act:"add",content:this.msg}}).then(res=>{
                    console.log(res);   
                    this.getPageData(this.iNow);
                    this.getPageCount();
                });     
            },  
            
            /*weibo.php?act=get&page=1      获取一页数据
            返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]*/
            getPageData(page){
                this.iNow = page;
                axios.get(url,{params:{act:"get",page}}).then(res=>{
                    //console.log(res); 
                    this.arr = res.data;
                }); 
            },
            /*weibo.php?act=get_page_count  获取页数
                返回：{count:页数}*/
            getPageCount(){
                axios.get(url,{params:{act:"get_page_count"}}).then(res=>{
                    console.log(res.data.count);
                    this.pageCount = res.data.count;    
                }); 
            },
            /*weibo.php?act=del&id=12           删除一条数据
                返回：{error:0}*/
            del(id){
                axios.get(url,{params:{act:"del",id}}).then(res=>{
                    console.log(res.data);  
                    this.getPageData(this.iNow);
                    this.getPageCount();
                }); 
            },  
            /*weibo.php?act=acc&id=12           顶某一条数据
                返回：{error:0}*/
            acc(item){
                let id = item.id;
                axios.get(url,{params:{act:"acc",id}}).then(res=>{
                    console.log(res.data);
                    
                    if(res.data.error == 0){//顶成功了
                        item.acc++;
                        console.log(item.acc);
                    }
                    
                }); 
            },
            ref(item){} 
            
        }
    });
    
    vm.getPageData(vm.iNow);
    vm.getPageCount();
};
</script>
</head>

<body>
<div class="app">
<!--留言-->
     <div class="takeComment">
        <textarea v-model="msg" name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input @click="addMsg" id="btn_send" type="button" class="inputs" value="" />
        </div>
    </div>
<!--已留-->
    <div class="commentOn">
        <div class="noContent" v-show="arr.length==0">暂无留言</div>
        <div id="messList" class="messList">
            <div class="reply" v-for="item in arr">
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{formatTime(item.time)}}</span>
                    <span class="handle">
                        <a href="javascript:;" class="top" @click="acc(item)">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon" @click="ref(item.id)">{{item.ref}}</a>
                        <a href="javascript:;" class="cut" @click="del(item.id)">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <div id="page" class="page">
            <a @click="getPageData(item)" v-for="item in pageCount" href="javascript:;" :class="iNow==item?'active':''">{{item}}</a>
            <!--<a href="javascript:;" class="active">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>-->
        </div>
    </div>
</div>
</body>
</html>

2、weibo_fetch.html:

fetch交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博ajax接口测试</title>
    <link href="style/weibo.css" rel="stylesheet" />
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            let url = "weibo.php";
            let vm = new Vue({
                el:".app",
                data:{
                    iNow:1,
                    msg:"abc",
                    arr:[],
                    pageCount:1,
                },
                methods:{
                    formatTime(iS){
                        let oDate = new Date(iS*1000);
                        return [
                            oDate.getFullYear(),"年",
                            oDate.getMonth()+1,"月",
                            oDate.getDate(),"日",
                            " ",
                            oDate.getHours(),"时",
                            oDate.getMinutes(),"分",
                            oDate.getSeconds(),"秒"
                        ].join("")
                    },
                    /*weibo.php?act=add&content=xxx 添加一条
                        返回：{error:0, id: 新添加内容的ID, time: 添加时间}
                    */
                    addMsg(){
                        fetch(url+'?act=add&content='+this.msg).then(res=>{
                            console.log(1,res);
                            return res.json();
                            }).then(res=>{  
                            console.log(2,res);
                            this.getPageData(this.iNow);
                            this.getPageCount();
                        });     
                    },  
                    /*weibo.php?act=get&page=1      获取一页数据
                    返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]*/
                    getPageData(page){
                        this.iNow = page;
                        fetch(url+"?act=get&page="+page).then(res=>{
                            return res.json();
                            }).then(res=>{  
                            console.log(3,res); 
                            this.arr = res;
                        }); 
                    },
                    /*weibo.php?act=get_page_count  获取页数
                    返回：{count:页数}*/
                    getPageCount(){
                        fetch(url+"?act=get_page_count").then(res=>{
                            return res.json();
                            }).then(res=>{
                            console.log(4,res);
                            this.pageCount = res;   
                        }); 
                    },

                    /*weibo.php?act=del&id=12           删除一条数据
                    返回：{error:0}*/
                    del(id){
                        let that = this;
                        fetch(url+"?act=del&id="+id).then(res=>{
                            return res.json();
                            }).then(res=>{
                            console.log(res);   
                            that.getPageData(that.iNow);
                            that.getPageCount();
                        }); 
                    },  

                    /*weibo.php?act=acc&id=12           顶某一条数据
                    返回：{error:0}*/
                    acc(item){
                        let id = item.id;
                        fetch(url+"?act=acc&id="+id).then(res=>{
                            return res.json();
                            }).then(res=>{
                            console.log(res);
                            
                            if(res.error == 0){//顶成功了
                                item.acc++;
                                console.log(item.acc);
                            }
                            
                        }); 
                    },
                    /*weibo.php?act=ref&id=12           踩某一条数据
                    返回：{error:0}*/
                    ref(item){
                        let id = item.id;
                        fetch(url+"?act=ref&id="+id).then(res=>{
                            return res.json();
                            }).then(res=>{
                            console.log(res);
                            
                            if(res.error == 0){//踩成功了
                                item.ref++;
                                console.log(item.ref);
                            }
                            
                        });
                    }   
                }
            })
            vm.getPageData(vm.iNow);
            vm.getPageCount();
        }
    </script>
    
</head>
<body>
    <div class="app">
<!--留言-->
     <div class="takeComment">
        <textarea v-model="msg" name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input @click="addMsg" id="btn_send" type="button" class="inputs" value="" />
        </div>
    </div>
<!--已留-->
    <div class="commentOn">
        <div class="noContent" v-show="arr.length==0">暂无留言</div>
        <div id="messList" class="messList">
            <div class="reply" v-for="item in arr">
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{formatTime(item.time)}}</span>
                    <span class="handle">
                        <a href="javascript:;" class="top" @click="acc(item)">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon" @click="ref(item)">{{item.ref}}</a>
                        <a href="javascript:;" class="cut" @click="del(item.id)">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <div id="page" class="page">
            <a @click="getPageData(item)" v-for="item in pageCount" href="javascript:;" :class="iNow==item?'active':''">{{item}}</a>
            <!--<a href="javascript:;" class="active">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>-->
        </div>
    </div>
</div>
</body>
</html>

weibo.php

<?php
/*
**********************************************
    usage:
            weibo.php?act=add&content=xxx   添加一条
                返回：{error:0, id: 新添加内容的ID, time: 添加时间}
            
            weibo.php?act=get_page_count    获取页数
                返回：{count:页数}
            
            weibo.php?act=get&page=1        获取一页数据
                返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
            
            weibo.php?act=acc&id=12         顶某一条数据
                返回：{error:0}
            
            weibo.php?act=ref&id=12         踩某一条数据
                返回：{error:0}
                
            weibo.php?act=del&id=12         删除一条数据
                返回：{error:0}
    
    注意： 服务器所返回的时间戳都是秒（JS是毫秒）
**********************************************
*/

//创建数据库之类的
$db=@mysql_connect('localhost', 'root', '') or @mysql_connect('localhost', 'root', 'root');

mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE ajax');

mysql_select_db('ajax');

$sql= <<< END
CREATE TABLE  `ajax`.`weibo` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`content` TEXT NOT NULL ,
`time` INT NOT NULL ,
`acc` INT NOT NULL ,
`ref` INT NOT NULL
) CHARACTER SET utf8 COLLATE utf8_general_ci
END;

mysql_query($sql);

//正式开始

//header('Content-type:xmg/json');

$act=$_GET['act'];
$PAGE_SIZE=6;

switch($act)
{
    case 'add':
        $content=urldecode($_GET['content']);
        $time=time();
        
        $content=str_replace("\n", "", $content);
        
        $sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)";
        
        mysql_query($sql);
        
        $res=mysql_query('SELECT LAST_INSERT_ID()');
        
        $row=mysql_fetch_array($res);
        
        $id=(int)$row[0];
        
        echo "{\"error\": 0, \"id\": {$id}, \"time\": {$time}}";
        break;
    case 'get_page_count':
        $sql="select ceil(n) from (SELECT COUNT(*)/{$PAGE_SIZE} n FROM weibo) a";
        
        mysql_query($sql);
        
        $res=mysql_query($sql);
        
        //echo $res;
        
        $row=mysql_fetch_array($res);
        
        $count=(int)$row[0];
        
        echo "{\"count\": {$count}}";
        break;
    case 'get':
        $page=(int)$_GET['page'];
        if($page<1)$page=1;
        
        $s=($page-1)*$PAGE_SIZE;
        
        $sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}";
        
        $res=mysql_query($sql);
        
        $aResult=array();
        while($row=mysql_fetch_array($res))
        {
            $arr=array();
            array_push($arr, '"id":'.$row[0]);
            array_push($arr, '"content":"'.$row[1].'"');
            array_push($arr, '"time":'.$row[2]);
            array_push($arr, '"acc":'.$row[3]);
            array_push($arr, '"ref":'.$row[4]);
            
            array_push($aResult, implode(',', $arr));
        }
        if(count($aResult)>0)
        {
            echo '[{'.implode('},{', $aResult).'}]';
        }
        else
        {
            echo '[]';
        }
        break;
    case 'acc':
        $id=(int)$_GET['id'];
        
        $res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}");
        
        $row=mysql_fetch_array($res);
        
        $old=(int)$row[0]+1;
        
        $sql="UPDATE weibo SET acc={$old} WHERE ID={$id}";
        
        mysql_query($sql);
        
        echo '{"error":0}';
        break;
    case 'ref':
        $id=(int)$_GET['id'];
        
        $res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}");
        
        $row=mysql_fetch_array($res);
        
        $old=(int)$row[0]+1;
        
        $sql="UPDATE weibo SET ref={$old} WHERE ID={$id}";
        
        mysql_query($sql);
        
        echo '{"error":0}';
        break;
    case 'del':
        $id=(int)$_GET['id'];
        $sql="DELETE FROM weibo WHERE ID={$id}";
        //echo $sql;exit;
        mysql_query($sql);
        echo '{"error":0}';
        break;
}
?>

posted @ 2018-08-12 14:42 飞刀还问情 阅读(...) 评论(...) 编辑 收藏

飞刀还问情
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《web开发： Vue 组件间数据交互》
yexiangCSDN的专栏
02-23 195
一、Vue 组件间数据交互 1. 组件内部通过props接收传递过来的值 Vue.component(‘menu-item', { props: ['title'], template: '<div>{{ title }}</div>' }) 2. 父组件通过属性将值传递给子组件 <menu-item title="来自父组件的数据"></menu-item> <menu-item :title="title"></menu-it..
数据交互vue-resource
杨春建的博客
07-04 693
原文地址：http://www.cnblogs.com/zycbloger/p/6428014.html 基本语法 必须引入一个库：vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.h
vue交互
weixin_34162695的博客
04-04 256
1）如果vue想做交互，本身的框架是不支持的，需要引入vue-resurce库交互方式：get、post、jsonp 1、get方式methods: { get: function () { /*get.php是在当前同级目录下的*/ /*get给服务发送数据，需要在服务器环境下才能看到结果即通过ftp上传至服务器*/ this.$http....
vue数据交互
gaoyangliu的博客
03-16 1232
交互: $http （ajax）   如果vue想做交互   引入: vue-resouce   get: 获取一个普通文本数据: script>         window.onload=function(){             new Vue({                 el:'body',                 data:{
Vue-数据交互
连温柔的博客
03-16 438
1.安装    （只需要一次）cmd：npm install --global vue-cli 2.新建一个demo文件夹复制文件夹路径 3.cmd：vue init web pack-simple vuedemo(此时demo文件夹内会出现vuedemo文件夹) 4.cmd：cd  vuedemo   进入vuedemo文件夹 5.cmd：npm  install    6.cmd：n
vue.js与后台数据交互的实例讲解
10-18
Vue.js 是一款轻量级的前端JavaScript框架，它在构建用户界面时提供了高效的数据绑定和组件化功能。本文将深入探讨Vue.js如何与...通过理解这个实例，开发者可以进一步学习和掌握Vue.js在实际项目中的数据交互技巧。
使用django和vue进行数据交互的方法步骤
09-18
在开发Web应用时，前后端分离的架构变得越来越普遍，Django作为强大的Python后端框架，Vue则作为轻量级的前端MVVM库，两者结合可以实现高效的数据交互。本篇将详细介绍如何在Django与Vue项目中进行数据交互。 首先...
vue3.0父子组件数据交互
06-11
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...
vue表单数据交互提交演示教程
10-16
在Vue.js框架中，表单数据的交互与提交是日常开发中的常见操作。本文将通过一个简单的示例来讲解如何在Vue中实现这一功能。首先，我们先了解一下Vue中的数据绑定和事件处理。 1. **数据绑定**： 在Vue中，我们可以...
vue.js前后端数据交互之提交数据操作详解
10-18
主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
Vue中的数据交互
miles-zh
10-23 1083
父组件与子组件之间传值 父组件向子组件传值，通过prop传值 组件中的代码 <childComponent msg="hello" title="son" /> 子组件中的代码 <p>{{msg}}--{{title}}<p/> props:['msg','title'] // props是跟data和methods等同级别的 子...
vue组件数据交互
qq_41309350的博客
02-07 109
1：父组件向子组件传值 <div id="app"> <com :pad="msg" content="xiaoming"></com> </div> <script> var vm=new Vue({ el:'#app', data:{ msg:'这是父组件' }, methods:{ }, componen
Vue—组件间的数据交互
hello world的博客
08-29 353
父组件向子组件传值 1、组件通过props接收传递的值，props值为数组，数组中可包含很多属性，这些属性都是父组件传递过来的 Vue.component('menu-item',{ props:['title'], template: '<div>{{ title }}</div>' }) 2、父组件通过属性将值传递给子组件 <menu-item title="来自父组件的数据"></menu-item> <menu-item :title="
【Vue】学习笔记-数据交互
weixin_49202767的博客
02-28 1822
【Vue】学习笔记-数据交互概述安装axios通过axios向后台获取数据数据交互的实现常见错误总结 概述 基于Vue的web项目显示的所有服务端数据，都是通过Ajax获取的。官方推荐使用Axios作为Ajax库，所以本文主要讲解在Vue项目中，如何安装和使用Axio，以及通过前端的Vue框架和后端的Koa框架进行数据交互的例子 安装axios Vue项目中使用如下命令安装 npm install axios --save 在要引用axios的页面引用 import axios from 'axios'
Vue入门（七）之数据交互
qq_38256266的博客
08-10 1450
这里写目录标题一、项目环境（脚手架）1.1、单文件组件1.2、脚手架（vue-cli）环境搭建1.3、单页面应用（SPA）1.3.1、 单页面应用优缺点二、mock数据2.1、安装json-server三、数据交互3.1、fetch（用的较少）3.2、axios（用的较多）3.2.1、get方式3.2.2、post方式3.3、处理并发3.4、全局配置3.5、拦截器3.5.1、请求拦截器3.5.2、响应拦截器四、$nextTick();五、反向代理5.1、了解跨域时机5.2、常用的跨域解决方案：5.3、反向代
Vue组件之间的数据交互总结Vue插槽Vue事件总线Vuex
angrynouse的博客
07-23 1007
props eventbus slot vuex
Vue基础（七）——数据交互（Ajax）
pro1822的博客
08-31 972
Vue基础（七）——数据交互（Ajax）
Vue：父子组件间的数据交互
Specif1c的博客
03-28 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/v...
swiper与vue数据交互
最新发布
09-27
Swiper与Vue数据交互的方法有很多种，下面是其中的一种常见方法： 首先，在Vue组件中，你可以使用v-for指令动态生成Swiper的轮播项。你可以将数据存储在Vue组件的data属性中，并使用v-for指令遍历数据，然后在轮播...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值