前言

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

本章目标

  • 了解vue是什么

  • 区别框架和库

  • 了解vue的优点

  • 入门第一个vue实例

vue.js是什么

首先我需要说的是vue.js是国人开发的，作者是尤玉溪，重要事情说三遍：作者是中国人，作者是中国人，作者是中国人！！！！

在这里我就直接用官网的解释了，毕竟官网的解释是比较详细的，Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。大家可能对于渐进式不太了解，这里我给大家找了一张有关渐进式的图片。

声明式渲染：

常见的有v-if，v-for，v-html等，主要是vue的基本语法

组件系统：

组件系统的话，我们可以认为将可复用的代码作为一个模板，方便维护和管理，常见的有父子组件通信。

客户端路由：

路由的话可以理解为一个链接，通常可以用做SPA单页应用。

大规模状态管理：

主要涉及的是vuex状态管理​

构建工具：

构建工具的话主要将小模块进行整合，我们开发有些项目的时候可能的一个小模块小模块的开发，等待全部开发完成之后，我们就需要将这些模块进行整合，而vue-cli脚手架正好起到了这个作用，vue-cli我们以后会谈到。

框架和库的区别

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

框架

框架是为了解决一类问题而开发出来的产品，基于自身的特点向用户提供一套完整的解决方案，例如：vue，react,angular等前端三大主流框架

在这里如果不太了解框架的意思，你可以这样理解，框架的话，主动权在它手上，我们必须遵守它制定的一系列规则，如果我们不遵守的话，我们就使用不了框架或者框架会抛出异常信息，例如：在vue中数据必须写在data中，方法必须写在methods中，当然有些既可以当做方法也可以当做计算属性。这个我们后面会提到，现在只是抛砖引玉。

库

库是将代码集合成一个产品，供开发者去使用，开发者去调用库中的方法去实现自己的功能，例如：jQuey,zepto，

库的话我们就是拿来即用，之前也没有去想过或者弄懂库是什么东西，我自己总结是：库的主动权在我们手上，例如：在jQuery中我们获取某个节点是$('[类名/id]')这种操作，但是我们也可以使用javascript中的原生方法document.getElementById('id')或者document.getElementsByClassName('class'),主动权在我们自己的手上，我们想使用jQuey中的方法就使用jQuery中的方法，想使用原生的js方法就是用js原生的方法。

讲到这里，希望对大家了解框架和库有所帮助，这里主要是我个人的理解。

vue的优点

易用：

会html,css,js即可上手

灵活：

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

高效：

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

第一个vue实例

中文官网：https://cn.vuejs.org/

英文官网：https://vuejs.org

学习资料：https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137

在进行第一个vue实例之前，我们需要先下载vue，进入官网之后我们找到安装，安装方法暂定三种

直接用 <script> 引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量

CDN引入

1.对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

3.如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js' </script>

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的生命周期和钩子函数。本章内容到此结束。

vue学习笔记(一)入门的更多相关文章

  1. vue 学习笔记1 入门

    可以在 JSFiddle上在线学习vue 注意:所演示的示例,都是在JS中将Vue实例绑定至HTML中的指定元素,然后再通过Vue实例中data内的属性或者methods中的方法,来对所绑定元素的子元 ...

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  4. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  5. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  6. WebSocket学习笔记——无痛入门

    WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报  分类: 物联网学习笔记(37)  版权声明:本文为博主原 ...

  7. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  8. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  9. Java学习笔记之---入门

    Java学习笔记之---入门 一. 为什么要在众多的编程语言中选择Java? java是一种纯面向对象的编程语言 java学习起来比较简单,适合初学者使用 java可以跨平台,即在Windows操作系 ...

随机推荐

  1. 玩转 SpringBoot 2 快速整合拦截器

    概述 首先声明一下,这里所说的拦截器是 SpringMVC 的拦截器 HandlerInterceptor.使用SpringMVC 拦截器需要做如下操作: 创建拦截器类需要实现 HandlerInte ...

  2. Stanford公开课《编译原理》学习笔记（2）递归下降法

    目录 一. Parse阶段 CFG Recursive Descent(递归下降遍历) 二. 递归下降遍历 2.1 预备知识 2.2 多行语句的处理思路 2.3 简易的文法定义 2.4 文法产生式的代 ...

  3. JS调用activeX实现浏览本地文件夹功能 wekit内核只需要<input type="file" id="files" name="files[]" webkitdirectory/>即可，IE内核比较麻烦

    研究了一天,js访问本地文件本身是不可能的,只能借助于插件.植入正题,IE仅支持ActiveX插件. function openDialog() { try { var Message = " ...

  4. jquery 全选，反选

    <?php foreach ($contents as $item) { ?> <tr> <td><input name="qx" val ...

  5. Python爬虫：获取JS动态内容

    经过一段时间的python学习,能写出一些爬虫了.但是,遇到js动态加载的网页就犯了难.于是乎谷歌.百度,发现个好介绍http://www.jianshu.com/p/4fe8bb1ea984 主要就 ...

  6. Spring入门之AOP实践：@Aspect + @Pointcut + @Before / @Around / @After

    零.准备知识 1)AOP相关概念:Aspect.Advice.Join point.Pointcut.Weaving.Target等. ref: https://www.cnblogs.com/zha ...

  7. linux shell 统计当前目录下的文件个数

    shell 统计当前目录下文件个数,使用管道组合命令: ls -1 | wc -l 解释: ls -1 表示一行一个列出文件名. wc -l 表示打印统计的行数. 两个命令通过管道连在一起表示打印列出 ...

  8. Android开发——实现子线程更新UI

    Android中线程按功能分的话,可以分为两个,一个是主线程(UI线程),其他的都是子线程 主线程不能执行那些耗时过长的代码或任务(执行耗时过长的代码会出现应用未响应的提示),所以都是使用子线程来执行 ...

  9. gorilla/mux类库解析

    golang自带的http.SeverMux路由实现简单,本质是一个map[string]Handler,是请求路径与该路径对应的处理函数的映射关系.实现简单功能也比较单一: 不支持正则路由, 这个是 ...

  10. 扛住阿里双十一高并发流量，Sentinel是怎么做到的？

    Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景 本文介绍阿里开源限流熔断方案Sentinel功能.原理.架构.快速入门以及相关框架比较 基本介绍 1 名词解释 服务限流 :当系 ...