Vue.js的组件和指令

导学篇

课程介绍

你好，我是Mr.ZJB, 欢迎你与我一起学习Vue.js的组件和指令课程。
初次见面，你肯定会问我，什么是Vue？为什么要学习Vue？Vue能给我带来什么？我不使用Vue不是也是一样的嘛？我想大家心中的问号好比十万个为什么那么多的飘过去，这时候就需要我----Mr.ZJB来带大家了解一下Vue的世界！
首先，让我们先来看看他的图标吧！优雅而不失低调，图标哪能没有一些绿，这就是Vue，好看吧？

在来看看Vue在前端世界中的排名，百度一波，mua！Vue的排名稳居前列，怎么样？优秀吧？

好了，言归正传，在正式开始学习之前，先来思考一个问题：什么是Vue ？
其实Vue.js其实是一个渐进式框架,一听到渐进式框架那么肯定很多人会说渐进式框架一听就很难，想放弃？或者想问渐进式框架是什么？其实这就中了渐进式框架的套路了，高大而又听不懂的渐进式框架的背后却拥有脆弱的一面。其实就是用你想用或者需要用的功能，你不想用的功能就不用，归根结底所谓渐进式框架就是怎么简单怎么来也就是开心就好。就这么简单。所以新手小白们就很喜欢这个框架。接下来就和我一起来走进Vue的世界。

知识储备：
为了保证你能更好的吸收本次课程所讲的知识，希望你已经有了以下知识储备：

前端中为什么要引入Vue .js

我们为了使网页更加的动态化，多亏了有JavaScript的帮忙，而一个网页那么复杂，这样就产生了成百上千的JavaScript代码，作为刚刚入门的我们如何快速上手，这时候就逃不过Vue.js的帮助了。

第一关：Vue.js的横空出世

Vue .js它有什么好处呢？

这就好比你要买一个比较昂贵的商品的时候，是使用百元大钞还是选择选择成百上千的零钱。无论你如何选择无疑使用现金增加了你和营业员的工作量，并且不安全。这时候就出现了微信支付宝这些支付工具，而这些支付工具就好比Vue.js不但增加了你的开发速度，而且会让你的购物更加愉快安全。

什么是组件化开发

我想你已经使用过微信支付宝等支付工具了吧，之后就需要来逛逛淘宝、京东、拼多多了吧！我相信你也去淘宝上买过东西，但是你应该不知道这些看似复杂的网页其实都是一个个很简单的组件，只是拼接在了一起，这就像你是一个厨师，你只需要把食材进行组合搭配。这就是组件化开发。

组件化开发的好处

看到上面的我介绍的组件化开发，大家心里应该已经有了一丝丝组件化开发的好处了吧？这就像你这个厨师无需知道这些食材是如何生产过程、运输的。你只需要进行简单的拼接，这就是组件化开发的好处，简单而又明了。

我们需要如何引入Vue.js

接下来就是Vue.js的出生了，Vue出生只需一步就是导入。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

组件的基本使用

当Vue.js顺利出生之后，就可以进行使用了，使用组件需要进行两步操作分别是创建组件和注册组件：

//创建组建
     const cpn=  Vue.extend({
            template:`<div>
                <h2>我是组件</h2>
                </div>  `
        })

//注册组件
    Vue.component('cpn',cpn);
        const app=new Vue({
    el:'#app'
})

闯关练习：简单题

为了再次确认下你是否已经掌握了前面的内容，那就先出个题考考你咯：
1、Vue.js是什么框架？
A. 渐进式框架
B.MVC 框架
C. JS框架
D. UI 框架
答案：
A. 渐进式框架 错误提示：往上翻一翻，答案便知道！

2、如何注册组件？
A、

     const cpn=  Vue.extend({
            template:`<div>
                <h2>我是组件</h2>
                </div>  `
        })

B、

    Vue.component('cpn',cpn);
        const app=new Vue({
    el:'#app'
})

答案：创建组件是A， 注册组件是B不要傻傻分不清哦！