第三次课. 组件和数据绑定

caesarding

已于 2022-08-22 18:26:47 修改

阅读量397

点赞数

分类专栏： web服务端开发|学习笔记文章标签： vue

于 2022-04-25 08:08:03 首次发布

caesarding07@gmail.com

本文链接：https://blog.csdn.net/qq_44628595/article/details/124396322

版权

web服务端开发|学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

组件、数据绑定和条件循环

组件、数据绑定和条件循环

组件和数据绑定

上节课我们布置了咖啡屋的作业。已经实现的同学应该都是像我这样完成。

<!--
 * @Author: CaesarDing
 * @Mail: caesarding07@gmail.com
 * @Date: 2022-04-23 21:16:43
 * @LastEditors: CaesarDing
 * @LastEditTime: 2022-04-24 00:08:06
 * @FilePath: /my_first_vue/my-vue-app/src/views/Info.vue
 * @Description: 
-->
<!--
 * @Author: CaesarDing
 * @Mail: caesarding07@gmail.com
 * @Date: 2022-04-21 22:01:42
 * @LastEditors: CaesarDing
 * @LastEditTime: 2022-04-24 08:04:22
 * @FilePath: /my_first_vue/my-vue-app/src/App.vue
 * @Description: 
-->
<template>
  <header>Asher's Coffee House</header>
  <article>
    <aside>
      <router-link to="/hello">Hello</router-link>
      <router-link to="/info">Info</router-link>
    </aside>
    <main>
      <router-view></router-view>
    </main>
  </article>
  <footer>
    <p>All Copyright Reserved©AsherDing@icloud.com</p>
  </footer>
</template>

这节课，我们来学习组件的知识，把App.vue界面的<header>、<footer>构建成组件，并通过数据绑定的形式传入参数。

话不多说，我们进入正题。我们先在components文件夹下新建两个SimpleHeader.vue,SimpleFooter.vue文件。

Vue数据绑定的方法有很多，这里介绍一种最简单的方法，即双大括号{{}}的数值插入法，由于时间有限，过多的方法这里不做介绍，有兴趣的同学可以自行百度。

这里我们先在template里把我们想要进行数据绑定的字符用双大括号包裹起来，然后自定义一个name的属性名。

<!-- SimpleHeader.vue -->
<template>
    <div class="header">
        {{name}}'s Coffee House
    </div>
</template>

然后我们还需要在script里面，把我们导出我们刚才定义的数据，并设置数据类型还有默认值。

<script>
    export default{
        props:{
            name:{
                type:String,
                default:''
            }
        }
    }
</script>

最后，我们再来调整一下css样式。

<style lang="css">
.header{
    margin: 0;
    height: 4em;
    border: 1px black solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

接下来，我们再在App.vue里导入这个组件

<script>
import SimpleHeader from './components/SimpleHeader.vue'
// 导入后再导出，然后就可以在template中使用
export default{
  name: 'app',
  components:{
    SimpleHeader,
  },
}
</script>

然后在用自定义标签的形式在template中使用。注意标签名和我们导出的组件名一致。

<!-- app.vue -->
<template>
  <SimpleHeader name="Asher"></SimpleHeader>
  <article>
      ... 
  </article>
</template>

至此，我们就完成了组件的注册和数据绑定。让我们再来看一下效果
xiegdb

最后，还剩下Footer的组件制作，这里就当作大家这次课的课后作业，要求最终效果和Header组件一致。

列表渲染和数据绑定

上节课，我们还让大家制作了一个Info页面。

<!-- Info.vue -->
<template lang="">
    <div>
        <div class="item">
            <img alt='image' />
            <div class="content">
                <h1>Title</h1>
                <p>This is my content</p>
            </div>
        </div>
        <div class="item">
            <img alt='image' />
            <div class="content">
                <h1>Title</h1>
                <p>This is my content</p>
            </div>
        </div>
        <div class="item">
            <img alt='image' />
            <div class="content">
                <h1>Title</h1>
                <p>This is my content</p>
            </div>
        </div>
    </div>
</template>

这节课我们将继续讲一下如何使用循环v-for(列表渲染)完成这个界面，以减少代码重复，提高复用率。

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

所以，我们需要先定义可以遍历的数组，方法如下：

<script>
    export default {
        data() {
            return {
                infoList: [{
                    infoId: 1,
                    title: 'Title1',
                    imgUrl: '',

                }, {
                    infoId: 2,
                    title: 'Title2',
                    imgUrl: '',

                }, {
                    infoId: 3,
                    title: 'Title3',
                    imgUrl: '',
                }]
            }
        },
    }
</script>

在定义好渲染列表后，我们就开始来编写我们的循环代码。

<!-- Info.vue -->
<template lang="">
    <div>
        <div class="item" v-for="item in infoList" v-bind:key="item.infoId">
            <img :src="item.imgUrl" alt="image">
            <span>{{item.title}}</span>
        </div>
    </div>
</template>

让我们看一下效果：
ceEt9l
通过审查，我们看到class为item的div标签被重复渲染了三次，并且渲染所绑定的数据来源都是我们的infoList列表。

接下来，让我们再为每一篇info添加一个跳转功能。实现点击元素，就能查看详细内容。

这里我们只需要对已经实现的列表渲染做一下改进，将div标签改成router-link，并为其添加一个跳转目标。

<!-- Info.vue -->
<template lang="">
    <div>
        <router-link :to="'/info/detail/'+ item.infoId" class="item" v-for="(item) in infoList" v-bind:key="item.infoId">
            <img :src="item.imgUrl" alt="image">
            <span>{{item.title}}</span>
        </router-link>
    </div>
</template>

让我们点击看一下效果：

uvR0ma

这里，我们点击了第一个信息，可以看到页面url变成http://localhost:3000/#/article/detail/1,但是页面并为显示任何内容，这是因为我们还没有为这个url路由指定视图。那现在我们就为他添加一个路由：

...
// 信息内容
path: '/info/detail/:infoId',
name: 'detail',
component: () => import('../views/InfoDetail.vue'),
...

这里的我们使用了vue-router路由的匹配语法¹，这使得我们可以匹配任意的infoId。

添加完路由，我们还需要有对应的视图页面。

<!--
 * @Author: CaesarDing
 * @Mail: caesarding07@gmail.com
 * @Date: 2022-04-24 11:09:18
 * @LastEditors: CaesarDing
 * @LastEditTime: 2022-04-24 11:50:12
 * @FilePath: /my_first_vue/my-vue-app/src/views/InfoDetail.vue
 * @Description: 
-->
<template lang="">
    <div>
        <h1>详细信息</h1>
        <div class="title">{{ title }}</div>
        <div class="content" v-html="detail"></div>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="css">
</style>

现在，当我们点击任意标题，即可跳转对应的详细信息页面，然而由于他现在还没有任何内容，所以看上去是这样的。
bTi4Wc

阅读统计

最后，让我们再为我们的咖啡屋添加一个小组件——数据统计。这也是我们这次课的另外一项作业。

作业要求在导航栏新增一个Count选项。点击该选项以后，主要内容页面会展示用户在info页查看信息详细的总次数。这项作业可能会涉及到我们下节课状态管理²的相关内容，大家可以提前查阅资料做好预习。次数的统计功能不勉强一定实现，但至少要保证可以正常显示Count页面。最终实现效果参考如下：

4CpInv

同样，对于基础较差的同学，这里给出简单的实现思路：

先在导航栏添加Count选项，router-link.
再完成路由的设计
新建views/Count.vue页面
完成Count.vue页面的内容

[vue-router路由匹配语法]( // https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96) ↩︎
https://vuex.vuejs.org ↩︎