入门Vue.js要学习哪些知识？

入门Vue.js首先需要从最基础的知识学起，比如Vue.js的概念、作用、特点等等。只有对Vue.js有一个大致的初步了解，我们才能明白为什么掌握它如此重要。下面一起来具体看看入门Vue.js.js要学习哪些知识吧！

1、Vue.js是干什么的？

（1）Vue.js的产生

在目前这个互联网高速发展的社会，每天都会出现和消失无数的应用，一个网站会因为节日活动或其它原因频繁更改样式，要想持续的发展下去，产品的用户体验是基本中的基本。如果你用手机浏览器打开过一些网页的话，你会发现发现网页和原生app之间的一些区别。网页的优势是不用安装，随用随走等；劣势是网页加载的时候会出现空白页面，一些动画效果明显有卡顿的感觉，页面与页面之间跳转因为加载网页数据的原因也会出现短暂空白页面的情况等。

总的来讲，网页与原生app做对比，几乎只有不用安装一个优势，其他方面的用户体验明显不如原生app。在这种情况下，Vue.js等一系列前端开发框架应运而生。可以这么说，Vue.js等前端框架的流行是历史的必然，要想成为一名优秀的开发者，入门学习前端开发框架是必须的。

（2）Vue.js的定义

对于刚开始入门学习的朋友来讲，我们首先要弄清楚Vue.js的定义这一基础知识。Vue.js的官方文档解释说，它是一套用于构建用户界面的渐进式框架。重点在于“渐进式”和“框架”。所谓渐进式，说就是Vue.js的功能有很多，你可以都用，也可以只用一部分。再来说一说框架。它指定一片区域，在架子的基础上来进行开发。也就是说框架有限制，需要符合框架本身的规定，而库就是工具箱，使用起来基本没限制。

在职前端开发，如果你也想学习前端开发技术，可以

加入我组建的前端学习交流裙：851 231 348 也可以关注我的微信公众号：【前端留学生】自己

根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，以及一些前端学习手册，

前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

1

2

3

4

2、Vue.js的特点和优势是什么？

在了解完Vue.js的基础知识之后，我们再来看看Vue.js的特点。一个是体积小，Vue.js本身的体积非常小，压缩后也就33k.另外，它更高效。数据的双向绑定，让开发者不用再去操作DOM对象。而且简单易学。对初学者比较友好，市场上已经有了很多比较成熟稳定的，基于Vue.js的UI框架和组件，拿来即用。当然，它的优势不止于此，希望大家在入门学习后再慢慢体会。

3、第一个Vue程序演示

（1）引入vue.js我们在使用Vue的时候第一步是先引入。

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

<!-- 通过CDN加载 -->

<script src="./js/vue.js"></script>

<!-- 或者下载到本地 -->

（2）指定Vue的活动区域

我们一说到框架就容易想到盖房子时钢筋搭建的楼体结构，这个结构只作用于固定的范围，vue作为一个框架同样如此，我们也需要给它指定一个作用范围。所以我们的下一步是在body标签中写下：

<div id="root"></div>

<!-- 指定一个位置，用来搭建框架 -->

我们的目的就是在id为root的div里，指定为Vue的活动区域（框架要建在指定的地方）。也就是说，在这个div内，可以使用Vue的功能，但是也要符合Vue的规定，而在这个div外面Vue就管不着了。

（3）创建Vue实例

重点来了，在上面的代码后，我们加一个script标签，然后里面写：

new Vue({

el: '#root'

//把Vue挂到上述div的就是这行代码,注意这里使用的是css选择器

})

一个崭新的Vue实例就这样诞生了，Vue也起作用了。但是由于没有写任何的HTML元素和CSS样式，现在运行的结果也只是一个大白屏。

（4）添加HTML元素

HTML

<div id="root">

{{text}}

<!-- 注意，是两个花括号 {} -->

</div>

Js

new Vue({

el: '#root',

data: {

text: '欢迎来到前端留学生'

}

})

再刷新一下页面，页面就出现了。

看到这里，大家对于Vue.js也算是基本入门了。

————————————————

版权声明：本文为CSDN博主「jinmu520」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/jinmu520/article/details/108726960