杭州杭州网站建设公司,软件下载网站开发 论文,php网站开发学什么,重庆电子商务网站建设前端随笔 1#xff1a;HTML、JavaScript和Vue
最近因为工作需要#xff0c;需要接触一些前端的东西。之前虽然大体上了解过HTML、CSS和JavaScript#xff0c;也知道HTML定义了内容、CSS定义了样式、JavaScript定义了行为#xff0c;但是却没有详细的学习过前端三件套的细节…
前端随笔 1HTML、JavaScript和Vue
最近因为工作需要需要接触一些前端的东西。之前虽然大体上了解过HTML、CSS和JavaScript也知道HTML定义了内容、CSS定义了样式、JavaScript定义了行为但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用Vue并且想到未来的工作中使用Vue能够更好地展示成功所以认真的学习了一些前端的知识。
因此特地准备写一些文章将自己的一些心得和感悟记录下来作为学习的见证和方便未来使用。
一、HTML
1. HTML语言
HTML全称是HyperText Markup Language即超文本标记语言一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是一组段落、一个重点信息列表、也可以含有图片和数据表。
需要注意的是HTML不是一门编程语言只是一种用于定义内容和结构的标记语言。之所以称为标记语言是因为HTML由一系列的标签Tag组成这些标签可以用来包围不同部分的内容使其以某种方式呈现或者工作。
例如将一段文字设置为斜体 需要注意的是HTML的设计初衷是为了能够在不同的计算机系统和浏览器之间共享文档并以一种易于阅读和编写的方式呈现信息。因此需要经过浏览器解析才能看到具体效果。
2. HTML标签
HTML标签是用于定义网页结构和内容的元素。它们由尖括号包围并以标签名开始和结束例如tagnamecontent/tagname。标签通常以成对的形式出现其中包括一个开始标签和一个结束标签中间是标签的内容。 不同的标签有不同的功能例如
p标签用于定义段落h1到h6标签用于定义标题a标签用于创建链接等等……
被不同的标签包裹的文字将会产生不同的效果例如超链接、粗体、斜体、……。而且HTML标签可以嵌套在彼此之内形成层次结构从而为一段文字设置多个属性例如加粗斜体以构建复杂的网页布局和内容。
此外HTML标签还可以具有属性包含了关于元素的一些额外信息这些信息本身不应显现在内容中。例如下面的例子中class 是属性名称editor-note 是属性的值。class 属性可为元素提供一个标识名称以便进一步为元素指定样式即元素的外观例如字号、字体、……或进行其他操作时使用。 最后除了开始和结束标签有些标签也可以是自闭合的即在开始标签中就结束。直观的理解就是标签只有一个。例如
img标签用于插入图像br标签用于插入换行符等…… 需要注意的是HTML标签的属性和被包裹的内容是两种截然不同的文本。稍后再Vue中我们还会强调这一点。 3. HTML文档
使用HTML语言编写的文档称为HTML文档后缀名一般保存为.html、.htm、…… 前面介绍过HTML的设计初衷是为了能够在不同的计算机系统和浏览器之间共享文档并以一种易于阅读和编写的方式呈现信息。因此需要经过浏览器解析才能看到具体效果。因此HTML自然需要通过浏览器打开。 通过文本编辑器打开的HTML文档只能看到其中的字符 一般来说
编写HTML文档的时候我们一般是通过文本编辑器打开HTML文档以方便我们编写HTML源代码调试HTML文档的时候则是通过浏览器打开以方便我们查看HTML文档的内容是否正确显示
最后在编写完HTML文档之后我们将HTML文档发布给用户的时候即需要阅读内容的时候则是通过浏览器打开从而能够浏览到具有丰富格式的网页。
最后这里只是对HTML进行简单的介绍还有很多内容没有介绍例如
HTML的所有标签HTML文档的结构……
因为这只是随笔我觉得这些内容应该是在编程教学书、教学视频中的并不是我这个随笔该讲解的。所以就直接略过了。
二、JavaScript
JavaScript 堪称世界上被人误解最深的编程语言。虽然常被嘲为“玩具语言”但在它看似简洁的外衣下还隐藏着强大的语言特性。JavaScript 目前广泛应用于众多知名应用中对于网页和移动开发者来说深入理解 JavaScript 就尤为必要。
1. 历史
我们有必要先从这门语言的历史谈起。在 1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript随后在 1996 年初JavaScript 首先被应用于 Netscape 2 浏览器上。
最初的 JavaScript 名为 LiveScript但是当时社交媒体在铺天盖地的宣传 Sun Microsystem 公司所开发的 Java 语言所以为了蹭热度 NetScape 公司将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后人们对 Java 和 JavaScript混淆产生的根源。 但是事实上JavaScript原先的名字LiveScript更能显示这门语言的能力JavaScript让网页具有动态特性Live 具体来说HTML编写的网页是静态的用户只能看到一个页面。可是很多时候我们试图和网页进行交互例如我们会在输入账号和密码之后点击一个登录按钮而后我们就能在网页上浏览淘宝、将商品加入购物车。 点击登录按钮、添加购物车等等这些功能是动态地意味着需要一定的动作的执行但是HTML只定义了网页看起来是什么样的正是JavaScript让静态的网页动了起来。 几个月后Microsoft 随 IE 3 发布推出了一个与之基本兼容的语言 JScript。又过了几个月Netscape 将 JavaScript 提交至 Ecma International一个欧洲标准化组织ECMAScript 标准第一版便在 1997 年诞生了。ECMAScript标准中定义了一个脚本语言应该具有的语言特性和能力而JavaScript则是这个标准的具体实现。
我们可以简单的理解为ECMAScript中规定了JavaScript这门语言的语法。
随后在 1999 年以 ECMAScript 第三版的形式进行了更新从那之后这个标准没有发生过大的改动。由于委员会在语言特性的讨论上发生分歧ECMAScript 第四版尚未推出便被废除但随后于 2009 年 12 月发布的 ECMAScript 第五版引入了第四版草案加入的许多特性。第六版标准已经于 2015 年 6 月发布。
2. 运行时环境/宿主环境
一般来说各种语言编写的程序需要一个运行时环境或者说宿主环境。只有在宿主环境下程序才能够正确运行并且产生功能。例如
C/C的运行时环境/宿主环境就是操作系统在嵌入式开发的基础下C/C的运行时环境也可以是没有操作系统的裸机Python的运行时环境就是Python解释器Java的运行时环境是Java虚拟机……
和Python类似JavaScript是一个在宿主环境host environment下运行的脚本语言。
但是和其他语言都具备输入输出能力不同JavaScript中没有输入或输出的概念。在任何与外界沟通的机制都是由宿主环境提供的。例如JavaScript读写文件是通过浏览器的File API来读取和写入文件的。
JavaScript有多种宿主环境。浏览器是最常见的宿主环境但在非常多的其他程序中也包含 JavaScript 解释器如 Adobe Acrobat、Adobe Photoshop、SVG 图像、Yahoo的 Widget 引擎Node.js 之类的服务器端环境NoSQL 数据库如开源的 Apache CouchDB、嵌入式计算机以及包括 GNOME注GNU/Linux 上最流行的 GUI 之一在内的桌面环境等等。
这些宿主环境都能够解析JavaScript语言编写程序而后执行指定的功能。
3. JavaScript的语法特性
JavaScript 是一种多范式的动态语言。它包含类型、运算符、标准内置built-in对象和方法。它的语法来源于 Java 和 C所以这两种语言的许多语法特性同样适用于 JavaScript。
JavaScript是一个支持面向对象编程的语言。但是需要注意的是JavaScript通过原型链而不是类来支持面向对象编程有关 ES6 类的内容参考这里Classes有关对象原型参考见此继承与原型链。 在其他语言中一般会有类和对象两种概念。类是创建对象的模板创建对象的时候根据类的定义来创建而在类中我们定义了类的继承关系从而实现对象之间的继承等关系。所以其他语言是根据最终依据类中的定义来决定对象之间的关系而在运行阶段对象与对象的关系是确定的是无法修改的 但是在JavaScript中只有对象。每个对象object都有一个私有属性指向另一个名为原型prototype的对象。原型对象也有一个自己的原型层层向上直到一个对象的原型为 null。根据定义null 没有原型并作为这个原型链prototype chain中的最后一个环节。可以改变原型链中的任何成员甚至可以在运行时修改原型链。即在运行阶段对象与对象间的关系是可以修改的 JavaScript 同样支持函数式编程——因为它们也是对象函数也可以被保存在变量中并且像其他对象一样被传递。
4. JavaScript与事件
浏览器、Node.js这类宿主环境一般运行在操作系统中。因此这就意味着宿主环境能够和操作系统交互从而得知用户是否按下鼠标、是否敲击键盘、……
前面介绍了JavaScript是运行在一个宿主环境中的因此当用户按下键盘之后JavaScript能够通过其宿主环境得知用户按下了键盘。而后采取特定的行动来处理用户按下键盘这一行为。例如读取用户按键是否为回车如果是则提交账号和密码如果是一般字符则视为账号的一部分在输入框中显示……
类似的将鼠标点击这样的事实称为事件。事件是发生在你正在编程的系统中的事情——当事件发生时系统产生或“触发”某种信号并提供一种机制当事件发生时可以自动采取某种行动即运行一些代码。 事件的概念不仅仅是在JavaScript中在其他很多编程场景都存在这一概念。例如 使用C编写的电脑应用例如QT框架编写的播放器当用户点击空格就需要暂停播放再次点击空格就继续播放…… 此时对于事件的捕捉就是由语言自己去完成的一般是通过框架例如QT。而后框架提供了执行处理对应的事件的函数的机制。对于JavaScript事件是由宿主环境负责捕捉的JavaScript负责处理这些事件。 有不同类型的事件可以发生例如
用户选择、点击或将光标悬停在某一元素上。用户在键盘中按下某个按键。用户调整浏览器窗口的大小或者关闭浏览器窗口。网页结束加载。表单提交。视频播放、暂停或结束。发生错误。
为了对一个事件做出反应你要给它附加一个事件处理器。这是一个代码块通常是你作为程序员创建的一个 JavaScript 函数在事件发生时运行。当这样一个代码块被定义为响应一个事件而运行时我们说我们在注册一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生处理器对事件发生做出回应。
例如下面的代码
!-- HTML代码 --
p idmyParagraph这是一个段落。/p
button idmyButton点击我/button// JavaScript代码
const button document.getElementById(myButton);
const paragraph document.getElementById(myParagraph);function random(number) {return Math.floor(Math.random() * (number 1));
}button.addEventListener(click, function () {const rndCol rgb(${random(255)}, ${random(255)}, ${random(255)});paragraph.style.backgroundColor rndCol;
});在上面这段代码中我们在HTML定义的网页中定义了一个按钮和一段文字而后在JavaScript中我们为这个按钮的点击事件绑定了一个函数这个函数随机产生一个颜色而后将HTML中这段文字的背景颜色设置为这个随机颜色。
具体运行的效果访问链接去试一试
正如我们在上面的例子中所看到的能够触发事件的对象有一个 addEventListener() 方法这就是通过这个函数我们能够为HTML中指定的标签所触发的事件添加事件处理器。
但是一个网页中需要处理的时间很多很多一个个手动添加很难顶。因此JavaScript中就出现了类似于Vue这样的框架通过框架我们能够快速的添加事件处理器。不过在介绍Vue之前我们还需要介绍JavaScript的和HTML文档的交互。
5. JavaScript与HTML文档
网页所有的内容的显示都是由HTML决定的JavaScript只是决定了一个事件是如何被处理的。
然后在上面的例子中我们看到了当按钮被点击之后网页的部分的颜色直接改变了。这就意味着决定网页内容包括背景颜色的HTML改变了。可是在点击按钮之后只有JavaScript的函数被运行了我们没有重新加载网页即刷新网页的颜色就变了。这就意味着JavaScript具有动态修改HTML的能力。
事实上这就是JavaScript让网页从静态变成动态的核心我们可以在JavaScript中动态修改HTML的元素。例如 点击按钮之后添加一个p标签从而添加一段文字。点击链接查看效果 点击按钮之后修改p标签的内容从而修改原先的文字。点击链接查看效果 ……
正是因为JavaScript可以动态修改HTML的内容才使得网页具有了各种各样丰富多彩的功能才使得网页从一个单纯的文章变成了应用。
6. DOM对象
关于JavaScript修改HTML我们还需要多讲一点就是DOM对象。其实修改HTML非常简单无非就是增加、删除或者修改标签即可。
然而前面在介绍HTML标签的时候介绍过标签是可以嵌套的例如
divdiv标签里嵌套一个pp标签/p是完全合法的/div
div你甚至可以在div标签里嵌套另外一个divdiv标签/div这也是完全合法的/div此外一个网页中一个标签完全可以出现多次例如可以出现多个p标签
pp标签可以出现多次这是第0次/p
pp标签可以出现多次这是第1次/p
pp标签可以出现多次还能p嵌套/p出现/p可是JavaScript在进行修改的时候到底要修改哪个p标签由此引发的是对HTML中的标签定位问题。
类似于操作系统的文件系统使用树状的路径来确定一个个文件、区分同名文件HTML也可以使用树状的结构来区分所有的p标签
将最外层的html标签表示为根节点其余所有标签都是其子节点将嵌套的标签表示为父子节点将并列的标签表示为兄弟节点
从而构建出来一个表示了HTML中所有标签的树 通过这个树我们就能够去定位到具体我们需要去修改的标签然后进行修改即可。
我们发现HTML是一个既可以在浏览器窗口中显示的文档也可以作为 HTML 源代码的文档被文件编辑器编辑。使用浏览器查看和使用文本编辑器编辑提供了HTML文档两种不同的访问方式。
**这里我们通过这种树形的方式去访问、修改其信息的方式提供了第三种访问方式通过编程语言访问。**由此我们将此时被抽象为树的HTML称为文档对象模型DOM以表示此时的HTML文件是内部具有结构的对象的集合。而上面的树则称为DOM树。
通过的DOM表示方式使得HTML可以被操作。作为一个面向对象的网页表示其中的每一个对象即标签可以用编程语言如 JavaScript、Python进行修改。
我们再来看看上面那个改变背景颜色的JavaScript代码
// JavaScript代码
const button document.getElementById(myButton);
const paragraph document.getElementById(myParagraph);function random(number) {return Math.floor(Math.random() * (number 1));
}button.addEventListener(click, function () {const rndCol rgb(${random(255)}, ${random(255)}, ${random(255)});paragraph.style.backgroundColor rndCol;
});我们发现其实这个JavaScript代码的功能就是 首先在DOM树中找到按钮标签和p标签即 const button document.getElementById(myButton);
const paragraph document.getElementById(myParagraph);然后为按钮这个标签的点击事件添加事件处理函数即 btn.addEventListener(click, () {const rndCol rgb(${random(255)}, ${random(255)}, ${random(255)});paragraph.style.backgroundColor rndCol;
});事件处理函数中 首先产生随机颜色即 const rndCol rgb(${random(255)}, ${random(255)}, ${random(255)});然后修改p的属性值这里是修改背景颜色即 paragraph.style.backgroundColor rndCol;我们会发现JavaScript中这样通过原生的方式去修改HTML实在是太繁琐了。这里只是修改背景颜色而已还别说别的功能了。例如我们要实现美团外卖的添加购物车功能那么JavaScript代码里面要写死我们。
正是因为这样目前JavaScript会借助框架来快捷的帮我们处理这些事情我们只需要关注具体得事件处理函数的编写即可而接下来要介绍的Vue就是这样的一个框架。
三、Vue
我们上面在介绍JavaScript和HTML的交互的时候讲到了标准的JavaScript修改HTML以实现动态网页的方式比较繁琐代码写起来烦得要死。为此就出现了很多的框架例如React、Angular他们帮助我们快捷的绑定函数到指定标签的事件上去。
实际上框架能干的事情、为我们干的事情远不止如此不过在目前阶段我们这样理解框架就行了。Vue就是诸多JavaScript框架中最成功的那一个。所以接下来就介绍介绍Vue
1. 简介
Vue (发音为 /vjuː/类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS和JavaScript构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue都可以胜任。
最初Vue是一个个人项目时至今日已成为全世界三大前端框架之一Github上拥有3.8万Star。 领先于另外两个前端框架React和Angular在国内更是首选。
2. 发展历史
2013年在 Google 工作的尤雨溪受到 Angular 的启发开发出了一款轻量级框架最初命名为 Seed 。2013年12月更名为 Vue图标颜色是代表勃勃生机的绿色版本号是 0.6.0。2014.01.24Vue 正式对外发布版本号是 0.8.0。2014.02.250.9.0 发布有了自己的代号Animatrix此后重要的版本都会有自己的代号。2015.06.130.12.0代号Dragon BallLaravel 社区一款流行的 PHP 框架的社区首次使用 VueVue 在 JS 社区也打响了知名度。2015.10.261.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年vue-router、vuex、vue-cli 相继发布标志着 Vue从一个视图层库发展为一个渐进式框架。2016.10.012.0.0 是第二个重要的里程碑它吸收了 React 的虚拟 Dom 方案还支持服务端渲染。自从Vue 2.0 发布之后Vue 就成了前端领域的热门话题。2019.02.05Vue 发布了 2.6.0 这是一个承前启后的版本在它之后推出了 3.0.0。2019.12.05在万众期待中尤雨溪公布了 Vue 3 源代码此时的 Vue 3仍 处于 Alpha 版本。2020年09月18日Vue.js 3.0 正式发布。
前两年国内大厂的网页前端基本都是用Vue 2.0写的可是截止本文发布时间2023年不少大厂已经切换到了Vue 3.0了。
作为一个计算机科学家理应了解计算机的方方面面。
3. Vue文件
Vue是JavaScript的框架Vue通过组件的形式来组织网页即将一个页面分为不同的组件每个组件以单独的文件形式保存称为Vue文件后缀一般为.vue。 一个典型的Vue文件一般分为三个部分
template部分定义了这个组件的HTML代码即该组件的结构script部分定义了这个组件JavaScript代码即该组件的行为style部分定义了这个组建的CSS代码即该组件的外观 未来这个组件在被Vue加载的时候template中的内容将按照style中中CSS指定的样式显示而具体的行为则由script中的JavaScript代码决定 下面就是一个典型的Vue文件的例子我们这里不关注其中的语法只关注其结构。后续我们会进行详细的介绍。
templatedivh1{{ message }}/h1button clickchangeMessageChange Message/button/div
/templatescript
export default {data() {return {message: Hello, Vue!};},methods: {changeMessage() {this.message Vue is awesome!;}}
};
/scriptstyle
h1 {color: blue;
}
/style4. HTML标签的字段
我们在前面介绍了HTML的标签我们前面说到
HTML标签的属性HTML标签的内容
是两个完全独立内容其中
属性控制了标签的行为、样式、……内容控制了显示的数据
例如按钮标签button
按钮标签的属性 type属性决定了这个按钮是一个普通按钮id属性决定了这个按钮的ID方便未来在JavaScript中通过查找ID为myButton的标签来找到这个按钮onclick属性决定了按钮的点击事件处理函数 按钮标签的内容 点击我将会弹窗决定了按钮内显示的文本
htmlbutton typebutton idmyButton onclickmyFunction()点击我将会弹窗/buttonscriptfunction myFunction() {alert(按钮被点击了);}/script
/html最终显示的效果为 点击之后的效果 因此我们使用JavaScript来修改DOM树的时候其实对于每一个标签我们要修改的就是这个标签的属性和内容。而标签的内容又是通过标签的属性绑定到标签上的例如下面的例子
html
button idmyButton typebutton onclickmyFunction()点击我/button
div idmyDiv这是一个示例/divscript// 根据ID查找到标签var div document.getElementById(myDiv)var button document.getElementById(myButton)function myFunction() {// 标签内容以属性的形式绑定到JavaScript对象上div.innerText 标签的内容被修改// 同时修改标签的style属性div.style.backgroundColor green;}
/script/html点击前 点击后 5. Vue修改DOM
我们前面讲到使用JavaScript原生修改HTML的方式就是先在DOM树中找到要修改的标签对象JavaScript中标签以对象的形式存在然后通过修改对象的属性来修改标签的内容和属性。
而在Vue中
Vue使用插值表达式来完成内容的修改Vue使用Vue指令来完成属性的修改
A. Vue插值表达式
我们前面说到Vue的组件中template标签中的内容是将要显示的HTML代码。而Vue中的插值表达式是一种在template标签中使用的特殊语法会被Vue引擎动态地解析。
插值表达式用于在模板中插入动态的数据语法为
{{ JavaScript表达式 }}例如
templatediv classtesth1变量message的值为: {{ message }}/h1/div
/template效果为 可以看到Vue在解析组件的时候用变量的值替换了插值表达式。
B. Vue指令
1) HTML和XML
HTML语言是XML语言的子集。XML语言的全称是可扩展标记语言英语Extensible Markup Language简称XML。
既然称为可扩展标记语言所以XML其实是允许我们程序员自己定义新的标签而后在标签中存储数据。例如
booktitleHarry Potter and the Philosophers Stone/titleauthorJ.K. Rowling/authoryear1997/year
/book在这个例子中book是根元素它包含了title、author和year等子元素。每个子元素都包含了相应的数据。XML的结构可以根据需求来定义用于存储和传输数据。
HTML是XML的一种其预先定义了一些标签这些标签是会被浏览器识别并且渲染出不同的样式的例如h1标签会改变文字的字号。
既然HTML是XML的一种那么其实我们也可以为HTML定义新的标签不过新定义的标签浏览器是不会对其进行渲染的除非我们为自己定义的新标签指定外观和行为。
2) 自定义属性
除了为HTML定义新的标签以外我们还可以为HTML的标签定义新的属性而后为新的属性指定样式和行为。
具体就是通过HTML和JavaScript为已有的HTML标签添加新的属性。例如 我们为p标签定义一个look属性 p lookfalse这是一个段落/p如果look属性值为true则不进行任何修改如果look属性值为false则隐藏p标签的内容即指定文字的透明度为100% 具体这个属性功能的实现则是通过JavaScript const pElement document.querySelector(p);
const lookValue pElement.getAttribute(look);
if (lookValue true){pElement.style.opacity 1;3) Vue指令
Vue中为我们定义了许多由Vue定义的标签以简化开发这些属性Vue中称其为指令。
不同的指令有不同的作用例如
v-on指令可以便捷的将事件和JavaScript函数绑定起来即将JavaScript的函数作为v-on属性的值v-show指令可以根据变量的真假来决定是否显示变量即将JavaScript的变量作为v-show属性的值
例如
templatediv classtesth1变量ifShow的值为: {{ ifShow }}/h1h1 v-showifShowifShow为{{ ifShow }}, 会显示内容/h1button typebutton v-on:clickchangeValue()点击修改布尔值/button/div
/template这里
ifShow是一个布尔变量changeValue是一个函数每次会将ifShow取反
最后得到的效果为 6. Vue的JavaScript标签
我们上面说到Vue提供了指令和插值表达式使得template标签中的HTML代码和javascript标签中的JavaScript代码可以动态地交互。这里详细介绍一下Vue的JavaScript标签
A. 模块
ES6规范发布前JavaScript在语法上是不支持模块的虽然我们可以通过读取文件、自己编写解析器的方式实现加载但是JavaScript依旧不像其他语言一样具有模块的能力。
一直直到ES6JavaScript才在语法层面上支持了模块。模块的核心思想就是**把逻辑分块各自封装相互独立每个块自行决定对外暴露什么同时自行决定引入执行哪些外部代码**。对应着导出和导入我们可以在一个JavaScript文件中决定要导出那些变量、函数而后再另外一个JavaScript代码中导入这些变量和函数
对于Vue来说Vue框架会将我们自己写的组件中JavaScript代码作为一个模块引入因此我们需要在自己的组件中将自己的JavaScript代码导出。
ES6模块支持两种导出命名导出和默认导出。不同的导出方式对应不同的导入方式。
1) 命名导出
在JavaScript中可以使用命名导出来导出模块中的特定函数、变量或类。命名导出允许你在导入模块时只导入你感兴趣的部分而不是整个模块。
要使用命名导出首先需要在模块中定义你想要导出的函数、变量或类。然后使用export关键字将它们导出。
例如
导出一个变量
// 模块中的代码
export const PI 3.14;// 导入模块的代码
import { PI } from ./module.js;
console.log(PI); // 输出: 3.14导出一个函数
// 模块中的代码
export function add(a, b) {return a b;
}// 导入模块的代码
import { add } from ./module.js;
console.log(add(2, 3)); // 输出: 52) 默认导出
在JavaScript中除了命名导出还可以使用默认导出来导出模块中的内容。默认导出允许你在导入模块时为导出的内容选择任意名称而不需要使用花括号指定导入的特定项。
要使用默认导出可以在模块中使用export default关键字将一个函数、变量或类标记为默认导出。
例如
默认导出一个变量
// 模块中的代码
export default const PI 3.14;// 导入模块的代码
import PI from ./module.js;
console.log(PI); // 输出: 3.14默认导出一个函数
// 模块中的代码
export default function add(a, b) {return a b;
}// 导入模块的代码
import add from ./module.js;
console.log(add(2, 3)); // 输出: 5注意默认导出只能有一个而且在导入时可以为其指定任意名称。在导入时你可以自由选择一个名称来引用默认导出的内容。
B. Vue组件的导出
Vue组件要求我们在script标签中使用export default语法将一个对象导出为默认导出。这个对象包含了Vue组件的选项和逻辑。
例如
template!-- 模板部分 --div!-- 在这里放置你的HTML模板 --/div
/templatescript// 脚本部分export default {// 被导出的数据、函数}
/scriptstyle/* 样式部分 *//* 在这里放置你的CSS样式 */
/style这里导出的只有一个对象因此
要导出的所有变量需要使用data函数返回一个以变量为属性的对象要导出的所有函数需要使用methods属性返回一个以函数为属性的对象
例如上面点击按钮修改显示文字的Vue组件
变量ifShow作为对象的属性由data函数返回函数作为对象的属性由methods属性返回
templatediv classtesth1变量ifShow的值为: {{ ifShow }}/h1h1 v-showifShowifShow为{{ ifShow }}, 会显示内容/h1button typebutton v-on:clickchangeValue()点击修改布尔值/button/div
/templatescript
export default {data() {return {ifShow: true};},methods: {changeValue(){this.ifShow ! this.ifShow}}
}
/script注意ES6中规定如果对象的属性名和变量名一样那么就可以简写
// 定义person对象具有一个属性name
let name Matt;
let person { name: name
};// 简写后
let name Matt;
let person { name
};所以上面导出的代码就等价于
// 原代码
script
export default {data() {return {ifShow: true};},methods: {changeValue(){this.ifShow ! this.ifShow}}
}
/scriptscript
// 等价形式不进行省略
function data(){return { ifShow: true }
}function changeValue(){ this.ifShow ! this.ifShow }export default {data: data,methods : { changeValue: changeValue }
}
/script
