Vue实现异步通讯

最新推荐文章于 2024-05-03 08:44:45 发布

X ゜

最新推荐文章于 2024-05-03 08:44:45 发布

阅读量437

点赞数 3

分类专栏： Vue 文章标签： vue ajax javascript js java

本文链接：https://blog.csdn.net/weixin_44625302/article/details/108011463

版权

Vue 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

实现原理

**Vue是面向视图层的开发框架，本身并不具备异步通讯的能力，不过它提供了整合Axios框架的良好接口：钩子函数。钩子函数是Vue对象生命周期中的阶段性回调函数

基础程序

1.导入Vue和Axios类库
Ajax请求：编写钩子函数 - 加载页面时进行请求

// 1、编写钩子函数：mounted()
mounted() {
    // AJAX通讯：
    axios.get('xxx.json')
    // response.data接收返回的Json字符串，再赋值给this.info
        .then(response => (this.info = response.data));
}

Ajax回调：编写data()函数 - 交互成功后进行回调

data() {
	return {
	  info: {
		name: null,
		url: null,
		address: {
		  country: null,
		  province: null
	    }
	  }
  }
}

编写网页

<body>
<div id="demo" v-clock>
    {{ info.name }}
    <li><a v-bind:href="info.url">跳转百度</a></li>
    <li>{{ info.address.country }}</li>
    <li>{{ info.address.province }}</li>
</div>
</body>

完整测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 4、问题：Vue替换更新变量值时可能会造成屏幕闪烁 -->
    <!-- 解决：配置'v-clock'属性标识，然后通过CSS样式设置不显示，这样浏览器就不会先输出模板页面再进行替换，而是直到替换完成才进行输出 -->
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
<!-- 3、引用变量 -->
<div id="demo" v-clock>
    {{ info.name }}
    <li><a v-bind:href="info.url">跳转百度</a></li>
    <li>{{ info.address.country }}</li>
    <li>{{ info.address.province }}</li>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vue = new Vue({
        el: "#demo",
        // 1、编写钩子函数：mounted()
        mounted() {
            // AJAX通讯：加载本地json文件进行模拟(见下方)
            axios.get('xxx.json')
            	// response.data接收返回的Json字符串，再赋值给this.info
                .then(response => (this.info = response.data));
        },
        // 2、编写成功时的回调函数：data()
        data() {
            return {
                info: {
                    name: null,
                    url: null,
                    address: {
                        country: null,
                        province: null
                    }
                }
            }
        }
    });
</script>
</html>

xxx.json

{
  "name": "Axios测试",
  "url": "www.baidu.com",
  "address": {
    "country": "中国",
    "province": "台湾"
  }
}

return
(1) 返回对象，当前组件可引用来进行初始化，作用域仅限于当前组件！

(2) rules对象为组件配置监听，作用域仅限于当前组件！

JSON转换

注意，后端传递过来的JSON字符串本身就是JS对象，可以直接访问，无所转换，不过属性名称应该加上""，否则undefined！

// 用户存储账号名和token
console.log("default.methods.submitForm 144 "+response.data["username"]);
console.log("default.methods.submitForm 145 "+response.data["token"]);
console.log("default.methods.submitForm 146 "+response.data);

1、将对象转换为JSON格式字符串

JSON.stringify(object)

2、将JSON字符串转换为对象

JSON.parse(jsonString);

X ゜

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实现异步通讯

实现原理**Vue是面向视图层的开发框架，本身并不具备异步通讯的能力，不过它提供了整合Axios框架的良好接口：钩子函数。钩子函数是Vue对象生命周期中的阶段性回调函数基础程序1.导入Vue和Axios类库Ajax请求：编写钩子函数 - 加载页面时进行请求// 1、编写钩子函数：mounted()mounted() { // AJAX通讯： axios.get('xxx.json') // response.data接收返回的Json字符串，再赋值给this.info
复制链接

扫一扫