Vue.js的组件和指令

程序员文章站 2022-05-24 14:13:19

...

Vue.js的组件和指令

导学篇

课程介绍
前端中为什么要引入Vue .js？
Vue.js的优点

1.体积小
2.更高的运行效率
3.双向数据绑定
4 .生态丰富、学习成本低

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

组件化开发的好处
我们需要如何引入Vue.js？
组件的基本使用
闯关练习：简单题

导学篇

课程介绍

你好，我是Mr.ZJB, 欢迎你与我一起学习Vue.js的组件和指令课程。初次见面，我还是需要向你简单的介绍一下这个课：
Vue.js其实是一个渐进式框架,也是前端三大主流框架之一，接下来就和我一起来学习一下Vue.js吧。
知识储备：
为了保证你能更好的吸收本次课程所讲的知识，希望你已经有了以下知识储备：

Vue.js的组件和指令

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

随着时间的推移，我们已经把服务端代码放在了浏览器中，这样就产生了成百上千的JavaScript代码，他们连接各式各样的HTML、CSS文件，但是缺乏组织形式。这就是为什么越来越多的开发者使用JavaScript框架，例如Angular、React、Vue这样的前端框架。其中Vue.js是渐进式框架。所谓渐进式框架就是由浅入深的，所以深受新手小白的喜爱。

Vue.js的优点

1.体积小

压缩后33K;

2.更高的运行效率

基于虚拟dom,一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。

3.双向数据绑定

让开发者不用再去操作dom对象,把更多的精力投入到业务逻辑上.

4 .生态丰富、学习成本低

市场.上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来即用实现快速开发!对初学者友好、入门容易、学习资料多:

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

组件化开发的好处

在学习Vue.js之前，要了解组件化开发是什么？组件化开发能给我们带来什么好处。其实，组件化开发就是不同的功能封装到不同的组件中，组件能够专业分工，重复使用，拼装组合。

我们需要如何引入Vue.js？

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

当然方法不止以上两种，但是对于新手小白来说，更加推荐上面两周方法。

组件的基本使用

当引入了Vue.js之后，就可以进行使用了，使用方法如下：

  <body>
    <!-- 组件必须挂载在某个Vue实例下 否则不生效 -->
    <div id="app">
        <cpn></cpn>
    </div>
    <script>
        //创建组建
     const cpn=  Vue.extend({
            template:`<div>
                <h2>我是组件</h2>
                </div>  `
        })
        //注册组件
        Vue.component('cpn',cpn);
        const app=new Vue({
            el:'#app'
        })
    </script>
</body>

闯关练习：简单题

为了再次确认下你是否已经掌握了前面的内容，那就先出个题考考你咯：
如何注册组件？

答案：

Vue.component('组件名', {
 /* ... */ 
 })

Vue.js的组件和指令