1.vue.js前端框架:Vue.js简介

1.1 Vue.js 概述

  • Vue.js 是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是,它只关注视图层(View层),采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅容易上手,还非常容易与其他库或已有项目进行整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue .js 也完全能够为复杂的单页应用提供驱动。

1.1.1 Vue.js 是什么

  • Vue.js 实际上是一个用于开发 Web 前端界面的库,其本身具有响应式编程和组件化的特点。所谓响应式编程,即保持状态和视图的同步。响应式编程允许将相关模型的变化自动反映到视图上,反之亦然。Vue.js 采用的是MVVM(Model-View-ViewModel)的开发模式。与传统的MVC开发模式不同,MVVM 将MVC中的 Controller 改成了ViewModel。在这种模式下,View 的变化会自动更新到 ViewModel,而 ViewModel 的变化也会自动同步到 View 上进行显示。
  • ViewModel 模式的示意图如下图所示:
    1.vue.js前端框架:Vue.js简介_第1张图片
  • 与ReactJS一样,Vue.js同样拥有”一切都是组件“的理念。应用组件化的特点,可以将任意封装好的代码注册成标签,这样就在很大程度上减少了重复开发,提高了开发效率和代码复用性。如果配合Vue.js的周边工具vue-loader,可以将一个组件的HTML、CSS、JavaScript代码都写在一个文件中,这样可以实现模块化的开发。

1.1.2 Vue.js的特性

  • Vue.js的主要特性如下:
  • 轻量级
    相比较AngularJS和ReactJS而言,Vue.js是一个更轻量级的前端库。不但容量非常小,而且没有其它的依赖。
  • 数据绑定
    Vue.js最主要的特点就是双向的数据绑定。在传统的Web项目中,将数据在视图层展示出来后,如果需要再次修改视图,需要通过获取DOM的方法进行修改,这样才能维持数据和视图的一致。而Vue.js是一个响应式的数据绑定系统,在建立绑定后,DOM将和Vue对象中的数据保持同步,这样就无须手动获取DOM的值再同步到 js中。
  • 应用指令
    同AngularJS一样,Vue.js也提供了指令这一概念。指令用于在表达式的值发生变化时,将某些行为应用到绑定的DOM上,通过对应表达式值的变化就可以修改对应的DOM。
  • 插件化开发
    与AngularJS类似,Vue,js也可以用来开发一个完整的单页应用。在Vue.js的核心库中并不包含路由、Ajax等功能,但是可以非常方便地加载对应插件来实现这样的功能。例如,vue-router插件提供了路由管理的功能,vue-resource插件提供了数据请求的功能。

2.1 Vue.js的安装

2.1.1 直接下载并使用 script 标签引入

  • Vue.js官网:https://cn.vuejs.org/v2/guide/
  • 在Vue.js的官方网站中可以直接下载vue.js文件并使用 script标签引入。
    1、下载Vue.js
    Vue.js是一个开源的库,可以从它的官方网站中下载。下面介绍具体的下载步骤:
    (1)打开Vue.js的官方网站,进入到Vue.js的下载页面,找到如下图1.2所示的内容。
    1.vue.js前端框架:Vue.js简介_第2张图片
    (2)根据开发者的实际情况选择不同的版本进行下载。这里以下载开发版本为例,在”开发版本“按钮上单击鼠标右键,如下图1.3所示。
    1.vue.js前端框架:Vue.js简介_第3张图片
    (3)在弹出的快捷菜单中单击“连接另存为”选项,弹出下载对话框,如下图1.4所示,单击对话框中的“保存”按钮,将Vue.js文件下载到本地计算机上。1.vue.js前端框架:Vue.js简介_第4张图片此时下载的文件为完整不压缩的开发版本。如果在开发环境下,推荐使用该版本,因为该版本中包含所有常见错误相关的警告。如果在生产环境下,推荐使用压缩后的生产版本,因为使用生产版本可以带来比开发环境下更快的速度体验。
  • 引入Vue.js
    将Vue.js下载到本地计算机后,还需要在项目中引用Vue.js。即将下载后的vue.js文件放置到项目的指定文件夹中。通常文件放置在JS文件夹中,然后在需要应用vue.js文件的页面中使用下面的语句,将其引入到文件中。
<script type="text/javascript" src="JS/vue.js"></script>

注意:引入Vue.js的 script 标签,必须放在所有的自定义脚本文件的script 之前,否则在自定义的脚本代码中应用步到Vue.js。

2.1.2 使用CDN方法

  • 在项目中使用Vue.js,还可以采用引用外部CDN文件的方式。在项目中直接通过 script 标签加载CDN文件,通过CDN文件引用Vue.js的代码如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>

注意:为了防止出现外部CDN文件不可用的情况,还是建议用户将Vue.js下载到本地计算机中。

2.1.3 使用NPM方法

  • 在使用Vue.js构建大型应用时,推荐使用NPM方法进行安装,执行命令如下:
npm install vue

注意:使用NPM方法安装Vue.js需要在计算机中安装node.js。
node;js官网:https://nodejs.org/en/,通过node.js官网下载之后,傻瓜式安装即可。

3.1 前端框架开发工具

  • 利用Vue.js进行前端框架开发的常用工具有如下几个:WebStorm、IDEA、Vscode

  • 前端框架开发常用的工具下载:
    (1)WebStorm官网:https://www.jetbrains.com/webstorm/
    (2)IDEA官网:https://www.jetbrains.com/idea/
    (3)Vscode官网:https://vscode.en.softonic.com/

  • WebStorm和IDEA在官网上下载安装之后,试用期为30天,试用期之后有三种方式进行激活,个人建议使用注册码激活,注册码免费激活微信群在网上便可以找到。不过注册码不太稳定,可以去淘宝买一个注册码,WebStorm和IDEA都可以使用该注册码。

备注:后期继续跟进Vue.js前端框架:Vue.js的基础特性,希望大家多多支持和关注。

你可能感兴趣的:(Vue.js入门知识,vue,java,javascript,html,前端)