Vue.js入门与商城开发实战【1.0】（vue.js app开发）

第1章 Vue.js入门

本章主要针对没有Vue.js 基础的初学者，介绍如何开始学习Vue.js 开发以及如何创建你的第一个Vue.js 程序页面。重点包括Vue.js 示例和分析入门、使用哪些开发工具以及如何安装Vue.js。

1.1　Vue.js简介

Vue.js（发音为/vju:/，类似于view）是一个用于构建用户界面的渐进式框架。

Vue 只关注视图层，采用自下而上的增量开发设计。 Vue 的目标是通过尽可能简单的API 实现响应式数据绑定和合成视图组件。 Vue 非常容易学习。本书基于Vue 2.x版本。 在阅读本书之前，您应该了解以下知识： ·HTML ·CSS ·JavaScript 介绍性示例这里，我们首先展示一个介绍性示例的代码和渲染。下一部分提供创建此页面的分步说明。 效果示例如图1-1 所示。

代码示例如下：

!DOCTYPE html

html

头

元字符集=\’utf-8\’

开始使用titleVue，您的第一个Vue 页面/标题

!–参考网上的vue.js代码稍后我们会讲解如何引用本地代码。

vue.js 代码–

脚本src=\’https://unpkg.com/vue/dist/vue.js\’

/剧本

/头

身体

!– 显示代码–

div id=\’应用程序\’

!– 显示变量消息的内容。换句话说，显示“Hello”。

Vue.js！”–

p{{ 消息}}/p/div

!–脚本代码–

脚本

新Vue({

el: \’#app\’,

数据： {

message: \’你好，Vue.js！\’

}

})

/剧本

/身体

/html

1.2 Vue.js编辑器

Vue.js 页面是常规HTML 页面，因此您可以使用任何常规HTML 编辑器来创建Vue.js 程序页面。当然，你也可以使用WebStorm、Eclipse、PhpStorm、Vscode、HBuider等复杂的工具。由于本章主要针对初学者，我们将使用记事本和Dreamweaver作为最简单的。 这里推荐Dreamweaver 2019。当你用这个工具编写代码时，你可以直接看到代码执行的结果，同时你还可以编写布局和样式。

1.2.1 编辑器类型

您可以使用专业的HTML 编辑器进行编辑。我们推荐一些常用的编辑器。Dreamweaver：目前推荐版本为2019或2020。 ·Notepad++：https://notepad-plus-plus.org/。 ·Sublime Text：http://www.sublimetext.com/。 ·VS代码：https://code.visualstudio.com/。 请从上述软件的官方网站下载兼容软件，并按照说明进行安装。 所有操作系统都带有一个简单的文本编辑器。 Windows 用户可以使用记事本。 ·Linux 用户可以选择多种不同的文本编辑器，包括vi、vim 和emacs。 ·Mac 用户可以使用OS X 中预装的TextEdit。 下面介绍如何使用系统的Notepad++和Dreamweaver工具创建Vue.js程序页面。其他两个工具的步骤类似。

1.2.2 使用Notepad建立第一个Vue.js页面

我们将使用Windows 7 系统和附带的记事本创建第一个Vue.js 页面。 1) 单击屏幕左下角的“开始”图标，如图1-2所示。

2) 单击“所有程序”，找到“附件”，如图1-3所示。 3) 单击“附件”，找到“记事本”，如图1-4所示。 4）打开记事本后，将上一节列出的Vue.je代码复制到记事本中。结果如图1-5所示。 5) 单击“文件”，然后单击“保存”（或按快捷键Ctrl+S）。文件名为“First Vue Page.html”，如图1-6所示。结果应如图1-7 所示。

6) 单击保存的“First Vue Page.html”，您的计算机将在默认浏览器中打开。结果如图1-8所示。

您还可以选择文件，右键单击，选择打开方式，然后选择其他浏览器（我们将选择Google Chrome）。结果如图1-9和图1-10所示。

图1-10 打开Google Chrome的效果

1.2.3 使用Dreamweaver建立第一个Vue.js页面

您可以从官方网站下载Dreamweaver。另外，下载Dreamweaver 后，请按照说明进行操作。 按照以下步骤创建您的第一个Vue.js 程序页面。 1）打开Dreamweaver，您将看到如图1-11所示的效果。

2) 单击“文件”，选择“新建”，如图1-12所示。

3) 输入标题，单击“创建”按钮，如图1-13所示。

