电工基地软件组前端培训3

大家现在已经学了最基础的前端开发的三件套：HTML+CSS+JS。对如何开发前端有了一定的了解，但是距离形成一个真正的网站还有一定的距离，本次课程将介绍一个前端开发的框架：vue.js框架

vue.js官网：https://cn.vuejs.org/

1.vue.js框架简介

vue.js是一套用于构建用户界面的渐进式框架。vue被设计为可以自底向上逐层应用。vue的核心只关注视图层。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue中最核心的部分是组件，最核心的概念是数据绑定。所谓组件可以看做是一个封装模块，比如说网页上有一个部分在其他页面也会用到，我们就可以把这个部分封装起来形成一个组件，这样的话我们就可以复用这个部分，减少冗余的代码。我们在之前的学习中知道我们要改变页面中的文字，我们需要操作DOM，即用document.getElementById("")的方式来更改，这样使得我们的网页不是动态响应，而vue是基于数据绑定的，即我们不需要操作DOM就可以更改页面数据，我们要做的就是将js变量和页面元素进行绑定，从而我们更改了js变量，页面的数据也会发生相应的改变。

vue是单页面应用，在基于vue.js的网站中，你所看到的每个页面其实是由一个后缀为.vue的文件渲染出来的，在不同的页面之间切换的时候其实把不同的.vue文件渲染出来的结果。

2.vue.js的项目文件目录

这里我们以uniapp创建的模板来说明框架的文件目录：

关于如何用uniapp创建一个小项目请参见：https://www.limfx.pro/readarticle/719/uniapp-cai-keng-ji-lu

node_modules：npm 加载的项目依赖模块，说白了就是你为你项目安装的“包”，“库”。

public：public中有一个index.html文件，这是一个模板文件，作用是生成项目的入口文件，我们浏览器访问项目的时候会默认打开这个文件。index.html的内容：

之前谈到了vue是单页面应用，所有.vue的内容会被渲染成html插入到id为“app”的div中，如上图红色框框住的地方，也就是我们不同页面的切换，其实是这个div内的内容的切换。

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

static: 静态文件目录，放置一些图片和字体，如logo等，或者是我们下载的css库之类的。
pages: 不同的页面的.vue文件会放在这里。
components：组件的.vue文件会放在这里。
App.vue: 项目入口文件。
main.ts: 项目的核心文件，一般会在这里进行一些全局的功能配置。这里的.ts文件是typescript文件，TypeScript是JavaScript类型的超类，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。两者在语法上非常类似。vue+ts相比vue+js使用起来更加方便。

package.json：项目配置文件，json格式，里面写明了你的项目安装了哪些包的名称和版本号。在该文件的目录下用命令行执行npm install，然后就会根据文件中的包名和版本号为你安装“包”，并生成node_modules文件夹。node_modules文件夹一般比较大，为了减小整个项目的体积，在与别人交流的时候，会把node_modules文件夹删掉，这样传给别人后，别人直接执行npm install就能把包给安装上。

pages.json：页面配置文件。所有的page需要在这个文件里面注册。

这里我们可以看到第一个page是的路径是index.vue这个文件，也就是项目的首页是这个index.vue渲染出来的页面。

xxx.config.xxx：有类似名字的一般为配置文件，在这里不细讲，一般不做更改，后面遇到了要改的情况再说。

3.`.vue`文件

vue是单页面应用，无论是页面还是组件都是写成.vue文件的形式，一个.vue的文件包含：

<template>
	//页面/组件的模板部分
</template>

<script lang="ts">
    import Vue from 'vue';
	import { Component } from 'vue-property-decorator';
	
	@Component({})
	export default class XXX extends Vue {


        //ts代码写在这里
	}
</script>//ts的部分用来写页面/组件的逻辑

<style>//样式表，用来写页面/组件的样式
</style>

我们从上面的.vue文件中可以看到，我们每个页面/组件的模板、逻辑、样式都是封装在一起的，即不同.vue文件之间是分离开来的，这样的好处是在开发的过程中我们只需要关注.vue文件，即视图层，开发网站可以看做是搭积木一样，把不同.vue文件搭在一起就可以构成一个网页，当然这些.vue文件之间是需要建立联系的。

我们先来看看在一个.vue文件内部各部分是如何配合的：

