提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端框架Vue------＞第一天学习（3）

Vue学习框架前端 ------ 第一天
2023-09-14 09:07:25 时间

文章目录

8 、使用Axios实现异步通信

8.1 什么是Axios
Axios是一个开源的可以用在浏览器端和Node.js的异步通信框架，她的主要作用就是实现AJAX异步通信，功能特点

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换json数据
  • 客户端支持防御XSRF（跨站请求伪造）
    在这里插入图片描述

data.json

{
  "name": "百度",
  "url": "http://www.baidu.com",
  "page": 66,
  "isNonProfit": true,
  "address": {
    "street": "沈丘",
    "city": "周口市",
    "country": "中国"
  },
  "links": [
    {
      "name": "Google",
      "url": "http://www.google.com"
    },{
      "name": "Baidu",
      "url": "http://www.baidu.com"
    },
    {
      "name": "Sougou",
      "url": "http://www.sougou.com"
    }
  ]
}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Axios异步通信</title>
</head>
<body style="background-color: pink">

<div id="app">
    <div>
        名称:{{info.name}}
    </div>
    <div>
        url:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
    </div>
    <ul>
        <li v-for="list in info.links">
            {{list.name}}----->{{list.url}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data(){
            return{
                info:{
                    name:'',
                    url:'',
                    links:[]
                }
            }
        },
        mounted(){
           axios
               .get('data.json')//拿到当前的数据路径
               .then(response =>this.info=response.data)
        }
    })
</script>

</body>
</html>

在这里插入图片描述

9 、表单输入绑定

9.1 、 什么是双向数据绑定

当数据发生变化时、视图也就发生变化，当视图发生变化时，数据也会跟着同步变化

9.2 、为什么要实现数据的双向绑定

在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作

9.3 、在表单中使用双向数据绑定

v-model指令在表单<input>、<textarea>、及<select>元素创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。初始值来自vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>表单输入绑定</title>
</head>
<body style="background-color: pink">

<div id="app">
    <input type="text" v-model="message">
    <p>message:{{message}}</p>

    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>

</div>

<script  type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue",
            selected:''
        }
    })

</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

相关文章