（起步2）VUE中数据交互实例

以下例子是参考网上教程实现，所以界面样式是一致的（如有雷同纯属正常），不过以下内容和图片都是通过本人实例实现

示例代码太大，我已经上传到优快云链接地址，http://download.youkuaiyun.com/download/feixiang3447/10180609

介绍之前，先简单说下本示例实现功能效果（不包含服务端接口的开发过程）

主要实现两个页面：首页和搜索页面（包含订阅和取消订阅功能）， 如下图1-1所示，用户登录首页之后，点击右上角的查询图标跳转至搜索页面，如图1-2所示，在搜索公众号文本框中输入内容，回车进行检索

首页 1-1

搜索页面 1-2

1）页面布局概述

APP.VUE是项目入口，页面是由组件组成，而不是传统的WEB页面，该项目中用到组件包含Search（1-2搜索公众号文本和底部显示搜索结果）、Sidebar（右侧订阅栏）、HOME（首页左侧）

1.1 组件创建

每个组件在components目录下创建，浏览路径在main.js中配置

const routes = [{
  path: '/',
  component: Home
},{
  path: '/home',
  component: Home
},{
  path: '/search/:id',
  name:'search',
  component: Search
},{
  path: '/control',
  component: Control
},]
   
   
   

    
    
    比如http://localhost:8080/#/为默认页面，跳转至home组件页面，按照以上配置地址就为http://localhost:8080/#/home
   
   
   
   
   
   

    
    
    带参数的配置参考search,地址浏览效果为http://localhost:8080/#/search/1231
   
   
   
   
   
   

    
    
    

   
   
   

1.2 组件中嵌套其他组件

组件页面的根节点为template，嵌套的内容或组件可以使用div容器包裹，在使用组件的时候，需要在

<template></template>下写明需要引用的组件，比如Sidebar,并在components中声明对象，
<script>
import Sidebar from './components/Sidebar.vue'
comp