小白初入前端之Vue.js的学习之路——vue学习第四弹

这次说到组件了：Vue.component，按我的理解，它的作用就是减少重复代码，减少代码冗余。比如第二弹的例子（无动画版）：

<li draggable="true">
                        <input type="checkbox" @change="redo(index, event)" checked>
                        <p>{{ item }}</p>
</li>

一直重复它的的代码，会显得代码冗余，那么我们可以将它组件化，以便重复使用，那么我们可以使用Vue.component：

Vue.component("eventlist", {                                                                
            props: ['event', 'index', 'ischecked'],
            template: `
                    <li draggable="true">
                    <input type="checkbox" @click="$emit('doit' ,index)" :checked="ischecked">
                    <p>{{ event }}</p>
                    </li>
                    `,
        })

上述代码相当于将li及其内的所有元素给封装了，赋值给了一个标签：这里命名为eventlist。以后就不需要写这么长的代码了，直接用eventlist即可。我感觉eventlist像是变量名，li及其内的所有元素像是字符串。但是这个字符串，我们可以向内传值，定制化这个“字符串”（这里我们需要用到props字段向组件传值。具体看官网吧，文字功底不行）。我们也可以自定义点击事件，这里用到$emit触发相应事件。

这里完成了组件的定义，使用的话看代码哇。从这里开始，我们就进入了Vue的新手村了，之前的是入门（注册了账号，(lll￢ω￢)）。然后也到了我“放弃”的时候了，因为后面看到了脚手架，又发现用到了webpack，又发现好像用到了node.js语法，又发现想做点东西解面可以用element-ui，东西好多。我已经看不懂后面的东西了。打算去看看别的，再从新手村打怪吧。。。。。好难，东西好多。后面先写别的，随后再写vue吧，现在贴代码哇。