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

电话: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).
生产版本是压缩后的文件.
为了方便学习,推荐选择开发版本.
将vue.
js文件下载后,打开文件,在代码开头的注释中查看版本号,如下所示.
/*!
*Vue.
jsv2.
6.
10*(c)2014-2019EvanYou*ReleasedundertheMITLicense.
*/在上述代码中,2.
6.
10就是Vue核心文件的版本号.
当在HTML网页中使用Vue时,使用标签引入vue.
js即可,示例代码如下:上述代码表示引入当前路径下的vue.
js文件.
1.
2.
3git-bash命令行工具在进行Vue开发时,我们经常会使用一些命令,如npm(包管理器)、vue-cli(脚手架),这些命令需要在命令行下使用.
git-bash是git(版本管理器)中提供的一个命令行工具,外观类似于Windows系统内置的cmd命令行工具,但用户体验更友好.
在实际开发中,经常会使用git-bash工具代替cmd.
下面我们就来讲解git-bash的安装步骤.
(1)打开gitforwindows官网,下载git安装包,如图1-3所示.
图1-3git下载网站(2)双击下载后的安装程序,进行安装,如图1-4所示.
北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40006图1-4安装协议(3)单击"Next"按钮,根据提示进行安装,全部使用默认值即可.
(4)安装成功后,启动git-bash,如图1-5所示.
图1-5启动git-bash1.
2.
4Node.
js环境Node.
js是一个基于ChromeV8引擎的JavaScript运行环境,它可以让JavaScript运行在服务器端.
接下来我们就对Node.
js的下载和安装进行详细讲解.
(1)打开Node.
js官方网站,找到Node.
js下载地址,如图1-6所示.
图1-6Node.
js官网北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40007从图1-6中可以看出,Node.
js有两个版本,LTS(LongTermSupport)是提供长期支持的版本,只进行微小的Bug修复且版本稳定,因此有很多用户在使用;Current是当前发布的最新版本,增加了一些新特性,有利于进行新技术的开发使用.
这里选择LTS版本进行下载即可.
(2)双击安装包进行安装,如图1-7所示.
图1-7安装界面(3)安装过程全部使用默认值.
安装完成后,打开git-bash命令行工具,查看Node.
js版本信息,如图1-8所示.
图1-8查看Node.
js版本(4)将Node.
js安装完成后,下面我们通过代码演示HelloWorld程序的编写.
创建C:\vue\chapter01目录,在该目录中创建helloworld.
js文件,编写如下代码:console.
log('HelloWorld')(5)保存文件后,执行如下命令,启动HelloWorld程序:nodehelloworld.
js(6)上述代码执行后,输出结果如图1-9所示.
北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-40008图1-9HelloWorld程序(7)Node.
js还提供了交互式环境REPL,类似Chrome浏览器的控制台,可以在命令行中直接输入JavaScript代码来执行.
在命令行中执行node命令,即可进入交互模式,如图1-10所示.
图1-10REPL交互式环境(8)若要从交互模式中退出,可以输入".
exit"并按Enter键,或者按两次Ctrl+C组合键来退出.
1.
2.
5npm包管理工具npm(Node.
jsPackageManager)是一个Node.
js的包管理工具,用来解决Node.
js代码部署问题.
在安装Node.
js时会自动安装相应的npm版本,不需要单独安装.
使用npm包管理工具可以解决如下场景的需求.
(1)从npm服务器下载别人编写的第三方包到本地使用.
(2)从npm服务器下载并安装别人编写的命令程序到本地使用.
(3)将自己编写的包或命令行程序上传到npm服务器供别人使用.
npm提供了快速操作包的命令,只需要简单命令就可以很方便地对第三方包进行管理,下面列举npm中的常用命令.
npminstall:安装项目所需要的全部包,需要配置package.
json文件.
npmuninstall:卸载指定名称的包.
npminstall包名:安装指定名称的包,后面可以跟参数"-g"表示全局安装,"--save"表示本地安装;npmupdate:更新指定名称的包;npmstart:项目启动;通过CDN方式引入Vue,可以缓解服务器的压力,加快文件的下载速度.
目前,网络上有很多免费的CDN服务器可以使用npmrunbuild:项目构建.
多学一招:由于npm的服务器在国外,使用npm下载软件包的速度非常慢,为了提高下载速度,推荐读者切换成国内的镜像服务器来使用.
以淘宝NPM镜像为例,使用如下命令设置即可切换.
npmconfigsetregistryhttps://registry.
npm.
taobao.
org北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-400091.
2.
6Chrome浏览器和vue-devtools扩展浏览器是开发和调试Web项目的工具,目前市面上主流的浏览器都有自己的优点和缺点,本书选择基于使用量较多的Chrome浏览器进行讲解.
vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用,只需下载官方压缩包,配置Chrome浏览器的扩展程序即可使用.
下面我们简单介绍一下安装流程.
(1)下载vue-devtools-5.
1.
1.
zip压缩包到本地.
(2)将压缩包进行解压,然后在命令行中切换到解压好的vue-devtools-5.
1.
1目录,输入以下命令进行依赖安装:npminstall(3)构建vue-devtools工具插件,执行命令如下.
npmrunbuild(4)将插件添加至chrome浏览器.
单击浏览器地址栏右边的""按钮,在弹出的菜单中选择"更多工具"→"扩展程序",如图1-11所示.
图1-11扩展程序页面在图1-11所示的界面中,单击"加载已解压的扩展程序"按钮,此时会弹出选择框,需要用户选择扩展程序目录.
找到vue-devtools-5.
1.
1/shells/chrome目录,将其添加到扩展程序中.
(5)配置完成后,可以看到当前vue-devtools工具的信息,并在Chrome浏览器窗口的右上角会显示Vue的标识,如图1-12所示.
北京市昌平区建材城西路金燕龙办公楼一层电话:400-618-400010图1-12vue-devtools安装成功界面1.
2.
7HelloWorld案例学习了Vue的几种引用方式后,下面将使用Vue在页面中输出"HelloVue.
js",开启第一个Vue案例的体验之旅.
具体如例1-1所示.
【例1-1】(1)在C:\vue\chapter01目录中创建demo01.
html文件,具体代码如下:12345我是第一个Vue.
js案例6789