4) 将代码内容复制到Dreamweaver。结果如图1-14所示。

5) 单击“文件”，选择“保存”，如图1-15所示。输入文件名后，单击屏幕下方的“保存”按钮，如图1-16所示。

提示请参考1.2.2 节的说明。 1.3 安装Vue.js IE 8 或更早版本不支持Vue.js，因为它使用无法在IE 8 中模拟的ECMAScript 5 功能。 Vue.js 支持所有ECMAScript 5 兼容的浏览器。本节介绍三种安装方法： · 使用CDN方式。 ·下载官方Vue.js框架。NPM方法。

1.3.1 使用CDN方法

下面推荐一些比较稳定的CDN。目前，我们建议在本地下载它们（即使网络断开也可以在本地使用）。Staticfile CDN（国内）：https://cdn.staticfile.org/vue/2.2.2/vue.min.js，加载如下。

!DOCTYPE html

html

头

元字符集=\’utf-8\’

Title Vue入门实战讲解- 黄菊华教授/Title

!–加载Staticfile CDN提供的vue.js框架–

脚本

src=\’https://cdn.staticfile.org/vue/2.2.2/vue.m

在.js\’/脚本中

/头

身体

div id=\’应用程序\’

p{{消息}}/p

/div

脚本

新Vue({el: \’#app\’,

数据： {

message: \’你好，Vue.js！\’

}

})

/剧本

/身体

/html

unpkg：https://unpkg.com/vue/dist/vue.js。与NPM发布的最新版本保持一致，加载如下： script src=\’https://unpkg.com/vue/dist/vue.js\’ /script ·cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，加载如下。脚本src=\’https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js\’/script

1.3.2 下载官方Vue.js框架

您可以直接从Vue.js 官方网站下载vue.min.js 并使用script 标签进行安装。下载地址为https://vuejs.org/js/vue.min.js。本书提供的源代码还包括一个Vue.js 文件。

1.3.3 NPM方法

由于npm安装速度较慢，本书使用的是淘宝镜像及其命令cnpm。 NPM 版本必须为3.0 或更高版本。如果您低于此版本，则需要升级代码。

# 显示版本

$ npm -v

6.13.4

#npm 升级

cnpm 安装npm -g

# 升级或安装cnpm

npm 安装cnpm -g

如果您想使用Vue.js 构建大型应用程序，我们建议使用NPM 安装。

# 最新稳定版本

$ cnpm 安装vue

命令行工具

Vue.js 提供了官方的命令行工具，您可以使用它来快速构建大型单页应用程序。示例代码如下。

# 全局安装vue-cli

$ cnpm install –global vue-cli

#基于Webpack模板创建一个新项目

$ vue init webpack 我的项目

# 这里需要一些配置。默认情况下，只需按Enter 键即可。

这允许Vue 2.x 版本

模板。

对于Vue 1.x use: vue init webpack#1.0 myproject

项目名称我的项目

项目描述Vue.js 项目

作者runoob test@runoob.com

独立构建Vue

您想使用ESLint 来检查您的代码吗？

?选择ESLint 预设标准

？使用Karma + Mocha 设置单元测试？

• 使用Nightwatch 设置e2e 测试？

vue-cli · 生成“我的项目”。

: 开始

cd我的项目

npm安装

npm run devDocumentation 位于https://vuejstemplates.github.io/webpack。

进入项目，安装并运行。

$ cd 我的项目

$ cnpm 安装

$ cnpm rundev

DONE 4388ms 编译成功

在http://localhost:8080 上收听

执行上述命令成功后访问

http://localhost:8080/的输出如图1-17 所示。

请注意，Vue.js 不支持IE 8 或更早版本。

1.4 Vue.js起步

