Vue.js入门与商城开发实战【1.0】

最新推荐文章于 2024-10-16 18:35:07 发布

BinaryStarXin

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量1k

点赞数 10

分类专栏： VUE技术分享文章标签： vue.js 前端 javascript Vue.js编辑器 Vue.js起步下载官方Vue.js框架前端开发

本文链接：https://blog.csdn.net/qq_43416206/article/details/139901208

版权

VUE技术分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第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>
<head>
<meta charset="utf-8">
<title>Vue入门第一个vue页面</title>
<!--引用互联网中vue.js的代码，后面会讲解如何引用本地
vue.js的代码-->
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
</head>
<body>
<!--显示代码-->
<div id="app">
<!--显示变量message的内容，也就是显示“Hello
Vue.js!”-->
<p>{{ message }}</p></div>
<!--脚本代码-->
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</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 Code：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系统以及所带的记事本（Notepad）来建立第一个Vue.js页面。 1）在屏幕左下角点击开始图标，如图1-2所示。

2）点击“所有程序”，找到“附件”，如图1-3 所示。3）点击“附件”，找到“记事本”，如图1-4所示。 4）打开“记事本”后，复制上节列出的Vue.je代码到记事本，效果如图1-5所示。 5）点击“文件”，然后点击“保存”（或者按快捷键Ctrl+S），文件名为“第一个Vue页面.html”，如图1-6所示；按内容填写即可，效果如图1-7所示。

6）点击我们刚才保存的“第一个Vue页面.html”，电脑会用默认浏览器打开，效果如图1-8所示。

我们也可以选中该文件，右击，选择“打开方式”，选择其他浏览器（我们这里选择谷歌浏览器），效果如图1-9和图1-10所示。

图1-10 谷歌浏览器打开效果图

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

可以从官网下载Dreamweaver，也可查看本书相关网站上对应的安装视频，下载Dreamweaver后，按照提示操作即可。下面介绍新建第一个Vue.js程序页面的方法，步骤如下。 1）打开Dreamweaver，效果如图1-11所示。

2）点击“文件（F）”，选择“新建（N）”，如图1-12所示。

3）填写标题，点击“创建”按钮，如图1-13所示。

4）复制代码内容到Dreamweaver，效果如图1-14所示。

5）点击“文件（F）”，选择“保存（S）”，如图1-15所示。填写文件名后点击屏幕下方的“保存” 按钮，如图1-16所示。

提示按1.2.2节中所述方式浏览即可。1.3 Vue.js安装 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>
<head>
<meta charset="utf-8">
<title>Vue入门实战讲解-黄菊华老师</title>
<!--加载Staticfile CDN提供的vue.js框架-->
<script
src="https://cdn.staticfile.org/vue/2.2.2/vue.m
in.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</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.j s，加载如下。 <script 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 install npm -g
# 升级或安装 cnpm
npm install cnpm -g
在用Vue.js构建大型应用时推荐使用NPM安装：
# 最新稳定版
$ cnpm install vue

命令行工具
Vue.js提供了官方命令行工具，可用于快速搭建大型单页应用，示例代码如下

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认按Enter键即可
This will install Vue 2.x version of the
template.
For Vue 1.x use: vue init webpack#1.0 myproject
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run devDocumentation can be found at https://vuejstemplates.github.io/webpack
进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080

成功执行以上命令后访问
http://localhost:8080/，输出结果如图1-17所示。
注意 Vue.js不支持IE 8及其以下IE版本。

1.4 Vue.js起步

每个Vue应用都需要通过实例化Vue来实现。语法格式如下： var vm = new Vue({ // 选项 }) 下面我们通过实例来了解Vue构造器中需要哪些内容。

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

本节讲解变量的定义和显示、在自定义方法（函数）中返回变量的值。我们在data代码块中定义了两个变量site（网站名称）和url（网站网址），直接在页面使用{{}}语法格式来显示。此外，在methods代码块中定义了一个方法details，使用方法来返回变量site（网站名称）和字符串的内容，在页面中调用该方法来显示。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 起步</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--显示变量site的值：“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值: www.taobao.com-->
<h3>网站网址：{{url}}</h3>
<!--显示函数details的返回值：“淘宝网 - 购物的天
堂！”-->
<h4>最终结果：{{details()}}</h4>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app', //app为前面div代码块的id的
值，通过“#”号绑定
//data区域定义属性/变量的值
data: {
site: "淘宝网", //定义变量site的值
url: "www.taobao.com" //定义变量url
的值
},
//在methods区域中定义自己所写的函数
methods: {
//自定义了一个函数，名称为details
details: function()
{
//调用该函数的时候，会返回下面的值
return this.site + " - 购物的天
堂！";
}}
})
</script>
</body>
</html>

可以看到在Vue构造器中有一个el参数，它是DOM 元素中的id。在上面实例中id为app，在div元素中： <div id = "app"></div> 这意味着我们接下来的改动全部在以上指定的div 内，div外部不受影响。接下来我们看看如何定义数据对象。 ·data用于定义属性，实例中有两个属性：site、 url。 ·methods用于定义函数，可以通过return来返回函数值。 ·{{}}用于输出对象属性和函数返回值。当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也将产生相应的变化：

<!--定义div代码块的id的值，这里定义的值为app，后面Vue
会使用该值-->
<div id="app">
<!--显示变量site的值“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值：“www.taobao.com”-->
<h3>网站网址：{{url}}</h3>
<!--显示函数details的返回值：“淘宝网 - 购物的天
堂！”--><h4>最终结果：{{details()}}</h4>
</div>

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

下面我们通过实例来了解一下data内容的另一种定义方式，该实例的步骤如下：
1）在script代码块中定义一个对象mydata，内容
如下：
var mydata = { site: "淘宝网", url:
"www.taobao.com"}
同时在初始化Vue的时候赋值给data，代码如下：
var vm = new Vue({

el: '#app',
值，通过“#”绑定

//app为前面div代码块的id的

//data区域定义属性/变量的值，是我们的数据对象
data:mydata
})

2）改变Vue实例中site的内容，html视图的内容也会改变：
vm.site = "淘宝网-变更为-xx网";
示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 起步-data内容的另外一种定义方式
</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue
会使用该值-->
<div id="app">
<!--显示变量site的值“淘宝网”-->
<h2>网站名称：{{site}}</h2>
<!--显示变量url的值：“www.taobao.com”-->
<h3>网站网址：{{url}}</h3>
</div>
<script type="text/javascript">
// 我们的数据对象
var mydata = { site: "淘宝网", url:"www.taobao.com"}
var vm = new Vue({
el: '#app', //app为前面div代码
块的id的值，通过“#”绑定
//data区域定义属性或变量的值，是我们的数
据对象
data:mydata
})
// 它们引用相同的对象
document.write(vm.site === mydata.site);
// 返回值true
document.write("<br>");
// 设置属性也会影响到原始数据
vm.site = "淘宝网-变更为-xx网";
document.write(mydata.site + "<br>")
</script>
</body>
</html>

效果如图1-19所示。