Vue(第二天)

Vue:表单双绑、组件


文章目录

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


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

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

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

二、什么组件?

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

案列


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

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: '
  • { {qin}}
  • '
    }); 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页面

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    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
      }
    }
    

    你可能感兴趣的:(vue,vue)