Vue的入门——基本语法（下）

(六) Vue组件

Vue 中组件也是一个很重要的概念，例如一个页面中，头部、底部、侧边栏、主内容区都可以看做一个一个组件，不过有一些组件是固定的，例如头部，还有一些是变换的例如内容区

Vue 中就允许我们使用小型、独立和通常可复用的组件构建大型应用。

注：实际都是创建 .vue 模板文件，并不会用直接在页面中书写的这种形式

直接拿一个简单，不过还算相对完善的案例来进行讲解

先说一下最终我们想干嘛，例如 div 或者 input 等等都是一个一个标签，我们现在向做的就是通过创建自定义组件模板，自定义出一个这样的标签，我们在需要的地方只需要引用这个标签，我们就可以达到显示出模板中想要的效果，达到抽取复用的效果

首先使用 Vue.component....... 这样的格式创建组件，在其中 ideal-20 就是组件标签的名字， template 就代表模板中的内容，props 代表我们在引用处传入的参数名

接着在一个已经绑定好的 hello-7 的 div 中引入自定义组件标签 ideal-20，而我们想要遍历 data 中的 fruits 数组，在 ideal-20 属性中进行 for 遍历即可，同时我们需要将每一项通过 v-bind:ideal="item" 绑定参数到组件模板中，因为数组不是一个普通的数组，所以赋 id 为 key值

<div id="hello-7">
  <ideal-20 v-for="item in fruits" v-bind:ideal="item" v-bind:key="item.id"></ideal-20>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>
    // 定义名为 todo-item 的新组件
    Vue.component('ideal-20', {
        props: ['ideal'],
        template: '<li>{{ideal.name}}</li>'
    })
    var vm = new Vue({
        el: "#hello-7",
        data: {
            fruits: [
                {id: 0, name: '苹果'},
                {id: 1, name: '樱桃'},
                {id: 2, name: '山竹'}
            ]
        }
    })
</script>

(七) Axios 入门

首先我们需要提一下，为什么要用这个东西呢？

我们在以前传统的开发中，我们一般会使用 Ajax 进行通信，而 Vue,js 作为一个视图层框架，并不支持 Ajax 的通信功能，所以可以使用 Axios 来实现 Ajax 的异步通信

首先看一下它的特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

首先我们拿一段 json 来模拟数据

{
  "name": "BWH_Steven",
  "blog": "www.ideal-20.cn",
  "about": {
    "country": "中国",
    "phone": "13888888888"
  },
  "students": [
    {
      "id": 0,
      "name": "张三"
    },
    {
      "id": 1,
      "name": "李四"
    },
    {
      "id": 2,
      "name": "王五"
    }
  ]
}

通过下图我们就可以知道我们可以将代码写到 mounted() 中去

(八)插槽 Slot

插槽就是子组件给父组件一个占位符即 <slot></slot> 父组件就能在这个占位符，填一些模板或者 HTML 代码

简单点理解就是组件套组件

就像下面我定义了三个组件，ideal是父组件，在其中用 slot 进行占位，同时用 name 属性指向到了这两个子组件 ideal-title 和 ideal-content，而为了子组件中显示的数据来自服务器（模拟）所以需要动态地显示，即通过传参（前面讲解组件模板有说过），配合遍历等读出 data 中的数据即可

<div id="hello-10">
  <ideal>
    <ideal-title slot="ideal-title" v-bind:title="title"></ideal-title>
    <ideal-content slot="ideal-content" v-for="contentItem in contents" v-bind:content="contentItem"></ideal-content>
  </ideal>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>
    Vue.component("ideal", {
        template: '<div>\
                    <slot name="ideal-title"></slot>\
                      <ul>\
                        <slot name="ideal-content"></slot>\
                      </ul>\
                   </div>'
    })
    
    Vue.component("ideal-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    
    Vue.component("ideal-content", {
        props: ['content'],
        template: '<li>{{content}}</li>'
    })

    var vm = new Vue({
        el: '#hello-10',
        data: {
            title: "理想",
            contents: ["Java", "Linux", "数据库"]
        }
    })
</script>