在<script></script>中的前两行import xxx from xxx是导入模块或其他组件到这个.vue文件中来。@Components({})这个是vue+ts中的装饰器，每个.vue文件最好都加一个这个，具体有什么用，后面再说。

数据绑定：这里以uniapp创建的模板来举例子。

<template>
	<view>
        <cu-custom bgColor="bg-gradual-blue" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">导航栏</block>
        </cu-custom>
		<text>{{ text }}</text>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import { Component } from 'vue-property-decorator';
	
	@Component({})
	export default class index extends Vue {
		text:string = 'I love limfx';
	}
</script>

<style>
	
</style>

现在有一个名为text的变量，它的类型是string，这里是ts的定义变量的语法：

text:string = 'I love limfx' //变量名:类型 = 值

在模板中我们可以用两个花括号将变量名括起来来代替变量的值：

{{ text }}

结果如下图：

只要我们改变了变量text的值就可以改变在页面中的显示。

除了花括号的这种形式，还有表单类的元素，可以用v-model：

<template>
	<view>
        <cu-custom bgColor="bg-gradual-blue" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">导航栏</block>
        </cu-custom>
		请输入内容：<input style="border: groove orange;" v-model="text" @input="inputEvent"></input>
		<text>{{ inputValue }}</text>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import { Component } from 'vue-property-decorator';
	
	@Component({})
	export default class index extends Vue {
		text:string = '';
		inputValue:string  = '';
		
		inputEvent() {
			this.inputValue = this.text;
		}
	}
</script>
<style>
</style>

我写了一个输入框，在输入框里输入的内容与变量text绑定起来，然后在输入框下面有变量inputValue，当我在输入框里输入的时候，我直接将text的值赋予了inputValue，那么输入框下面的文本会同步变化。

此外还有其他的指令：v-if、v-else、v-show、v-html，都比较常用，使用方法也差不多，可自行去了解。

函数：

函数的声明比较简单：

func（param1:type，param2:type,...）:type{
    ...
    return XXX;
}
//for example
login(username:string, password:string):boolean {
    var islogin;
    if(username=="123" && password=="123"){
        islogin = true;
    }else{
        islogin = false;
    }
    return islogin;
}

var loginState = login("123", "123");
console.log(loginState);
//结果为true

这个函数就是有两个都是string类型的参数，返回值也是string类型

关于事件响应调用相应的函数，比如说按按钮、输出、聚焦的时候调用函数：

<input @input="inputEvent"></input>//输入的时候调用inputEvent()函数
<input @blur="blurEvent"></input>//聚焦的时候调用blurEvent()函数
<button @click="clickEvent"></input>//点击的时候调用clickEvent()函数
......//还有很多其他的事件

需要注意的是，在script中调用变量的时候需要用：this.变量名的形式调用，具体可以参考我之前的代码，在函数内定义的局部变量则不需要，可以直接调用。

4.不同组件之间的调用

现在我创建一个登录的组件login：

注意到这个@Prop()代表该组件的属性，即可以由外部直接赋予。

现在我要在index中调用这个组件：

注意我框起来的部分，首先你得需要import你要调用的组件，然后在@Components({})中注册该组件，然后你就可以将login作为标签使用：<login></login>来直接向index中插入我们的组件，效果如上图所示。

现在我想向login组件中传递数据，之前说过了我们设置了两个属性，现在我们在index中向login中传递数据：

你看现在账号密码显示出来了我们传递的值了，注意到一点我在通过属性传值的过程中用的是：

<login :userName="userNameData" :passWord="passWordData"></login>

在属性前加了个冒号，这代表后面的引号中的内容是变量名而不是字符串，这个其实等效于：

<login userName="hhh" passWord="123456"></login>

如果不加冒号的话，结果会是怎么样的呢，可以在下方评论回答。

更多组件之间通信的操作我们下一次再详细介绍。

作业

根据我上面的所讲的内容做一个小demo，尝试一下上面的代码（不局限于我写的，可以是自己找的一些验证vue语法，不过得是vue+ts的）并写一个简单的小报告（就把你的代码和结果附上并做简要说明），本周日前交。

电工基地软件组前端培训3

1.vue.js框架简介

2.vue.js的项目文件目录

3..vue文件

4.不同组件之间的调用

3.`.vue`文件