每个Vue 应用程序都必须实例化并实现Vue。语法格式为： var vm=new Vue({ //options }) 让我们用一个例子来理解我们在Vue 构造函数中需要什么。

1.4.1 Vue中变量的显示和自定义方法的使用

本节介绍自定义方法（函数）中定义和显示变量以及返回变量值。 我在数据代码块中定义了两个变量site（网站名称）和url（网站URL）。它们使用{{}} 语法格式直接显示在页面上。另外，该方法的代码块定义了该方法的细节，用于返回变量site（网站名称）和字符串内容，并在要显示的页面上调用。示例代码如下。

!DOCTYPE html

html

头

元字符集=\’utf-8\’

titleVue.js 开始/标题

!– 加载本地vue.js框架–

脚本src=\’vue2.2.2.min.js\’/script

/头

身体

!–div 定义代码块的ID 值。这里定义的值是app，Vue稍后会使用这个值——

div id=\’应用程序\’

!– 显示变量site的值：“淘宝”–

h2 网站名称：{{site}}/h2

!– 显示变量URL : www.taobao.com 的值–

h3 网站网址：{{url}}/h3

!–显示函数详情返回值：“淘宝-购物日”

大学教师！ ”——

h4最终结果：{{details()}}/h4

/div

脚本类型=\’文本/javascript\’

var vm=新的Vue({

el: \’#app\’, //app为上一个div代码块的ID

值之间用“#”符号分隔

//数据区定义属性/变量的值

数据： {

site: \’淘宝\’, //定义变量site的值

url: \’www.taobao.com\’ //定义变量URL

价值

},

//定义写在方法区的函数

方法：{

我自定义了一个名为//details 的函数

详情： 函数()

{

//调用该函数返回以下值

返回此网站+ \’ – 购物日

大学教师！ \’;

}}

})

/剧本

/身体

/html

可以看到Vue构造函数有一个el参数，它是DOM元素的ID。在上面的示例中，id 是app，在div 元素内它看起来像这样： div id=\’app\’/div 这意味着所有后续更改都将在上面指定的div 内进行，而div 之外的任何内容都不会受到影响。接下来，我们将了解如何定义数据对象。 ·数据用于定义属性。在此示例中，有两个属性：site 和url。 – 方法用于定义函数，可以通过return返回函数的值。 ·{{}}用于打印对象属性和函数返回值。创建Vue 实例时，该数据对象中的所有属性都会添加到Vue 的响应式系统中。当这些属性的值改变时，HTML视图也会随之改变。

!–div 定义代码块的ID 值。这里定义的值是app后面是Vue。

该值将被使用——

div id=\’应用程序\’

!–显示变量站点“淘宝”的值–

h2 网站名称：{{site}}/h2

!– 显示变量URL的值： \”www.taabao.com\”–

h3 网站网址：{{url}}/h3

!–显示函数详情返回值：“淘宝-购物日”

大学教师！ ”–h4 最终结果：{{details()}}/h4

/div

1.4.2 data内容的另外一种定义方式

让我们通过一个例子来学习另一种定义数据内容的方法。此示例的步骤是：

1）在带有内容的脚本代码块中定义一个对象mydata。

如下：

var mydata={ site: \’淘宝\’, url:

“www.淘宝网”}

同时在初始化Vue时将其赋值给数据。这是代码：

var vm=新的Vue({

el: \’#app\’,

//app中与“#”绑定的值为上一个div代码块的ID

//数据区域定义中属性/变量的值是一个数据对象

数据： 我的数据

})

2) 如果您在Vue 实例中更改站点内容，则HTML 视图的内容也会更改。

vm.site=\’淘宝-改为xx.com\’;

示例代码如下。

!DOCTYPE html

html

头

元字符集=\’utf-8\’

titleVue.js 概述- 定义数据内容的替代方法

/标题

!– 加载本地vue.js框架–

脚本src=\’vue2.2.2.min.js\’/script

/头

身体

!–div 定义代码块的ID 值。这里定义的值是app后面是Vue。

该值将被使用——

div id=\’应用程序\’

!–显示变量站点“淘宝”的值–

h2 网站名称：{{site}}/h2

!– 显示变量URL的值： \”www.taabao.com\”–

h3 网站网址：{{url}}/h3

/div

脚本类型=\’文本/javascript\’

//数据对象

var mydata={ site: \’淘宝\’, url:\’www.taobao.com\’}

var vm=新的Vue({

el: \’#app\’, //app是之前的div代码

块ID值以\’#\’分隔

//数据区定义中属性或变量的值为数字

数据对象

数据： 我的数据

})

//它们引用同一个对象

document.write(vm.site===mydata.site);

//返回值true

文档.write(\’br\’);

//属性设置也会影响原始数据

vm.site=\’淘宝-改为xx.com\’;

document.write(mydata.site + \’br\’)

/剧本

/身体

/html

效果如图1-19所示。

以上#Vue.js介绍及实战商城开发[1.0]相关内容摘自网络，仅供大家参考。相关信息请参见官方公告。