北京市昌平区建材城西路金燕龙办公楼一层

电话:400-618-40001第1章Vue基础入门Vue.
js(以下简称Vue)是前端的流行框架之一,与Angular和React相比,Vue框架在实现上更容易理解,上手更快.
使用Vue开发不仅提高了开发效率,也改善了开发体验.
因此,熟练掌握Vue框架成为前端开发者的必备技能.
本章将会介绍Vue框架的基本概念,并对Vue的使用进行讲解.
【教学导航】学习目标1.
了解Vue的核心设计思想2.
掌握Vue开发环境搭建3.
掌握Vue开发和调试工具的使用4.
掌握Vue项目的创建教学方式本章主要以概念讲解、操作实践为主重点知识1.
掌握Vue的开发环境搭建2.
了解Vue的核心设计思想关键词MVVM设计思想、环境搭建、开发工具的使用、调试工具的使用1.
1初识Vue1.
1.
1前端技术的发展Web前端使用HTML、CSS和JavaScript作为基础语言,它们分别用来实现网页的结构、样式和行为.
HTML主要用来编写网页的结构,例如表示超链接.
CSS样式包括颜色、大小、字体等,实现漂亮、布局合理的页面效果.
JavaScript的功能主要包括实现页面逻辑、行为、动作等,用来动态操作元素的属性,主要是为页面提供交互效果,实现更好的用户体验.
在构建大型交互式项目时,开发者需要编写大量的JavaScript代码来操作DOM(文档对象模型),并处理浏览器的兼容问题,代码逻辑越来越烦琐.
为了提高开发效率,使用JavaScript语言编写的jQuery库出现了.
jQuery的核心理念是开发者只需写很少的代码,北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40002就可以实现更多的功能.
它通过对JavaScript代码的封装,使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便,有效地提高了项目开发效率.
随着移动端技术的发展,前端技术被逐渐应用到移动端开发中,用来构建单页应用.

单页应用是前端开发的一种形式,在切换页面的时候,不会刷新整个页面,而是通过Ajax异步加载新的数据,改变页面的内容.
为了更方便地开发这类复杂的应用,市面上出现了Angular、React、Vue等框架.
Vue通过虚拟DOM技术来减少对DOM的直接操作;通过尽可能简单的API来实现响应的数据绑定,支持单向和双向数据绑定.
组件化的特性提高了开发效率、使代码更容易复用,提高了项目的可维护性,便于团队的协同开发.

1.
1.
2什么是VueVue(读音/Vju/,类似于View)是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用.
其他大型框架往往一开始就对项目的技术方案进行强制性的要求,而Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,也可以将Vue引入到一个现有的项目中.
另一方面,当Vue与现代化的工具链以及各种支持类库结合使用时,也完全能够为复杂的单页应用提供驱动.
工具链是指在前端开发过程中用到的一系列工具,例如,使用脚手架工具创建应用,使用依赖管理工具安装依赖包,以及使用构建工具进行代码编译等.

Vue的数据驱动是通过MVVM(Model-View-ViewModel)模式来实现的,其基本工作原理如图1-1所示.
图1-1Vue的基本工作原理从图1-1中可以看出,MVVM主要包含3个部分,分别是Model、View和ViewModel.
Model指的是数据部分,主要负责业务数据;View指的是视图部分,即DOM元素,负责视图的处理.
ViewModel是连接视图与数据的数据模型,负责监听Model或者View的修改.
在MVVM中,数据(Model)和视图(View)是不能直接通信的,视图模型(ViewModel)就相当于一个观察者,监控着双方的动作,并及时通知进行相应操作.
当Model发生变化的时候,ViewModel能够监听到这种变化,并及时通知View做出相应的修改.
反之,当北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40003View发生变化时,ViewModel监听到变化后,通知Model进行修改,实现了视图与模型的互相解耦.
1.
1.
3Vue的优势目前市场三大前端主流框架分别是Angular、React和Vue.
js.
Vue之所以被开发者青睐,主要是Vue秉承了Angular和React框架两者的优势,并且Vue的代码简洁、上手容易,在市场上也得到大量应用.
下面将对Vue的特性进行简单介绍.
1.
轻量级Angular的学习成本高,使用起来比较复杂,而Vue相对简单、直接,所以Vue使用起来更加友好.
2.
数据绑定Vue是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,这也算是Vue的精髓之处,尤其是在进行表单处理时,Vue的双向数据绑定非常方便.
3.
指令指令主要包括内置指令和自定义指令,以"v-"开头,作用于HTML元素.
指令提供了一些特殊的特性,将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为.

例如,v-bind动态绑定指令、v-if条件渲染指令、v-for列表渲染指令等.
4.
插件插件用于对Vue框架功能进行扩展,通过MyPlugin.
install完成插件的编写,简单配置后就可以全局使用.
常用的扩展插件有vue-router、Vuex等.
Vue很多特性与Angular和React有着相同的地方,但是也有着性能方面的差别.
Vue使用基于依赖追踪的观察系统并且使用异步队列更新,所有的数据都是独立触发的,提高了数据处理能力.
React和Vue的中心思想是一切都是组件,组件之间可以实现嵌套.
React采用了特殊的JSX语法,Vue中也推崇编写以*.
vue后缀命名的文件格式,对文件内容都有一些规定,两者需要编译后使用.
值得一提的是,Vue在模板中提供了指令,过滤器等,可以非常方便和快捷的操作DOM.
推荐将Vue使用在具有复杂交互逻辑的前端应用中,以确保用户的体验效果.
北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-400041.
2Vue开发环境为了快速上手Vue项目开发,本节将对Vue的开发环境以及常用工具的使用进行讲解,并通过HelloWorld案例演示Vue的基本使用.
1.
2.
1VisualStudioCode编辑器VisualStudioCode(VSCode)是由微软公司推出的一款免费、开源的编辑器,推出之后便很快流行起来,深受开发者的青睐.
作为前端开发人员来说,一个强大的编辑器可以让开发变得简单、便捷、高效.
本书选择基于VSCode编辑器进行讲解.
VSCode编辑器具有如下特点.
(1)轻巧极速,占用系统资源较少.
(2)具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能.

(3)跨平台.
不同的开发人员为了工作需要,会选择不同平台来进行项目开发工作,这样就一定程度上限制了编辑器的使用范围.
VSCode编辑器不仅跨平台(支持Mac、Windows以及Linux),使用起来也非常简单.
(4)主题界面的设计比较人性化.
例如,可以快速查找文件直接进行开发,可以通过分屏显示代码,主题颜色可以进行自定义设置(默认是黑色),也可以快速查看最近打开的项目文件并查看项目文件结构.
(5)提供了丰富的插件.
VSCode提供了插件扩展功能,用户根据需要自行下载安装,只需在安装配置成功之后,重新启动编辑器,就可以使用此插件提供的功能.

1.
2.
2Vue的下载和引入Vue目前的最新版本是2.
x,从Vue官方网站可以获取下载地址,如图1-2所示.
图1-2获取Vue北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40005从图1-2中可以看出,Vue的核心文件有两种版本,分别是开发版本(vue.
js)和生产版本(vue.
min.
js).
生产版本是压缩后的文件.
为了方便学习,推荐选择开发版本.