前言
前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面,我们肯定无从下手,因此今天我们就要来了解一下前端的一些技术,完成前端页面搭建。
先聊一下前端开发模式的发展。
静态页面
- 最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
异步刷新,操作DOM
-
1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态为主。
-
ajax盛行:
- 2005年开始,ajax逐渐被前端开发人员所重视,因为不用刷新页面就可以更新页面的数据和渲染效果。
- 此时的开发人员不仅仅要编写HTML样式,还要懂ajax与后端交互,然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表.
MVVM,关注模型和视图
-
2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。
-
2009年,Ryan Dahl在谷歌的Chrome V8引擎基础上,打造了基于事件循环的异步IO框架:Node.js。
- 基于时间循环的异步IO
- 单线程运行,避免多线程的变量同步问题
- JS可以编写后台diamante,前后台统一编程语言
-
node.js的伟大之处不在于让JS迈向了后端开发,而是构建了一个庞大的生态系统。
-
2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
-
随后,在node的基础上,涌现出了一大批的前端框架:
MVVM模式
- M:即Model,模型,包括数据和一些基本操作
- V:即View,视图,页面渲染结果
- VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
- 只要我们Model发生了改变,View上自然就会表现出来。
- 当用户修改了View,Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
数据双向绑定:当视图(view)数据发生改变后,会影响模型(model)数据
当模型(model)数据发生改变后,会影响视图(view)数据
而我们今天要学习的,就是一款MVVM模式的框架:Vue
第一章 认识Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头:Vue.js、React.js、AngularJS。vue.js以期轻量易用著称,vue.js和React.js发展速度最快。
官网:https://cn.vuejs.org/
参考:https://cn.vuejs.org/v2/guide/
Git地址:https://github.com/vuejs
第二章 Node和NPM
前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。
1.下载Node.js
下载地址:https://nodejs.org/en/download/
推荐下载LTS版本。
之前在安装kibana时,已经安装完成,在控制台输入:
node -v
看到版本信息:
2.NPM
安装完成Node应该自带了NPM了,在控制台输入npm -v
查看:
npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm
我们首先安装nrm,这里-g
代表全局安装
npm install nrm -g
然后通过nrm ls
命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
通过nrm use taobao
来指定要使用的镜像源:
然后通过nrm test npm
来测试速度:
测试淘宝请输入:
nrm test taobao
注意:
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
或者,直接配置仓库:
npm config set registry http://registry.npm.taobao.org/
第三章 快速入门
接下来,我们快速领略下vue的魅力
1.创建工程
创建一个新的工程:
2.安装vue
2.1.下载安装
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。
2.2.引入VUE.JS
或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.3.npm安装(推荐)
在idea的左下角,有个Terminal按钮,点击打开控制台:
从顶部菜单View->Tool windows->Terminal也可以打开
先输入:
npm init -y
对项目进行初始化
此时,会在项目目录下出现一个package.json文件:
这是对项目的基本描述信息。例如名称、版本等,有点类似java中的pom文件。
安装Vue,输入命令:
npm install vue --save
然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
此时再查看package.json,会发现有了变化:
会发现,刚刚安装的vue依赖再这里出现了描述信息。是不是跟pom文件很像?
2.4 安装总结:
安装node.js
1.node -v 查看版本
2.npm -v
3.npm config set registry http://registry.npm.taobao.org/ 切换国内镜像
创建项目在Terminal控制台中输入
1.cd到工程目录下
2.输入npm init -y
3.输入npm install vue --save 安装前端需要的js
4.输入npm install axios --save
3.vue入门案例
3. 1.HTML模板
在vue_demo目录新建一个HTML
在hello.html中,我们编写一段简单的代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
</head>
<body>
<div id="app">
{{name}}非常帅气,有{{num}}个老婆!!
</div>
</body>
</html>
3.2.vue渲染
然后我们通过Vue进行渲染:
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!--引入vue js资源-->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式,从模型取值展示在页面上-->
{{name}}非常帅气,有{{num}}个老婆!!
</div>
</body>
<script>
// 创建vue对象
new Vue({
// 指定vue应用在哪个对象元素
el:"#app",
// vue封装数据的模型
data:{
name:"牧生"
}
});
</script>
</html>
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象,对象中有一些属性:
- el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
- data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定了一个name属性
- 页面中的
h2
元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。
3.3.双向绑定
我们对刚才的案例进行简单修改:
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!--引入vue js资源-->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model 绑定到模型数据-->
请输入一个名字:<input type="text" v-model="name">
<button v-on:click="add()">点我试试</button>
<br>
<!--插值表达式,从模型取值展示在页面上-->
{{name}}非常帅气,有{{num}}个老婆!!
</div>
</body>
<script>
// 创建vue对象
new Vue({
// 指定vue应用在哪个对象元素
el:"#app",
// vue封装数据的模型
data:{
name:"牧生",
num:1
},
// vue绑定事件
methods:{
/*add:function () {
this.num++
}*/
// this一般表示vue对象
add () {
this.num++
}
}
});
</script>
</html>
- 我们在data添加了新的属性:
num
- 在页面中有一个
input
元素,通过v-model
与num
进行绑定。 - 同时通过
{{num}}
在页面输出
效果:
我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
- input与num绑定,input的value值变化,影响到了data中的num值
- 页面
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。
没有任何dom操作,这就是双向绑定的魅力。
3.4.事件处理
我们在页面添加一个按钮:
请输入:<input type="text" v-model="name"><button v-on:click="add()">点我试试</button><br>
- 这里用
v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作num - 普通onclick是无法直接操作num的。
第四章 Vue实例
1.创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el vue作用的HTML元素
- data //vue对象组装的数据
- methods //定义事件操作方法
- …
接下来我们一 一介绍。
2.模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
3.数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
- name的变化会影响到
input
的值 - input中输入的值,也会导致vm中的name发生改变
4.方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
html:
<div id="app">
<button v-on:click="add">点我</button>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
},
methods:{
add:function(){
console.log("弹弹弹,弹走鱼尾纹")
}
}
})
5.生命周期(了解)
5.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期:
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
5.2.了解钩子函数(生命周期)
例如:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的构造函数:
html:
<div id="app">
{{hello}}
</div>
js:
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
this.hello = "hello, world! 我出生了!";
}
})
结果:
5.3.this
我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
this.hello = "hello, world! 我出生了!";
console.log(this);
}
})
控制台的输出:
总结:this
就是当前的Vue实例,在Vue对象内部,必须使用this
才能访问到Vue中定义的data内属性、方法等。
第五章 指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊属性。例如我们在入门案例中的v-model,代表双向绑定。
1.插值表达式
1.1.花括号
格式:
{{表达式}}
说明:
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)
- 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
- 插值表达式一定是在html标签外应用
示例:
HTML:
<div id="app">{{name}}</div>
JS:
var app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
1.2.v-text和v-html
使用v-text和v-html指令来替代{{}}
说明:
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例:
HTML:
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!--引入vue js资源-->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--{{}} 差值表达式 用于运算 -->
{{1+1}}
<!--不能进行的运算-->
{{num++}}<br>
<!--模型中的html标签,原样输出-->
{{hello}}
<!--解析标签-->
<div v-html="hello"></div>
<div v-text="hello"></div>
</div>
</body>
<script>
// 创建vue对象
new Vue({
// 指定vue应用在哪个对象元素
el:"#app",
// vue封装数据的模型
data:{
num:1,
hello:"<h1>高薪就业,我一定可以</h1>"
}
});
</script>
</html>
2.v-model
刚才的v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
基本上除了最后一项,其它都是表单的输入项。
举例:
html:
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!--引入vue js资源-->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
<!-- {{}} 插值表达式可以进行方法调用,但是调用的方法必须有返回值 -->
你选择了:{{language.join(',')}}
</h1>
</div>
</body>
<script>
// 创建vue对象
new Vue({
// 指定vue应用在哪个对象元素
el:"#app",
// vue封装数据的模型
data:{
//[]代表数组
language:[]
}
});
</script>
</html>
- 多个
CheckBox
对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型 - radio对应的值是input的value值
input
和textarea
默认对应的model是字符串select
单选对应字符串,多选对应也是数组
效果:
3.v-on
3.1.基本用法
v-on指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
简写语法:
@事件名="js片段或函数名"
例如v-on:click='add’可以简写为@click=‘add’
事件修饰符:
prevent事件修饰符,作用是阻止默认事件执行
stop事件修饰符:阻止冒泡事件
示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--div1方法执行的同时,div2方法也执行,这种效果叫做 冒泡事件
需要阻止冒泡事件:使用stop事件修饰符
-->
<div @click="div2()" style="background: green;width:100px;height:100px">
<!--<div @click="div1()" style="background: red;width:50px;height:50px"></div>-->
<div @click.stop="div1()" style="background: red;width:50px;height:50px"></div>
</div>
<!-- prevent事件修饰符,作用是阻止默认事件执行 -->
<a href="https://www.baidu.com" @click.prevent="baidu()">百度一下</a>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
name:"牧生",
//name:"",
num:1
},
methods:{//vue绑定的事件方法
baidu(){
alert("哈哈,被骗了吧");
},
div1(){
console.log("div1方法执行了");
},
div2(){
console.log("div2方法执行了");
}
}
});
</script>
</html>
效果:
4.v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
4.1.遍历数组
语法:
v-for="item in items"
- items:要遍历的数组,需要在vue的data中定义好。
- item:迭代得到的数组元素的别名
示例
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-for 遍历执行 -->
<div v-for="user in users">
{{user.name}} ---- {{user.gender}} ---- {{user.age}}
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
users:[
{name:"别飒夫",gender:"女",age:21},
{name:"别黛皋",gender:"男",age:21},
{name:"柯vf",gender:"女",age:25},
{name:"何萨关",gender:"女",age:24},
{name:"莫冀燎",gender:"男",age:21},
{name:"怕健",gender:"女",age:26},
{name:"劳法苟",gender:"女",age:21},
{name:"卡董萨灵",gender:"男",age:23},
{name:"东莱飞",gender:"女",age:21}
]
}
});
</script>
</html>
4.2.数组角标
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
语法
v-for="(item,index) in items"
- items:要迭代的数组
- item:迭代得到的数组元素别名
- index:迭代到的当前元素索引,从0开始。
示例
<!--v-for 遍历执行 -->
<div v-for="(user,index) in users">
{{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
</div>
4.3.遍历对象
v-for除了可以迭代数组,也可以迭代对象。语法基本类似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时,得到的是对象的值
- 2个参数时,第一个是值,第二个是键
- 3个参数时,第三个是索引,从0开始
示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-for 遍历对象 相当于遍历map-->
<div v-for="(v,k,i) in user">
{{i+1}} --- {{v}} --- {{k}}
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
user: {name:'费佰代', gender:'女', age: 23}
}
});
</script>
</html>
效果:
5.v-if的说明
5.1.基本使用
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<button @click="isShow=!isShow">点我试试</button>
<!-- v-if 判断指令,指令是boolean类型 -->
<div v-if="isShow">试试就试试</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
isShow:true
}
});
</script>
</html>
效果:
v-show指令演示,也可以是页面元素的隐藏和显示效果
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<button @click="isShow=!isShow">点我试试</button>
<!-- v-show 元素是否展示的指令,指令是boolean类型 -->
<div v-show="isShow">试试就试试</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
isShow:true
}
});
</script>
</html>
v-if 和v-show实现原理不同:
v-if 是控制页面元素是否生成,完成元素的显示与隐藏
v-show是通过控制元素的display演示,完成元素的显示与隐藏
5.2.与v-for结合
当v-if和v-for出现在一起时,v-for优先级更高。也就是说,会先遍历,再判断条件。
示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-for 遍历执行 -->
<div v-for="(user,index) in users" v-if="user.gender=='女'">
{{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
users:[
{name:"别飒夫",gender:"女",age:21},
{name:"别黛皋",gender:"男",age:21},
{name:"柯vf",gender:"女",age:25},
{name:"何萨关",gender:"女",age:24},
{name:"莫冀燎",gender:"男",age:21},
{name:"怕健",gender:"女",age:26},
{name:"劳法苟",gender:"女",age:21},
{name:"卡董萨灵",gender:"男",age:23},
{name:"东莱飞",gender:"女",age:21}
]
}
});
</script>
</html>
效果:
5.3.v-else
你可以使用 v-else
指令来表示 v-if
的“else 块”:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-for 遍历执行 -->
<div v-for="(user,index) in users" v-if="user.gender=='女'">
{{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
</div>
<div v-else>
<b>{{index + 1 }}==={{user.name}}==={{user.gender}}==={{user.age}}</b>
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
users:[
{name:"别飒夫",gender:"女",age:21},
{name:"别黛皋",gender:"男",age:21},
{name:"柯vf",gender:"女",age:25},
{name:"何萨关",gender:"女",age:24},
{name:"莫冀燎",gender:"男",age:21},
{name:"怕健",gender:"女",age:26},
{name:"劳法苟",gender:"女",age:21},
{name:"卡董萨灵",gender:"男",age:23},
{name:"东莱飞",gender:"女",age:21}
]
}
});
</script>
</html>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
v-else-if
,顾名思义,充当 v-if
的“else-if 块”,可以连续使用:
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else-if="type == 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
6.v-bind
6.1.属性上使用vue数据
看这样一个案例:
我们提前定义了一些CSS样式:
<style>
#box {
width: 100px;
height: 100px;
color: darkgray
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
然后定义了页面:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
<style>
#box {
width: 100px;
height: 100px;
color: darkgray
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<button @click="color='red'">红</button>
<button @click="color='blue'">蓝</button>
<!-- v-bind绑定css样式的指令 可以省略-->
<div id="box" v-bind:class="color">
点击按钮,背景会切换颜色哦
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
color:"red"
},
methods:{//vue绑定的事件方法
}
});
</script>
</html>
解读:
- 页面有两个按钮,点击时,会改变Vue实例中的color值,这个值与前面定义的CSS样式一致。
- 目前div的class为空,我们希望实现点击按钮后,div的class样式会在.red和.blue之间切换
该如何实现?
大家可能会这么想,既然color值会动态变化为不同的class名称,那么我们直接把color注入到class属性就好了,于是就这样写:
<div class="{{color}}"></div>
这样写是错误的!因为插值表达式不能用在标签的属性中。
此时,Vue提供了一个新的指令来解决:v-bind,语法:
v-bind:属性名="Vue中的变量"
例如,在这里我们可以写成:
<div v-bind:class="color"></div>
不过,v-bind太麻烦,因此可以省略,直接写成::属性名='属性值'
,即:
<div :class="color"></div>
6.2.class属性的特殊用法
上面虽然实现了颜色切换,但是语法却比较啰嗦。
Vue对class属性进行了特殊处理,可以接收数组或对象格式
对象语法
我们可以传给 :class
一个对象,以动态地切换 class:
<div :class="{ red: true,blue:false }"></div>
- 对象中,key是已经定义的class样式的名称,如本例中的:
red
和blue
- 对象中,value是一个布尔值,如果为true,则这个样式会生效,如果为false,则不生效。
之前的案例可以改写成这样:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
<style>
#box {
width: 100px;
height: 100px;
color: darkgray
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--<button @click="color='red'">红</button>
<button @click="color='blue'">蓝</button>
<!– v-bind绑定css样式的指令 可以省略–>
<div id="box" v-bind:class="color">
点击按钮,背景会切换颜色哦
</div>-->
<button @click="boo=!boo">点击切换背景</button>
<div id="box" :class="{red:boo, blue: !boo}">
点击按钮,背景会切换颜色哦
</div>
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
//color:"red"
boo:true
},
methods:{//vue绑定的事件方法
}
});
</script>
</html>
- 首先class绑定的是一个对象:
{red:boo, blue: !boo}
- red和blue两个样式的值分别是boo和!boo,也就是说这两个样式的生效标记恰好相反,一个生效,另一个失效。
- boo默认为true,也就是说默认red生效,blue不生效
- 现在只需要一个按钮即可,点击时对boo取反,自然实现了样式的切换
效果:
7.watch
7.1.监控
watch可以让我们监控一个值的变化。从而做出相应的反应。示例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-model绑定模型数据-->
请输入:<input type="text" v-model="name"><button v-on:click="add()">点我试试</button><br>
<!--{{}} 插值表达式,作用:从模型数据中取值,展示在页面上 -->
{{name}},非常帅气,有{{num}}位小姐姐非常喜欢他!!!
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
name:"",
num:1,
},
methods:{//vue绑定的事件方法
/*add:function () {
this.num++; //this就是vue对象
}*/
add() { //这种写法是ECMAScript6语法
this.num++; //this就是vue对象
}
},
watch:{//vue提供的监控功能
/*"name":function (newValue,oldValue) {
console.log(1)
console.log(newValue +"----- "+oldValue)
}*/
"name"(newValue,oldValue) {
console.log(newValue +"----- "+oldValue)
}
}
});
</script>
</html>
效果:
7.2.深度监控
如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化,例如:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<!--v-model绑定模型数据-->
请输入:<input type="text" v-model="user.name"><button v-on:click="add()">点我试试</button><br>
<!--{{}} 插值表达式,作用:从模型数据中取值,展示在页面上 -->
{{user.name}},非常帅气,有{{num}}位小姐姐非常喜欢他!!!
</div>
</body>
<script>
//创建vue对象
new Vue({
el:"#app", //指定vue应用在那个对象元素
data:{ //vue封装的模型数据
//name:"",
//name:"",
num:1,
user:{ //user对象
name:""
}
},
methods:{//vue绑定的事件方法
/*add:function () {
this.num++; //this就是vue对象
}*/
add() { //这种写法是ECMAScript6语法
this.num++; //this就是vue对象
}
},
watch:{//vue提供的监控功能
/*"name":function (newValue,oldValue) {
console.log(newValue +"----- "+oldValue)
}*/
/* "name"(newValue,oldValue) {
console.log(newValue +"----- "+oldValue)
}*/
//监控对象中属性变化情况
/*"user.name"(newValue,oldValue) {
console.log(newValue +"----- "+oldValue)
}*/
//监控对象内容变化
user: {
deep:true, //深度监控,监控对象中的属性值的变化,否则监控的是对象地址值
handler:function (newObj) {//对象属性值改变后,处理的逻辑 newObj是对象变化后的值
console.log(newObj.name);
}
}
}
});
</script>
</html>
变化:
- 以前定义监控时,person是一个函数,现在改成了对象,并且要指定两个属性:
- deep:代表深度监控,不仅监控person变化,也监控person中属性变化
- handler:就是以前的监控处理函数
效果:
第六章 组件化(Component)
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
1.定义全局组件
我们通过Vue的component方法来定义一个全局组件。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue入门demo</title>
<!-- 引入vue js资源 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 指定vue作用范围,但是不能应用在html和body标签上 -->
<div id="app">
<counter></counter>
</div>
</body>
<script>
//定义组件 参数一:组件名称 参数二:组件对象
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){ //注意:组件中的data是一个方法
return {
count:0
}
}
});
//创建vue对象
new Vue({
el:"#app" //指定vue应用在那个对象元素
});
</script>
</html>
- 组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
- 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
- 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data的定义方式比较特殊,必须是一个函数。
效果:
2.组件的复用
定义好的组件,可以任意复用多次:
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
效果:
你会发现每个组件互不干扰,都有自己的count值。怎么实现的?
组件的data属性必须是函数!
当我们定义这个 <counter>
组件时,它的data 并不是像这样直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!
第七章 Ajax异步请求数据
//可以通过Terminal中通过npm install axios --save
//参数1是请求的地址 参数2是请求的内容 => 箭头函数,类似于java的lamda表达式,简化函数定义
axios.post('company',this.dept).then(resp=>{
console.log(resp)
this.companyList = resp.data;
}
)
语法说明:then 请求成功回调函数 catch:请求失败的回调函数
=> 箭头函数,类似于java的lamda表达式,简化函数定义
axios.get("请求路径").then(resp=>{}).catch(error=>{});
axios.post("请求路径",请求参数).then(resp=>{}).catch(error=>{});
//原生ajax请求对比
$.ajax({
type: "post", //数据提交方式(post/get)
url: "/company", //提交到的url
data: {"dept.deptName": this.dept.deptName, "dept.companyName": this.dept.companyName},//提交的数据
dataType: "json",//返回的数据类型格式
success: function (msg) {
if (msg.success) {
app.findAll();
} else {
alert(response.data.message);
}
}
});
第八章 独立Demo案例
1 环境准备
第一步:创建一个SpringBoot项目可以直接使用SpringBoot第一天的代码(需要修改很多东西)
第二步:导入依赖、配置文件、实体类、mapper接口、service、Controller
1、 依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.3.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>
2、配置文件 application.yml
spring:
application:
name: vue-tj4
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql:///springboot_db
username: root
password: root
3、实体类
package cn.com.mryhl.pojo;
import lombok.Data;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;
/**
* @author: mryhl
* @date: Created in 2020/11/10 18:02
* @description:
*/
@Data //注意要记得添加lombok的依赖
@Table(name="tb_user") //类名和表名要映射
public class User {
// id
@Id
private Long id;
// 用户名
private String userName; //特殊注意这个字段 对应的列名是user_name
// 密码
private String password;
// 姓名
private String name;
// 年龄
private Integer age;
// 性别,1男性,2女性
private Integer sex;
// 出生日期
private Date birthday;
// 创建时间
private Date created;
// 更新时间
private Date updated;
// 备注
private String note;
}
4、mapper接口
package cn.com.mryhl.mapper;
import cn.com.mryhl.pojo.User;
import tk.mybatis.mapper.common.BaseMapper;
/**
* @author: mryhl
* @date: Created in 2020/11/10 18:03
* @description:
*/
public interface UserMapper extends BaseMapper<User> {
}
5、service实现类
需要两个方法:1、查询所有用户 2、根据id查询用户
package cn.com.mryhl.service.impl;
import cn.com.mryhl.mapper.UserMapper;
import cn.com.mryhl.pojo.User;
import cn.com.mryhl.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
/**
* @author: mryhl
* @date: Created in 2020/11/10 18:05
* @description:
*/
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.selectAll();
}
@Override
public User findById(Long id) {
return userMapper.selectByPrimaryKey(id);
}
}
6、Controller代码
package cn.com.mryhl.controller;
import cn.com.mryhl.pojo.User;
import cn.com.mryhl.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @author: mryhl
* @date: Created in 2020/11/10 18:06
* @description:
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/findAll")
public List<User> findAll(){
return userService.findAll();
}
@GetMapping("/findById/{id}")
public User findById(@PathVariable("id") Long id){
return userService.findById(id);
}
}
7、创建引导类
package cn.com.mryhl;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import tk.mybatis.spring.annotation.MapperScan;
/**
* @author: mryhl
* @date: Created in 2020/11/10 18:07
* @description:
*/
@SpringBootApplication
@MapperScan("cn.com.mryhl.mapper")
public class UserApplication {
public static void main(String[] args) {
SpringApplication.run(UserApplication.class,args);
}
}
8、导入静态资源
2 展示用户的列表数据
Html需要修改的内容:
JS,在页面的下方完善vue脚本
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口:网页可以根据设置的宽度自动进行适配,在浏览器的内部虚拟一个容器,容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比,为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>员工信息管理系统</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入,建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="myApp">
<h3 style="text-align: center">员工信息列表</h3>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>用户名</th>
<th>年龄</th>
<th>备注信息</th>
<th>操作</th>
</tr>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.userName}}</td>
<td>{{user.age}}</td>
<td>{{user.note}}</td>
<td><a class="btn btn-default btn-sm" >查看</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
//创建vue对象
new Vue({
el:"#myApp",
data:{
//声明用户列表变量
userList:[]
},
methods:{
findAll(){
//发起ajax请求,查询用户列表数据
//resp=>{} 箭头函数,简化方法定义
axios.get("/user/findAll").then(resp=>{
console.log(resp);
this.userList=resp.data;
});
}
},
created(){//钩子函数,页面加载后,发ajax请求,查询用户列表数据
this.findAll();
}
});
</script>
3 展示用户的详情页面数据
第一步:在列表页面添加超链接
<td><a class="btn btn-default btn-sm" :href="'view.html?id='+user.id" >查看</a></td>
第二步:进入到view.html 获取url上的ID值
let id = location.search.split("=")[1];
第三步:根据ID获取User对象
<!-- 网页使用的语言 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改员工</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入,建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="myApp" class="container">
<center><h3>员工查看页面</h3></center>
<div class="form-group">
<label>姓名:</label>
<span>{{user.name}}</span>
</div>
<div class="form-group">
<label>用户名:</label>
<span>{{user.userName}}</span>
</div>
<div class="form-group">
<label>年龄:</label>
<span>{{user.age}}</span>
</div>
<div class="form-group">
<label>性别:</label>
<span v-if="user.sex==1">男</span>
<span v-if="user.sex==0">女</span>
</div>
<div class="form-group">
<label>备注:</label>
<span>{{user.note}}</span>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-default" type="button" value="返回列表" onclick="history.go(-1)" />
</div>
</div>
</body>
</html>
<script>
//创建vue对象
new Vue({
el:"#myApp",
data:{
user:{}//初始化用户对象
},
methods:{
findById(){
//获取请求路径中的id值 例如:http://localhost:8080/view.html?id=3
console.log(location);
let id =location.search.split("=")[1];
//发送ajax请求查询用户信息
axios.get("/user/findById/"+id).then(
resp=>{
this.user=resp.data;
}
);
}
},
created(){
this.findById();//基于用户id查询用户信息
}
});
</script>
浏览器访问:搞定!