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>


前端框架Vue------＞第一天学习（3）的更多相关文章

  1. 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  2. 前端框架Vue------＞第一天学习（2） v-if

    API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...

  3. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  4. 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  5. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  6. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  7. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  8. 前端框架VUE——安装及初始化

    本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...

  9. 前端框架vue学习笔记：环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

随机推荐

  1. 【原创】JS文件替换神器--Chrome ReRes插件

    本文仅供学习交流使用,如侵立删! JS文件替换神器--Chrome ReRes插件 ReRes插件安装配置 ReRes项目官方地址:https://github.com/annnhan/ReRes 谷 ...

  2. Bellman-Ford算法与SPFA算法详解

    PS:如果您只需要Bellman-Ford/SPFA/判负环模板,请到相应的模板部分 上一篇中简单讲解了用于多源最短路的Floyd算法.本篇要介绍的则是用与单源最短路的Bellman-Ford算法和它 ...

  3. webSocket的基本使用与socket.io库使用

    前言: 传统的客户端与服务器进行通信,都是客户端向服务端发送请求,服务端进行响应,否则一般不会自动进行响应.单向,如果要持续获取服务端资源,则需要持续发送请求 初解决方案:轮询:客户端让http请求保 ...

  4. MySQL查询性能优化七种武器之链路追踪

    MySQL优化器可以生成Explain执行计划,我们可以通过执行计划查看是否使用了索引,使用了哪种索引? 但是到底为什么会使用这个索引,我们却无从得知. 好在MySQL提供了一个好用的工具 - opt ...

  5. 在 Windows 搭建 SVN 服务

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://www.cnblogs.com/englyf/p/16671311.html 最近公司给配了台新电脑,配置 ...

  6. 【设计模式】Java设计模式 - 桥接模式

    [设计模式]Java设计模式 - 桥接模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起 ...

  7. 《现代操作系统(中文第四版)》实验一 bash脚本实现cal

    题目大意:让你写一个bash脚本,实现与linux下cal相同的效果 学习bash语言题,除了区别和c++有亿点区别外其他都还好 1 monName=("invalid" &quo ...

  8. flutter系列之:flutter中常用的GridView layout详解

    目录 简介 GridView详解 GridView的构造函数 GridView的使用 总结 简介 GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridVie ...

  9. [Python]-string-字符串

    字符串是Python中很常用的数据类型,此处记录一些典型用法并随时更新. split()方法 通过指定分隔符对字符串进行切片,如果参数 num 有指定值,则分隔 num+1 个子字符串. 两个参数st ...

  10. 【WPF】实现动态切换语言(国际化)以及动态换肤功能

    前言:以下内容,手把手从搭建到最终实现,完成多语言切换以及换装功能. 本地系统环境:win 10 编译器环境:VS2022 社区版 .NET 环境: .NET 6 1.新建一个WPF项目 2.新建完毕 ...