9.组件练习：Message

Vue 2 入门学习笔记 /

本系列文章为laracasts.com 的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。

视频源码地址：github.com/laracasts/Vue-Forms

项目初始版本为Vue 2.1.3，教程还在更新中。

本节说明

对应第 9 小节：Practical Component Exercise 1：Message

本节内容

接下来的几节我们来做一些练习：如何将html模块抽取出组件。本节我们来练习message组件，我们的例子从 Bulma 网站选取：
file
首先我们需要引入样式跟组件：

index.html

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
        <style type="text/css">
            body{
                padding-top: 40px;
            }
        </style>
    </head>

    <body>
        <div id="root" class="container">
                <article class="message">
                    <div class="message-header">
                        <p>Hello World</p>
                        <button class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                    </div>
                </article>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script src="main.js"></script>
    </body>
</html>

查看页面：
file
现在我们来抽取成组件：我们的组件包含三个部分，标题，内容和删除按钮，所以我们会有title跟body属性，以及删除操作。我们将通过是否显示组件可见来控制删除操作。下面建立组件：

main.js

Vue.component('message',{
    props:['title','body'],

    data() {
        return {
            isVisiable: true
        }
    },

    template:`
    <article class="message" v-show="isVisiable">
        <div class="message-header">
            <p>{{ title }}</p>
            <button class="delete" aria-label="delete" @click='isVisiable = false'></button>
        </div>
        <div class="message-body">
            {{ body }}   
        </div>
    </article>
    `
});

new Vue({
    el:'#root'
});

接着我们给组件的prop传入静态值：

index.html

.
.
<body>
    <div id="root" class="container">
        <message title="hello world" body="asdfaf asr aiunan"></message>
        <message title="hello Vue" body="ohu aeuah anfahs"></message>
        <message title="hello php" body="asdfaf asr aiunan "></message>
    </div>

    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

    <script src="main.js"></script>
</body>
.
.

最终的效果：
file