vue学习笔记(一)入门

Myth丶恋晨 2023-06-25 12:28 142阅读 0赞

# 前言 #

随着前端不断的壮大，许多公司对于前端开发者的需求也越来越多了，作为一名优秀的前端工程师，如果连vue和react都不会的话，那真是out了，为什么那么说呢？这是我在招聘网站上截的一张图，十家公司有九家都是需要对vue或者react熟悉，当然仅仅熟悉肯定是不够的，毕竟掌握住了才能保住自己的铁饭碗，否则的话可能会被炒鱿鱼，精通vue或者react话就可能就需要很长时间了，反正我是不敢说精通，只能说了解。那么一起来看看vue到底是什么东西吧!  
![image][]  
![image][image 1]

# 本章目标 #

*  了解vue是什么
 *  区别框架和库
 *  了解vue的优点
 *  入门第一个vue实例

# vue.js是什么 #

首先我需要说的是vue.js是国人开发的，作者是尤玉溪，重要事情说三遍：作者是中国人，作者是中国人，作者是中国人！！！！  
在这里我就直接用官网的解释了，毕竟官网的解释是比较详细的，Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。大家可能对于渐进式不太了解，这里我给大家找了一张有关渐进式的图片。  
![image][image 2]  
声明式渲染：  
常见的有v-if，v-for，v-html等，主要是vue的基本语法  
组件系统：  
组件系统的话，我们可以认为将可复用的代码作为一个模板，方便维护和管理，常见的有父子组件通信。  
客户端路由：  
路由的话可以理解为一个链接，通常可以用做SPA单页应用。  
大规模状态管理：  
状态管理的话，博主暂时也不太了解，等以后了解之后再回来补充  
构建工具：  
构建工具的话主要将小模块进行整合，我们开发有些项目的时候可能的一个小模块小模块的开发，等待全部开发完成之后，我们就需要将这些模块进行整合，而vue-cli脚手架正好起到了这个作用，vue-cli我们以后会谈到。

# 框架和库的区别 #

一提到框架，很多人就会联想到库，毕竟在没有接触到框架之前我们都是使用库的(jQuery)，那么什么是库，什么是框架呢？我总结如下

## 框架 ##

框架是为了解决一类问题而开发出来的产品，基于自身的特点向用户提供一套完整的解决方案，例如：vue，react,angular等前端三大主流框架  
在这里我们可能不太了解框架的意思，你可以这样理解，框架的话，主动权在它手上，我们必须遵守它制定的一系列规则，如果我们不遵守的话，我们就使用不了框架或者框架会抛出异常信息，例如：在vue中数据必须写在data中，方法必须写在methods中，当然有些既可以当做方法也可以当做计算属性。这个我们后面会提到，现在只是抛砖引玉。

## 库 ##

库是将代码集合成一个产品，供开发者去使用，开发者去调用库中的方法去实现自己的功能，例如：jQuey,zepto，  
库的话我们就是拿来即用，之前也没有去想过或者弄懂库是什么东西，我自己总结是：库的主动权在我们手上，例如：在jQuery中我们获取某个节点是$(’\[类名/id\]’)这种操作，但是我们也可以使用javascript中的原生方法document.getElementById(‘id’)或者document.getElementsByClassName(‘class’),主动权在我们自己的手上，我们想使用jQuey中的方法就使用jQuey中的方法，想使用原生的js方法就是用js原生的方法。  
讲到这里，希望对大家了解框架和库有所帮助，这里主要是我个人的理解。

# vue的优点 #

## 易用： ##

会html,css,js即可上手

## 灵活： ##

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩

## 高效： ##

20kB min+gzip大小，超快虚拟DOM,最省心的优化

# 第一个vue实例 #

中文官网：[https://cn.vuejs.org/][https_cn.vuejs.org]  
英文官网：[https://vuejs.org][https_vuejs.org]  
学习资料：[https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137][https_www.bilibili.com_video_av62914998_from_search_seid_6339600099504545137]  
在进行第一个vue实例之前，我们需要先下载vue，进入官网之后我们找到安装，安装方法暂定三种

### 直接用 ###

直接下载并用

### CDN引入 ###

1.对于制作原型或学习，你可以这样使用最新版本：

### NPM安装 ###

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。  
命令：npm install vue  
在这里我提倡使用开发环境的vue.js而不是生产环境的vue.js，开发环境的vue.js对于我们来说调试比较方便，哪里出错了需要修改也比较容易，一起来看看案例吧！

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>入门第一个vue实例</title>
        </head>
        <body>
            <div id="app">
                {
       {msg}}
            </div>
            <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                let vue=new Vue({
                    el:'#app',
                    data:{
                        msg:'你好'
                    }
                })
            </script>
        </body>
    </html>

注意：数据必须写在data里面

# 总结 #

本章我们主要从四个方面进行了讲解，分别是了解vue，区别框架和库，了解vue的优点，入门第一个vue实例，本章内容也相对简单，主要是入门第一个vue实例，如果文章有理解错误的地方，或者你认为有更好的解释的，请在下方留下您的评论，感谢支持！下一章我们学习vue的生命周期和钩子函数。本章内容到此结束。

[image]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS0xYzNmM2U0NDNhNGI4ODQ5LnBuZw?x-oss-process=image/format,png
[image 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS1hNWY1NGQ3NGVlNzkxZDBlLnBuZw?x-oss-process=image/format,png
[image 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDk2ODA4NS0xMDIzZGVmMTAyODcyOTRlLnBuZw?x-oss-process=image/format,png
[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_vuejs.org]: https://vuejs.org/
[https_www.bilibili.com_video_av62914998_from_search_seid_6339600099504545137]: https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137