Vue(第二天)

最新推荐文章于 2024-02-19 17:26:10 发布

最爱尹宝

最新推荐文章于 2024-02-19 17:26:10 发布

阅读量103

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45096638/article/details/112761381

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue：表单双绑、组件

文章目录

Vue：表单双绑、组件
一、什么是双向数据绑定？
二、什么组件？
- - 案列
三、Axios异步通信
- 1、什么是Axios？
- - Axios-Demo
  - - 1. 新建一个html页面
    - 2. 新建一个json

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是双向数据绑定？

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当试图发生变化的时候，数据也会同步变化。这也算是Vue.js的精髓之处。

二、什么组件？

组件是可复用的Vue实例，说白了就是一组可以复用的模板，跟JSTL的自定义标签、Thylmeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用以一棵嵌套的组件树的形势来组织：
Vue.component:注册之间
my-component-li：自定义组件的名字
template：组件的模板

案列

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

</head>
<body>

<div id="app">
    <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    Vue.component("qinjiang", {
        props: ['qin'],
        template: '<li>{{qin}}</li>'
    });

    var app = new Vue({
        el: '#app',
        data: {
            items: ['java', 'linux', 'xinzai']
        }
    });
</script>
</body>
</html>

三、Axios异步通信

1、什么是Axios？

Axios是一个开源的可以用在浏览器和NodeJs的异步通信框架，她的主要作用就是实现Ajax异步通信，其功能特点：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API【JS中链式编程】
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON请求
客户端支持防御XSRF(跨站请求伪造)

Axios-Demo

1. 新建一个html页面

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

<div id="app">
    <li>{{info.paramz.TotalCount}}</li>
    <li>{{info.paramz.feeds.id}}</li>
    <li>{{info.paramz.feeds.data.summary}}</li>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        // data：{}  一个是属性标签
        // data(){}  一个是方法
        data() {
            return{
                info:{
                    paramz:{
                        TotalCount: null,
                        feeds:{
                            id:null,
                            data:{
                                summary:null
                            }
                        }
                    }
                }
            }
        },
        // 钩子函数 链式编程 ES6新特新
        mounted() {
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

2. 新建一个json

{
  "paramz": {
    "feeds":
      {
        "id": 299076,
        "oid": 288340,
        "category": "article",
        "data": {
          "subject": "荔枝新闻3.0：不止是阅读",
          "summary": "江苏广电旗下资讯类手机应用“荔枝新闻”于近期推出全新升级换代的3.0版。",
          "cover": "/Attachs/Article/288340/3e8e2c397c70469f8845fad73aa38165_padmini.JPG",
          "pic": "",
          "format": "txt",
          "changed": "2015-09-22 16:01:41"
        }
      },
    "PageIndex": 1,
    "PageSize": 20,
    "TotalCount": 53521,
    "TotalPage": 2677
  }
}