概述
ES6 是 JavaScript 语言的新版本,它也可以叫做 ES2015,JavaScript 属于 ES5,ES6 在它的基础上增加了一些语法,ES6 是未来 JavaScript 的趋势,而且 vue 组件开发中会使用很多的ES6 的语法,所以掌握这些常用的 ES6 语法是必须的。
组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
本章会带大家完成一次简单的单文件组件开发过程
一. ES6语法
ES6 是 JavaScript 语言的新版本,它也可以叫做 ES2015,之前学习的 JavaScript 属于 ES5,ES6 在它的基础上增加了一些语法,ES6 是未来 JavaScript 的趋势,而且 vue 组件开发中会使用很多的ES6 的语法,所以掌握这些常用的 ES6 语法是必须的。
声明 let 和 const
let 和 const 是新增的声明变量的开头的关键字,在这之前,变量声明是用 var 关键字,这两个关键字和 var 的区别是,它们声明的变量没有预解析,let 和 const 的区别是,let 声明的是一般变量,const 申明的常量,不可修改。
let
1 | 使用格式: |
age的值可以改变, 但是使用 let 定义的变量没有预解析功能
const
1 | 使用格式: |
age的值不能够改变, 否则报错
案例:
1 | alert(iNum01) // 弹出undefined |
箭头函数
可以把箭头函数理解成匿名函数的第二种写法
1 | // 定义函数的一般方式 |
案例:
1 | <head> |
模块导入 import 和导出 export
javascript 之前是没有模块的功能的,之前做 js 模块化开发,是用的一些 js 库来模拟实现的,在 ES6中加入了模块的功能,和 python 语言一样,python 中一个文件就是一个模块,ES6 中,一个 js 文件就是一个模块,不同的是,js 文件中需要先导出( export )后,才能被其他 js 文件导入( import )
1 | // model.js文件中导出 |
目前 ES6 的模块功能需要在服务器环境下才可以运行。
对象的简写
javascript 对象在 ES6 中可以做一些简写形式,了解这些简写形式,才能方便我们读懂一些在javascript 代码中简写的对象。
1 | let name = '李思'; |
总结:
- import 和 export 我们在后面学习 vue 组件的时候会学习到
- 对象的简写大家知道就可以,一般不会这样使用
- 箭头函数偶尔会使用, 大家要学会使用
- let 和 const 不是必须掌握的内容, 能掌握更好, 不能的话就全部写成 var 也是没有问题的.
二. vue组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
1 | 使用方法: |
注册及使用组件
1 | <div id="example"> |
data 必须是函数
组件中的 data 是一个函数, vue 对象中的data是一个对象
组件就是 vue 的实例,所有 vue 实例中属性和方法,组件中也可以用,但是 data 属性必须是一个函数,因为组件会重复使用在多个地方,为了使用在多个地方的组件数据相对独立,data属性需要用一个函数来返回值。
1 | <div id="example-2"> |
props传递数据
这个属性一般用来给组件传递值使用的
如果想给组件中传递参数,组件要显式地用 props 选项声明它预期的数据:
1 | <div id="app"> |
结果:
1 | 哈哈哈zhangsan |
三. 单文件组件
将一个组件相关的 html 结构,css 样式,以及交互的 JavaScript 代码从 html 文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:”menu.vue”。
单文件组件代码结构
1 | <template> |
Vue组件开发自动化工具
windows终端操作
1、打开终端
在window开始的搜索框,输入cmd,回车;或者在开始上点右键,选择运行,输入cmd回车;或者在window窗口的地址栏上输入cmd,回车。
2、常用终端命令
1 | // 查看文件夹内容 |
Node.js
Node.js是一个新的后端(后台)语言,它的语法和JavaScript类似,所以可以说它是属于前端的后端语言,后端语言和前端语言的区别:
- 运行环境:后端语言一般运行在服务器端,前端语言运行在客户端的浏览器上
- 功能:后端语言可以操作文件,可以读写数据库,前端语言不能操作文件,不能读写数据库。
Node.js如果安装成功,可以查看Node.js的版本,在终端输入如下命令:
1 | node -v |
npm
npm是node.js的包管理器,安装了node.js同时会自动安装这个包管理器,可以npm命令来安装node.js的包。这个工具相当于python的pip管理器。
安装vue的自动化工具
vue开发生态区提供了用node.js开发的自动化开发工具包,这个工具包可以帮我们编译单文件组件。
1 | // 全局安装 vue-cli |
生成Vue单页面应用项目目录
单页应用(SPA)
单页Web应用(single page web application,SPA),就是将系统所有的操作交互限定在一个web页面中。单页应用程序 (SPA) 是加载单个HTML页面,系统的不同功能通过加载不同功能组件的形式来切换,不同功能组件全部封装到了js文件中,这些文件在应用开始访问时就一起加载完,所以整个系统在切换不同功能时,页面的地址是不变的,系统切换可以做到局部刷新,也可以叫做无刷新,这么做的目的是为了给用户提供更加流畅的用户体验。
生成项目目录
使用vue自动化工具可以快速搭建单页应用项目目录。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
1 | // 生成一个基于 webpack 模板的新项目 my-project:项目名称 |
项目目录结构说明
需要关注的是上面标注的三个目录:
- 文件夹1(src),主开发目录,要开发的单文件组件全部在这个目录下
- 文件夹2(static),静态资源目录,所有的css,js文件放在这个文件夹
- 文件夹3(dist),项目打包发布文件夹,最后要上线单文件项目文件都在这个文件夹中
还有node_modules目录是node的包目录,config是配置目录,build是项目打包时依赖的目录。
页面结构说明
整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
组件嵌套
将单文件组件组合在一起有两种方式,一种是嵌套方式,一种用路由的方式。嵌套的方式代码如下:
下图示中,假设组件A中要嵌入组件B
1 | <template> |
路由
可以通过路由的方式在一个组件中加载其他组件,要使用路由功能,需要在main.js中先导入路由的包,然后在组件对象中还需要包含它。
1 | import router from './router' |
组件中通过路由标签来加载其他的路由
1 | <!-- 路由标签 --> |
路由标签里面加载哪个组件呢?在router文件中的index.js文件中设置
1 | import Vue from 'vue' |
通过链接可以切换路由标签里面对应的组件,链接的地址是上面index.js文件中定义的path值,不过链接标签是”router-link”,链接地址用’to’来定义:
1 | <router-link to="/">股票信息</router-link> |
链接地址中可以传递参数,格式如下:
1 | // name对应的是路由中定义的一个path对应的name属性 |
有时候需要在组件的js中跳转页面,也就是改变路由,改变路由有下面这些方式:
1 | // 当前页面重新加载 |
数据请求及跨域
数据请求
数据请求使用的是ajax,在vue中使用的axios.js,这个文件可以在index.html文件中引入,也可以作为模块导入,在main.js中导入这个模块,然后将它绑定在Vue类的原型上。
1 | import axios from 'axios' |
在组件的js代码中使用axios:
1 | this.axios({......}) |
跨域请求
vue的自动化工具提供了开发的服务器,我们在这个服务器环境下开发,改动代码可以马上更新显示,错误了还有代码提示,非常方便,但是,如果我们组件中需要数据,而且数据在另一个服务器环境下运行,我们就需要跨域请求数据,vue工具中可以使用代理来跨域请求,设置的方法是:在项目的config文件夹中,打开index.js,在proxyTable一项中设置:
1 | // 'http://localhost:7890' 表示的是要跨域请求的地址 |
打包上线
项目开发完成后,需要把请求数据的代理地址改成和提供数据的服务器在同一个域的地址,因为最终会把前端代码放在和数据在同一个域的服务器下面运行。
1 | // 将下面的请求地址 |
改完请求地址后,就可以将代码打包,生成最终可以上线的单文件结构:
1 | // 打开终端,ctrl+c停掉开发服务器,执行下面的命令 |
自动化程序会将打包的文件自动生成到项目的dist文件夹中。
将这些文件拷贝到提供数据服务的服务器的静态目录文件夹中,完成最终的上线!